lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

boundBoxFunc for Transformer

Browse Source
This commit is contained in:
Anton Lavrenov 2018-04-11 08:36:08 +07:00
parent cf0ec1641d
commit 76d3282fcf
5 changed files with 102 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
konva.js
View File

@ -2,7 +2,7 @@
* Konva JavaScript Framework v2.0.2
* http://konvajs.github.io/
* Licensed under the MIT
* Date: Mon Apr 02 2018
* Date: Wed Apr 11 2018
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -14763,14 +14763,6 @@
context.closePath();
context.fillStrokeShape(this);
},
// _useBufferCanvas: function(caching) {
// var useIt = Konva.Shape.prototype._useBufferCanvas.call(this, caching);
// if (useIt) {
// return true;
// }
// return false;
// // return isFirefox && this.hasFill() && this.hasShadow();
// },
setText: function(text) {
var str = Konva.Util._isString(text) ? text : (text || '').toString();
this._setAttr(TEXT, str);
@ -19184,31 +19176,32 @@
}
},
_fitNodeInto: function(attrs) {
_fitNodeInto: function(newAttrs) {
// waring! in this attrs padding may be included
var boundBoxFunc = this.getBoundBoxFunc();
if (boundBoxFunc) {
var oldAttrs = this._getNodeRect();
newAttrs = boundBoxFunc.call(this, oldAttrs, newAttrs);
}
this._settings = true;
var node = this.getNode();
if (attrs.rotation !== undefined) {
this.getNode().rotation(attrs.rotation);
if (newAttrs.rotation !== undefined) {
this.getNode().rotation(newAttrs.rotation);
}
var pure = node.getClientRect({ skipTransform: true });
var padding = this.getPadding();
var scaleX = (attrs.width - padding * 2) / pure.width;
var scaleY = (attrs.height - padding * 2) / pure.height;
var scaleX = (newAttrs.width - padding * 2) / pure.width;
var scaleY = (newAttrs.height - padding * 2) / pure.height;
var rotation = Konva.getAngle(node.getRotation());
// debugger;
var dx = pure.x * scaleX - padding;
var dy = pure.y * scaleY - padding;
// var dxo = node.offsetX() * scaleX;
// var dyo = node.offsetY() * scaleY;
this.getNode().setAttrs({
scaleX: scaleX,
scaleY: scaleY,
x: attrs.x - (dx * Math.cos(rotation) + dy * Math.sin(-rotation)),
y: attrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation))
x: newAttrs.x - (dx * Math.cos(rotation) + dy * Math.sin(-rotation)),
y: newAttrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation))
});
this._settings = false;
@ -19301,6 +19294,14 @@
visible: this.lineEnabled()
});
},
isTransforming: function() {
return this._transforming;
},
stopTransform: function() {
if (this._transforming) {
this._removeEvents();
}
},
destroy: function() {
Konva.Group.prototype.destroy.call(this);
this.detach();
@ -19468,5 +19469,7 @@
Konva.Factory.addOverloadedGetterSetter(Konva.Transformer, 'node');
Konva.Factory.addGetterSetter(Konva.Transformer, 'boundBoxFunc');
Konva.Collection.mapMethods(Konva.Transformer);
})(Konva);

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
src/shapes/Text.js
View File

@ -222,14 +222,6 @@
context.closePath();
context.fillStrokeShape(this);
},
// _useBufferCanvas: function(caching) {
// var useIt = Konva.Shape.prototype._useBufferCanvas.call(this, caching);
// if (useIt) {
// return true;
// }
// return false;
// // return isFirefox && this.hasFill() && this.hasShadow();
// },
setText: function(text) {
var str = Konva.Util._isString(text) ? text : (text || '').toString();
this._setAttr(TEXT, str);

33
src/shapes/Transformer.js
View File

@ -552,31 +552,32 @@
}
},
_fitNodeInto: function(attrs) {
_fitNodeInto: function(newAttrs) {
// waring! in this attrs padding may be included
var boundBoxFunc = this.getBoundBoxFunc();
if (boundBoxFunc) {
var oldAttrs = this._getNodeRect();
newAttrs = boundBoxFunc.call(this, oldAttrs, newAttrs);
}
this._settings = true;
var node = this.getNode();
if (attrs.rotation !== undefined) {
this.getNode().rotation(attrs.rotation);
if (newAttrs.rotation !== undefined) {
this.getNode().rotation(newAttrs.rotation);
}
var pure = node.getClientRect({ skipTransform: true });
var padding = this.getPadding();
var scaleX = (attrs.width - padding * 2) / pure.width;
var scaleY = (attrs.height - padding * 2) / pure.height;
var scaleX = (newAttrs.width - padding * 2) / pure.width;
var scaleY = (newAttrs.height - padding * 2) / pure.height;
var rotation = Konva.getAngle(node.getRotation());
// debugger;
var dx = pure.x * scaleX - padding;
var dy = pure.y * scaleY - padding;
// var dxo = node.offsetX() * scaleX;
// var dyo = node.offsetY() * scaleY;
this.getNode().setAttrs({
scaleX: scaleX,
scaleY: scaleY,
x: attrs.x - (dx * Math.cos(rotation) + dy * Math.sin(-rotation)),
y: attrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation))
x: newAttrs.x - (dx * Math.cos(rotation) + dy * Math.sin(-rotation)),
y: newAttrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation))
});
this._settings = false;
@ -669,6 +670,14 @@
visible: this.lineEnabled()
});
},
isTransforming: function() {
return this._transforming;
},
stopTransform: function() {
if (this._transforming) {
this._removeEvents();
}
},
destroy: function() {
Konva.Group.prototype.destroy.call(this);
this.detach();
@ -836,5 +845,7 @@
Konva.Factory.addOverloadedGetterSetter(Konva.Transformer, 'node');
Konva.Factory.addGetterSetter(Konva.Transformer, 'boundBoxFunc');
Konva.Collection.mapMethods(Konva.Transformer);
})(Konva);

55
test/unit/shapes/Transformer-test.js
View File

@ -991,4 +991,59 @@ suite('Transformer', function() {
});
assert.equal(stage.content.style.cursor, 'nwse-resize');
});
test('stopTransform method', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var rect = new Konva.Rect({
x: 50,
y: 50,
draggable: true,
width: 100,
height: 100,
fill: 'yellow'
});
layer.add(rect);
var tr = new Konva.Transformer({
node: rect
});
layer.add(tr);
layer.draw();
stage.simulateMouseDown({
x: 50,
y: 50
});
var top = stage.content.getBoundingClientRect().top;
tr._handleMouseMove({
target: tr.findOne('.top-left'),
clientX: 60,
clientY: 60 + top
});
assert.equal(tr.isTransforming(), true);
assert.equal(rect.x(), 60);
var transformend = 0;
rect.on('transformend', function() {
transformend += 1;
});
tr.stopTransform();
assert.equal(transformend, 1);
assert.equal(tr.isTransforming(), false);
assert.equal(rect.x(), 60);
// here is duplicate, because transformer is listening window events
stage.simulateMouseUp({
x: 100,
y: 100
});
});
});