lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-09 11:34:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

keepProportion attribute for Transformer

Browse Source
This commit is contained in:
Anton Lavrenov
2018-03-14 10:07:55 +07:00
parent 1a45e953c2
commit 921fd70417
4 changed files with 92 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/shapes/Transformer.js
View File

@@ -286,30 +286,36 @@
resizerNode.setAbsolutePosition(newAbsPos);
var keepProportion = this.keepProportion() || e.shiftKey;
if (this.movingResizer === 'top-left') {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-right').x() - resizerNode.x(), 2) +
Math.pow(this.findOne('.bottom-right').y() - resizerNode.y(), 2)
);
if (keepProportion) {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-right').x() - resizerNode.x(), 2) +
Math.pow(this.findOne('.bottom-right').y() - resizerNode.y(), 2)
);
x = newHypotenuse * this.cos;
y = newHypotenuse * this.sin;
x = newHypotenuse * this.cos;
y = newHypotenuse * this.sin;
this.findOne('.top-left').x(this.findOne('.bottom-right').x() - x);
this.findOne('.top-left').y(this.findOne('.bottom-right').y() - y);
this.findOne('.top-left').x(this.findOne('.bottom-right').x() - x);
this.findOne('.top-left').y(this.findOne('.bottom-right').y() - y);
}
} else if (this.movingResizer === 'top-center') {
this.findOne('.top-left').y(resizerNode.y());
} else if (this.movingResizer === 'top-right') {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-left').x() - resizerNode.x(), 2) +
Math.pow(this.findOne('.bottom-left').y() - resizerNode.y(), 2)
);
if (keepProportion) {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-left').x() - resizerNode.x(), 2) +
Math.pow(this.findOne('.bottom-left').y() - resizerNode.y(), 2)
);
x = newHypotenuse * this.cos;
y = newHypotenuse * this.sin;
x = newHypotenuse * this.cos;
y = newHypotenuse * this.sin;
this.findOne('.top-right').x(x);
this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y);
this.findOne('.top-right').x(x);
this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y);
}
var pos = resizerNode.position();
this.findOne('.top-left').y(pos.y);
@@ -319,16 +325,18 @@
} else if (this.movingResizer === 'middle-right') {
this.findOne('.bottom-right').x(resizerNode.x());
} else if (this.movingResizer === 'bottom-left') {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.top-right').x() - resizerNode.x(), 2) +
Math.pow(this.findOne('.top-right').y() - resizerNode.y(), 2)
);
if (keepProportion) {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.top-right').x() - resizerNode.x(), 2) +
Math.pow(this.findOne('.top-right').y() - resizerNode.y(), 2)
);
x = newHypotenuse * this.cos;
y = newHypotenuse * this.sin;
x = newHypotenuse * this.cos;
y = newHypotenuse * this.sin;
this.findOne('.bottom-left').x(this.findOne('.top-right').x() - x);
this.findOne('.bottom-left').y(y);
this.findOne('.bottom-left').x(this.findOne('.top-right').x() - x);
this.findOne('.bottom-left').y(y);
}
pos = resizerNode.position();
@@ -337,16 +345,18 @@
} else if (this.movingResizer === 'bottom-center') {
this.findOne('.bottom-right').y(resizerNode.y());
} else if (this.movingResizer === 'bottom-right') {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-right').x(), 2) +
Math.pow(this.findOne('.bottom-right').y(), 2)
);
if (keepProportion) {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-right').x(), 2) +
Math.pow(this.findOne('.bottom-right').y(), 2)
);
x = newHypotenuse * this.cos;
y = newHypotenuse * this.sin;
x = newHypotenuse * this.cos;
y = newHypotenuse * this.sin;
this.findOne('.bottom-right').x(x);
this.findOne('.bottom-right').y(y);
this.findOne('.bottom-right').x(x);
this.findOne('.bottom-right').y(y);
}
} else if (this.movingResizer === 'rotater') {
var attrs = this._getNodeRect();
x = resizerNode.x() - attrs.width / 2;
@@ -582,6 +592,8 @@
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateHandlerOffset', 50);
Konva.Factory.addGetterSetter(Konva.Transformer, 'lineEnabled', true);
Konva.Factory.addGetterSetter(Konva.Transformer, 'keepProportion', true);
Konva.Factory.addGetterSetter(Konva.Transformer, 'node');
Konva.Collection.mapMethods(Konva.Transformer);