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

Fix some bugs when Konva.Transformer has padding > 0

Browse Source
This commit is contained in:
Anton Lavrenov
2019-09-17 12:50:28 -05:00
parent 250f0b950d
commit 1f14bf1fef
4 changed files with 152 additions and 1398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/shapes/Transformer.ts
View File

@@ -395,7 +395,7 @@ export class Transformer extends Group {
if (tr.rotateEnabled()) {
ctx.lineTo(
this.width() / 2,
-tr.rotateAnchorOffset() * Util._sign(this.height())
-tr.rotateAnchorOffset() * Util._sign(this.height()) - padding
);
}
@@ -411,6 +411,7 @@ export class Transformer extends Group {
var attrs = this._getNodeRect();
var width = attrs.width;
var height = attrs.height;
var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
this.sin = Math.abs(height / hypotenuse);
this.cos = Math.abs(width / hypotenuse);
@@ -448,13 +449,21 @@ export class Transformer extends Group {
var keepProportion = this.keepRatio() || e.shiftKey;
var padding = this.padding();
// console.log(keepProportion);
if (this._movingAnchorName === 'top-left') {
if (keepProportion) {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-right').x() - anchorNode.x(), 2) +
Math.pow(this.findOne('.bottom-right').y() - anchorNode.y(), 2)
Math.pow(
this.findOne('.bottom-right').x() - anchorNode.x() - padding * 2,
2
) +
Math.pow(
this.findOne('.bottom-right').y() - anchorNode.y() - padding * 2,
2
)
);
var reverseX =
@@ -470,16 +479,26 @@ export class Transformer extends Group {
x = newHypotenuse * this.cos * reverseX;
y = newHypotenuse * this.sin * reverseY;
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 - padding * 2
);
this.findOne('.top-left').y(
this.findOne('.bottom-right').y() - y - padding * 2
);
}
} else if (this._movingAnchorName === 'top-center') {
this.findOne('.top-left').y(anchorNode.y());
} else if (this._movingAnchorName === 'top-right') {
if (keepProportion) {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-left').x() - anchorNode.x(), 2) +
Math.pow(this.findOne('.bottom-left').y() - anchorNode.y(), 2)
Math.pow(
anchorNode.x() - this.findOne('.bottom-left').x() - padding * 2,
2
) +
Math.pow(
this.findOne('.bottom-left').y() - anchorNode.y() - padding * 2,
2
)
);
var reverseX =
@@ -495,8 +514,10 @@ export class Transformer extends Group {
x = newHypotenuse * this.cos * reverseX;
y = newHypotenuse * this.sin * reverseY;
this.findOne('.top-right').x(x);
this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y);
this.findOne('.top-right').x(x + padding);
this.findOne('.top-right').y(
this.findOne('.bottom-left').y() - y - padding * 2
);
}
var pos = anchorNode.position();
@@ -509,10 +530,18 @@ export class Transformer extends Group {
} else if (this._movingAnchorName === 'bottom-left') {
if (keepProportion) {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.top-right').x() - anchorNode.x(), 2) +
Math.pow(this.findOne('.top-right').y() - anchorNode.y(), 2)
Math.pow(
this.findOne('.top-right').x() - anchorNode.x() - padding * 2,
2
) +
Math.pow(
anchorNode.y() - this.findOne('.top-right').y() - padding * 2,
2
)
);
console.error(newHypotenuse);
var reverseX =
this.findOne('.top-right').x() < this.findOne('.bottom-left').x()
? -1
@@ -526,8 +555,10 @@ export class Transformer extends Group {
x = newHypotenuse * this.cos * reverseX;
y = newHypotenuse * this.sin * reverseY;
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 - padding * 2
);
this.findOne('.bottom-left').y(y + padding);
}
pos = anchorNode.position();
@@ -539,8 +570,8 @@ export class Transformer extends Group {
} else if (this._movingAnchorName === 'bottom-right') {
if (keepProportion) {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-right').x(), 2) +
Math.pow(this.findOne('.bottom-right').y(), 2)
Math.pow(this.findOne('.bottom-right').x() - padding, 2) +
Math.pow(this.findOne('.bottom-right').y() - padding, 2)
);
var reverseX =
@@ -556,11 +587,10 @@ export class Transformer extends Group {
x = newHypotenuse * this.cos * reverseX;
y = newHypotenuse * this.sin * reverseY;
this.findOne('.bottom-right').x(x);
this.findOne('.bottom-right').y(y);
this.findOne('.bottom-right').x(x + padding);
this.findOne('.bottom-right').y(y + padding);
}
} else if (this._movingAnchorName === 'rotater') {
var padding = this.padding();
var attrs = this._getNodeRect();
x = anchorNode.x() - attrs.width / 2;
y = -anchorNode.y() + attrs.height / 2;
@@ -629,21 +659,15 @@ export class Transformer extends Group {
return;
}
var absPos = this.findOne('.top-left').getAbsolutePosition(
this.getParent()
);
var centeredScaling = this.centeredScaling() || e.altKey;
if (centeredScaling) {
var topLeft = this.findOne('.top-left');
var bottomRight = this.findOne('.bottom-right');
var topOffsetX = topLeft.x();
var topOffsetY = topLeft.y();
var topOffsetX = topLeft.x() + padding;
var topOffsetY = topLeft.y() + padding;
var bottomOffsetX = this.getWidth() - bottomRight.x();
var bottomOffsetY = this.getHeight() - bottomRight.y();
// console.log(topOffsetX, topOffsetY, bottomOffsetX, bottomOffsetY);
var bottomOffsetX = this.getWidth() - bottomRight.x() + padding;
var bottomOffsetY = this.getHeight() - bottomRight.y() + padding;
bottomRight.move({
x: -topOffsetX,
@@ -654,10 +678,12 @@ export class Transformer extends Group {
x: bottomOffsetX,
y: bottomOffsetY
});
absPos = topLeft.getAbsolutePosition(this.getParent());
}
var absPos = this.findOne('.top-left').getAbsolutePosition(
this.getParent()
);
x = absPos.x;
y = absPos.y;
var width =
@@ -666,8 +692,6 @@ export class Transformer extends Group {
var height =
this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
// console.log(x, y, width, height);
this._fitNodeInto(
{
x: x + this.offsetX(),
@@ -696,7 +720,7 @@ export class Transformer extends Group {
}
}
_fitNodeInto(newAttrs, evt) {
// waring! in this attrs padding may be included
// waring! in this attrs padding is included
var boundBoxFunc = this.boundBoxFunc();
if (boundBoxFunc) {
var oldAttrs = this._getNodeRect();
@@ -827,7 +851,7 @@ export class Transformer extends Group {
-this.rotateAnchorOffset() * Math.abs(invertedScale.y);
this.findOne('.rotater').setAttrs({
x: width / 2,
y: scaledRotateAnchorOffset * Util._sign(height),
y: scaledRotateAnchorOffset * Util._sign(height) - padding,
scale: invertedScale,
visible: this.rotateEnabled()
});