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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
* Some typescript fixes * Some typescript fixes
* Pixelate filter fixes * Pixelate filter fixes
* Fixes for path data parsing * Fixes for path data parsing
* Fixed shadow size calculation
## Removed ## Removed

78
konva.js
View File

@ -2,7 +2,7 @@
* Konva JavaScript Framework v1.7.6 * Konva JavaScript Framework v1.7.6
* http://konvajs.github.io/ * http://konvajs.github.io/
* Licensed under the MIT * Licensed under the MIT
* Date: Mon Mar 12 2018 * Date: Wed Mar 14 2018
* *
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -18769,30 +18769,36 @@
resizerNode.setAbsolutePosition(newAbsPos); resizerNode.setAbsolutePosition(newAbsPos);
var keepProportion = this.keepProportion() || e.shiftKey;
if (this.movingResizer === 'top-left') { if (this.movingResizer === 'top-left') {
newHypotenuse = Math.sqrt( if (keepProportion) {
Math.pow(this.findOne('.bottom-right').x() - resizerNode.x(), 2) + newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-right').y() - resizerNode.y(), 2) Math.pow(this.findOne('.bottom-right').x() - resizerNode.x(), 2) +
); Math.pow(this.findOne('.bottom-right').y() - resizerNode.y(), 2)
);
x = newHypotenuse * this.cos; x = newHypotenuse * this.cos;
y = newHypotenuse * this.sin; y = newHypotenuse * this.sin;
this.findOne('.top-left').x(this.findOne('.bottom-right').x() - x); 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').y(this.findOne('.bottom-right').y() - y);
}
} else if (this.movingResizer === 'top-center') { } else if (this.movingResizer === 'top-center') {
this.findOne('.top-left').y(resizerNode.y()); this.findOne('.top-left').y(resizerNode.y());
} else if (this.movingResizer === 'top-right') { } else if (this.movingResizer === 'top-right') {
newHypotenuse = Math.sqrt( if (keepProportion) {
Math.pow(this.findOne('.bottom-left').x() - resizerNode.x(), 2) + newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-left').y() - resizerNode.y(), 2) Math.pow(this.findOne('.bottom-left').x() - resizerNode.x(), 2) +
); Math.pow(this.findOne('.bottom-left').y() - resizerNode.y(), 2)
);
x = newHypotenuse * this.cos; x = newHypotenuse * this.cos;
y = newHypotenuse * this.sin; y = newHypotenuse * this.sin;
this.findOne('.top-right').x(x); this.findOne('.top-right').x(x);
this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y); this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y);
}
var pos = resizerNode.position(); var pos = resizerNode.position();
this.findOne('.top-left').y(pos.y); this.findOne('.top-left').y(pos.y);
@ -18802,16 +18808,18 @@
} else if (this.movingResizer === 'middle-right') { } else if (this.movingResizer === 'middle-right') {
this.findOne('.bottom-right').x(resizerNode.x()); this.findOne('.bottom-right').x(resizerNode.x());
} else if (this.movingResizer === 'bottom-left') { } else if (this.movingResizer === 'bottom-left') {
newHypotenuse = Math.sqrt( if (keepProportion) {
Math.pow(this.findOne('.top-right').x() - resizerNode.x(), 2) + newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.top-right').y() - resizerNode.y(), 2) Math.pow(this.findOne('.top-right').x() - resizerNode.x(), 2) +
); Math.pow(this.findOne('.top-right').y() - resizerNode.y(), 2)
);
x = newHypotenuse * this.cos; x = newHypotenuse * this.cos;
y = newHypotenuse * this.sin; y = newHypotenuse * this.sin;
this.findOne('.bottom-left').x(this.findOne('.top-right').x() - x); this.findOne('.bottom-left').x(this.findOne('.top-right').x() - x);
this.findOne('.bottom-left').y(y); this.findOne('.bottom-left').y(y);
}
pos = resizerNode.position(); pos = resizerNode.position();
@ -18820,16 +18828,18 @@
} else if (this.movingResizer === 'bottom-center') { } else if (this.movingResizer === 'bottom-center') {
this.findOne('.bottom-right').y(resizerNode.y()); this.findOne('.bottom-right').y(resizerNode.y());
} else if (this.movingResizer === 'bottom-right') { } else if (this.movingResizer === 'bottom-right') {
newHypotenuse = Math.sqrt( if (keepProportion) {
Math.pow(this.findOne('.bottom-right').x(), 2) + newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-right').y(), 2) Math.pow(this.findOne('.bottom-right').x(), 2) +
); Math.pow(this.findOne('.bottom-right').y(), 2)
);
x = newHypotenuse * this.cos; x = newHypotenuse * this.cos;
y = newHypotenuse * this.sin; y = newHypotenuse * this.sin;
this.findOne('.bottom-right').x(x); this.findOne('.bottom-right').x(x);
this.findOne('.bottom-right').y(y); this.findOne('.bottom-right').y(y);
}
} else if (this.movingResizer === 'rotater') { } else if (this.movingResizer === 'rotater') {
var attrs = this._getNodeRect(); var attrs = this._getNodeRect();
x = resizerNode.x() - attrs.width / 2; x = resizerNode.x() - attrs.width / 2;
@ -19065,6 +19075,8 @@
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []); Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateHandlerOffset', 50); Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateHandlerOffset', 50);
Konva.Factory.addGetterSetter(Konva.Transformer, 'lineEnabled', true); Konva.Factory.addGetterSetter(Konva.Transformer, 'lineEnabled', true);
Konva.Factory.addGetterSetter(Konva.Transformer, 'keepProportion', true);
Konva.Factory.addGetterSetter(Konva.Transformer, 'node'); Konva.Factory.addGetterSetter(Konva.Transformer, 'node');
Konva.Collection.mapMethods(Konva.Transformer); Konva.Collection.mapMethods(Konva.Transformer);

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

76
src/shapes/Transformer.js
View File

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