lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-08 00:14:23 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Transformer changes to work properly with scaling

Browse Source
This commit is contained in:
Nathan Bruer
2018-07-03 10:03:19 -07:00
parent 56a2c1c43d
commit 96837bd349
1 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/shapes/Transformer.js
View File

@@ -1,6 +1,9 @@
(function(Konva) {
'use strict';
var BASE_BOX_WIDTH = 10;
var BASE_BOX_HEIGHT = 10;
var ATTR_CHANGE_LIST = [
'resizeEnabledChange',
'rotateHandlerOffsetChange'
@@ -304,10 +307,10 @@
fill: 'white',
strokeWidth: 1,
name: name,
width: 10,
height: 10,
offsetX: 5,
offsetY: 5,
width: BASE_BOX_WIDTH,
height: BASE_BOX_HEIGHT,
offsetX: BASE_BOX_WIDTH / 2,
offsetY: BASE_BOX_HEIGHT / 2,
dragDistance: 0
});
var self = this;
@@ -339,7 +342,7 @@
// var dy = -pos.y + center.y;
// var angle = -Math.atan2(-dy, dx) - Math.PI / 2;
var scale = tr.getAbsoluteScale();
var scale = tr.getNode().getAbsoluteScale();
// If scale.y < 0 xor scale.x < 0 we need to flip (not rotate).
var isMirrored = (scale.y * scale.x) < 0;
var cursor = getCursor(name, rad, isMirrored);
@@ -655,6 +658,15 @@
},
update: function() {
var attrs = this._getNodeRect();
var node = this.getNode();
var scale = {x: 1, y: 1};
if (node && node.getParent()) {
scale = node.getParent().getAbsoluteScale();
}
var invertedScale = {
x: 1 / scale.x,
y: 1 / scale.y
};
var width = attrs.width;
var height = attrs.height;
@@ -665,53 +677,65 @@
this.findOne('.top-left').setAttrs({
x: -padding,
y: -padding,
scale: invertedScale,
visible: resizeEnabled && enabledHandlers.indexOf('top-left') >= 0
});
this.findOne('.top-center').setAttrs({
x: width / 2,
y: -padding,
scale: invertedScale,
visible: resizeEnabled && enabledHandlers.indexOf('top-center') >= 0
});
this.findOne('.top-right').setAttrs({
x: width + padding,
y: -padding,
scale: invertedScale,
visible: resizeEnabled && enabledHandlers.indexOf('top-right') >= 0
});
this.findOne('.middle-left').setAttrs({
x: -padding,
y: height / 2,
scale: invertedScale,
visible: resizeEnabled && enabledHandlers.indexOf('middle-left') >= 0
});
this.findOne('.middle-right').setAttrs({
x: width + padding,
y: height / 2,
scale: invertedScale,
visible: resizeEnabled && enabledHandlers.indexOf('middle-right') >= 0
});
this.findOne('.bottom-left').setAttrs({
x: -padding,
y: height + padding,
scale: invertedScale,
visible: resizeEnabled && enabledHandlers.indexOf('bottom-left') >= 0
});
this.findOne('.bottom-center').setAttrs({
x: width / 2,
y: height + padding,
scale: invertedScale,
visible: resizeEnabled && enabledHandlers.indexOf('bottom-center') >= 0
});
this.findOne('.bottom-right').setAttrs({
x: width + padding,
y: height + padding,
scale: invertedScale,
visible: resizeEnabled && enabledHandlers.indexOf('bottom-right') >= 0
});
var scaledRotateHandlerOffset =
-this.rotateHandlerOffset() * Math.abs(invertedScale.y);
this.findOne('.rotater').setAttrs({
x: width / 2,
y: -this.rotateHandlerOffset() * Konva.Util._sign(height),
y: scaledRotateHandlerOffset * Konva.Util._sign(height),
scale: invertedScale,
visible: this.rotateEnabled()
});
this.findOne('.back').setAttrs({
width: width,
height: height,
width: width * scale.x,
height: height * scale.y,
scale: invertedScale,
visible: this.lineEnabled()
});
},