lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-23 13:26:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

pre patch

Browse Source
This commit is contained in:
Anton Lavrenov
2020-05-01 14:58:34 -05:00
parent 48c2106d1f
commit 099de8aefd
3 changed files with 426 additions and 1401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1544
konva.js
View File

File diff suppressed because it is too large Load Diff

146
src/shapes/Transformer.ts
View File

@@ -1007,16 +1007,146 @@ export class Transformer extends Group {
} }
} }
// let's find delta transform // let's find delta transform
// var dx = newAttrs.x - oldAttrs.x, var dx = newAttrs.x - oldAttrs.x,
// dy = newAttrs.y - oldAttrs.y, dy = newAttrs.y - oldAttrs.y,
// angle = newAttrs.rotation - oldAttrs.rotation, angle = newAttrs.rotation - oldAttrs.rotation,
// scaleX = newAttrs.width / oldAttrs.width, scaleX = newAttrs.width / oldAttrs.width,
// scaleY = newAttrs.height / oldAttrs.height; scaleY = newAttrs.height / oldAttrs.height;
// dt1.invert();
// const dt2 = new Transform();
// dt2.translate(newAttrs.x, newAttrs.y);
// dt2.rotate(newAttrs.rotation);
// // console.log(dt.point(newAttrs));
// // dt.translate(newAttrs.x, newAttrs.y);
// // console.log(dt.decompose());
// // dt.rotate(newAttrs.rotation);
// dt2.scale(scaleX, scaleY);
// dt1.multiply(dt2);
// dt.translate(dx, dy);
// dt.rotate(angle);
// dt.scale(scaleX, scaleY);
// console.log(Math.abs(Konva.getAngle(dt.decompose().rotation) - angle));
// if (
// Math.abs(Konva.getAngle(dt.decompose().rotation) - angle) > 0.000000000000001
// ) {
// debugger;
// }
this._nodes.forEach(node => { this._nodes.forEach(node => {
var oldRect = this.__getNodeShape(node, 0); // var oldRect = this.__getNodeShape(node, 0);
var newRect = transformAndRotateShape(oldRect, oldAttrs, newAttrs); // var newRect = transformAndRotateShape(oldRect, oldAttrs, newAttrs);
this._fitNodeInto(node, newRect, evt); // this._fitNodeInto(node, newRect, evt);
// var m = new Transform(),
// x = node.x(),
// y = node.y(),
// rotation = Konva.getAngle(node.rotation()),
// scaleX = node.scaleX(),
// scaleY = node.scaleY(),
// skewX = node.skewX(),
// skewY = node.skewY(),
// offsetX = node.offsetX(),
// offsetY = node.offsetY();
// // if (x !== 0 || y !== 0) {
// // m.translate(x, y);
// // }
// if (rotation !== 0) {
// m.rotate(rotation);
// }
// if (skewX !== 0 || skewY !== 0) {
// m.skew(skewX, skewY);
// }
// if (scaleX !== 1 || scaleY !== 1) {
// m.scale(scaleX, scaleY);
// }
// if (offsetX !== 0 || offsetY !== 0) {
// m.translate(-1 * offsetX, -1 * offsetY);
// }
// return m;
// t.translate(dx, dy);
// t.rotate(Konva.getAngle(node.rotation()) + angle);
// t.scale(node.scaleX() * scaleX, node.scaleY() * scaleY);
// const t = node.getTransform();
// const dt1 = new Transform();
// dt1.translate(dx, dy);
// dt1.rotate(angle);
// dt1.scale(scaleX, scaleY);
// // const oldScale = {
// // x: dt.decompose().scaleX,
// // y: dt.decompose().scaleY
// // };
// // dt.scale(1, 1);
// t.multiply(dt1);
// dt.scale(oldScale.x, oldScale.y);
// t.translate(
// dt.getTranslation().x * t.decompose().scaleX,
// dt.getTranslation().y * t.decompose().scaleY
// );
// dt.set
// dt.setAbsolutePosition(0, 0);
// t.multiply(dt);
// console.log(
// node.rotation(),
// dt.decompose().rotation,
// t.decompose().rotation,
// Util._getRotation(newAttrs.rotation)
// );
// m.multiply(dt);
// m.translate(x + dx, y + dy);
// node.setAttrs(t.decompose());
// if (offsetX !== 0 || offsetY !== 0) {
// t.translate(
// node.offsetX() * (1 - node.scaleX() / scaleX),
// node.offsetY() * (1 - node.scaleY() / scaleY)
// );
const parentRot = Konva.getAngle(node.getParent().getAbsoluteRotation());
const rotation = Util._getRotation(newAttrs.rotation - parentRot);
var pure = node.getClientRect({
skipShadow: true,
skipStroke: this.ignoreStroke()
});
const parentTransform = node
.getParent()
.getAbsoluteTransform()
.copy();
parentTransform.invert();
const invertedPoint = parentTransform.point({
x: newAttrs.x,
y: newAttrs.y
});
newAttrs.x = invertedPoint.x;
newAttrs.y = invertedPoint.y;
var absScale = node.getParent().getAbsoluteScale();
pure.width *= absScale.x;
pure.height *= absScale.y;
var scaleX = pure.width ? newAttrs.width / pure.width : 1;
var scaleY = pure.height ? newAttrs.height / pure.height : 1;
var dx = pure.x * scaleX - node.offsetX() * scaleX;
var dy = pure.y * scaleY - node.offsetY() * scaleY;
var x = newAttrs.x - (dx * Math.cos(rotation) + dy * Math.sin(-rotation));
var y = newAttrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation));
var tr = new Transform();
tr.translate(x, y);
tr.rotate(rotation);
tr.scale(scaleX, scaleY);
node.setAttrs(tr.multiply(node.getTransform()).decompose());
}); });
this.rotation(Util._getRotation(newAttrs.rotation)); this.rotation(Util._getRotation(newAttrs.rotation));
this._resetTransformCache(); this._resetTransformCache();

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

@@ -1,4 +1,4 @@
suite('Transformer', function() { suite.only('Transformer', function() {
function isClose(a, b) { function isClose(a, b) {
return Math.abs(a - b) < 0.000001; return Math.abs(a - b) < 0.000001;
} }
@@ -138,7 +138,7 @@ suite('Transformer', function() {
layer.draw(); layer.draw();
}); });
test('try to fit simple rectangle', function() { test.only('try to fit simple rectangle', function() {
var stage = addStage(); var stage = addStage();
var layer = new Konva.Layer(); var layer = new Konva.Layer();
stage.add(layer); stage.add(layer);
@@ -159,19 +159,132 @@ suite('Transformer', function() {
layer.draw(); layer.draw();
// tr._fitNodesInto({
// x: 120,
// y: 60,
// width: 50,
// height: 50,
// rotation: Konva.getAngle(45)
// });
// assert.equal(tr.x(), rect.x());
// assert.equal(Math.round(tr.y()), rect.y());
// assert.equal(tr.width(), 50);
// assert.equal(tr.height(), 50);
// assert.equal(tr.rotation(), rect.rotation());
});
test('try to fit simple rotated rectangle', 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: 150,
fill: 'yellow',
rotation: 45
});
layer.add(rect);
var tr = new Konva.Transformer();
layer.add(tr);
tr.nodes([rect]);
layer.draw();
tr._fitNodesInto({ tr._fitNodesInto({
x: 120, x: 50,
y: 60, y: 50,
width: 50, width: 100,
height: 50, height: 150,
rotation: Konva.getAngle(45) rotation: Konva.getAngle(45)
}); });
assert.equal(tr.x(), rect.x()); assert.almostEqual(rect.x(), 50);
assert.equal(Math.round(tr.y()), rect.y()); assert.almostEqual(rect.y(), 50);
assert.equal(tr.width(), 50); assert.almostEqual(tr.width(), 100);
assert.equal(tr.height(), 50); assert.almostEqual(tr.height(), 150);
assert.equal(tr.rotation(), rect.rotation()); assert.almostEqual(tr.rotation(), rect.rotation());
});
test('try to fit simple rotated rectangle - 2', 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: 200,
fill: 'yellow',
rotation: 45
});
layer.add(rect);
var tr = new Konva.Transformer();
layer.add(tr);
tr.nodes([rect]);
layer.draw();
tr._fitNodesInto({
x: 40,
y: 40,
width: 100,
height: 100,
rotation: 0
});
assert.almostEqual(rect.x(), 40);
assert.almostEqual(rect.y(), 40);
assert.almostEqual(rect.width(), 100);
assert.almostEqual(rect.height(), 200);
assert.almostEqual(rect.scaleY(), 0.5);
assert.almostEqual(rect.rotation(), 0);
});
test('rotate around center', 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: 200,
fill: 'yellow',
rotation: 45
});
layer.add(rect);
var tr = new Konva.Transformer();
layer.add(tr);
tr.nodes([rect]);
layer.draw();
tr._fitNodesInto({
x: 40,
y: 40,
width: 100,
height: 100,
rotation: 0
});
assert.almostEqual(rect.x(), 40);
assert.almostEqual(rect.y(), 40);
assert.almostEqual(rect.width(), 100);
assert.almostEqual(rect.height(), 200);
assert.almostEqual(rect.scaleY(), 0.5);
assert.almostEqual(rect.rotation(), 0);
}); });
test('change transform of parent', function() { test('change transform of parent', function() {
@@ -456,7 +569,7 @@ suite('Transformer', function() {
assert.equal(tr.rotation(), rect.rotation()); assert.equal(tr.rotation(), rect.rotation());
}); });
test('try to fit a transformed rect', function() { test.only('try to fit a transformed rect', function() {
var stage = addStage(); var stage = addStage();
var layer = new Konva.Layer(); var layer = new Konva.Layer();
stage.add(layer); stage.add(layer);