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

fixed center offset + drag and drop bug by fixing a root problem with the getAbsoluteTransform() method. This method no longer takes into account the center offset. Center offset transforms are now applied separately

Browse Source
This commit is contained in:
Eric Rowell 2012-04-14 18:27:06 -07:00
parent df8df63400
commit a908c59769
5 changed files with 76 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
dist/kinetic-core.js vendored
View File

@ -482,6 +482,15 @@ Kinetic.Node.prototype = {
y: 1
};
/*
this.attrs.centerOffset = {
x: 0,
y: 0
};
*/
//this.move(-1 * this.attrs.centerOffset.x, -1 * this.attrs.centerOffset.y);
// unravel transform
var it = this.getAbsoluteTransform();
it.invert();
@ -493,12 +502,15 @@ Kinetic.Node.prototype = {
this.setPosition(pos.x, pos.y);
//this.move(-1* this.attrs.centerOffset.x, -1* this.attrs.centerOffset.y);
// restore rotation and scale
this.rotate(rot);
this.attrs.scale = {
x: scale.x,
y: scale.y
};
},
/**
* move node by an amount
@ -822,6 +834,7 @@ Kinetic.Node.prototype = {
for(var n = 0; n < family.length; n++) {
var node = family[n];
var m = node.getTransform();
am.multiply(m);
}
@ -843,9 +856,6 @@ Kinetic.Node.prototype = {
if(this.attrs.scale.x !== 1 || this.attrs.scale.y !== 1) {
m.scale(this.attrs.scale.x, this.attrs.scale.y);
}
if(this.attrs.centerOffset.x !== 0 || this.attrs.centerOffset.y !== 0) {
m.translate(-1 * this.attrs.centerOffset.x, -1 * this.attrs.centerOffset.y);
}
return m;
},
@ -2270,11 +2280,28 @@ Kinetic.Shape.prototype = {
if(layer !== undefined && this.drawFunc !== undefined) {
var stage = layer.getStage();
var context = layer.getContext();
var family = [];
var parent = this.parent;
family.unshift(this);
while(parent) {
family.unshift(parent);
parent = parent.parent;
}
context.save();
for(var n = 0; n < family.length; n++) {
var node = family[n];
var t = node.getTransform();
var m = this.getAbsoluteTransform().getMatrix();
// center offset
if(node.attrs.centerOffset.x !== 0 || node.attrs.centerOffset.y !== 0) {
t.translate(-1 * node.attrs.centerOffset.x, -1 * node.attrs.centerOffset.y);
}
var m = t.getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
if(this.getAbsoluteAlpha() !== 1) {
context.globalAlpha = this.getAbsoluteAlpha();

4
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

16
src/Node.js
View File

@ -330,6 +330,15 @@ Kinetic.Node.prototype = {
y: 1
};
/*
this.attrs.centerOffset = {
x: 0,
y: 0
};
*/
//this.move(-1 * this.attrs.centerOffset.x, -1 * this.attrs.centerOffset.y);
// unravel transform
var it = this.getAbsoluteTransform();
it.invert();
@ -341,12 +350,15 @@ Kinetic.Node.prototype = {
this.setPosition(pos.x, pos.y);
//this.move(-1* this.attrs.centerOffset.x, -1* this.attrs.centerOffset.y);
// restore rotation and scale
this.rotate(rot);
this.attrs.scale = {
x: scale.x,
y: scale.y
};
},
/**
* move node by an amount
@ -670,6 +682,7 @@ Kinetic.Node.prototype = {
for(var n = 0; n < family.length; n++) {
var node = family[n];
var m = node.getTransform();
am.multiply(m);
}
@ -691,9 +704,6 @@ Kinetic.Node.prototype = {
if(this.attrs.scale.x !== 1 || this.attrs.scale.y !== 1) {
m.scale(this.attrs.scale.x, this.attrs.scale.y);
}
if(this.attrs.centerOffset.x !== 0 || this.attrs.centerOffset.y !== 0) {
m.translate(-1 * this.attrs.centerOffset.x, -1 * this.attrs.centerOffset.y);
}
return m;
},

19
src/Shape.js
View File

@ -178,11 +178,28 @@ Kinetic.Shape.prototype = {
if(layer !== undefined && this.drawFunc !== undefined) {
var stage = layer.getStage();
var context = layer.getContext();
var family = [];
var parent = this.parent;
family.unshift(this);
while(parent) {
family.unshift(parent);
parent = parent.parent;
}
context.save();
for(var n = 0; n < family.length; n++) {
var node = family[n];
var t = node.getTransform();
var m = this.getAbsoluteTransform().getMatrix();
// center offset
if(node.attrs.centerOffset.x !== 0 || node.attrs.centerOffset.y !== 0) {
t.translate(-1 * node.attrs.centerOffset.x, -1 * node.attrs.centerOffset.y);
}
var m = t.getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
if(this.getAbsoluteAlpha() !== 1) {
context.globalAlpha = this.getAbsoluteAlpha();

12
tests/js/functionalTests.js
View File

@ -1674,7 +1674,7 @@ Test.prototype.tests = {
layer.add(group);
stage.add(layer);
},
'DRAG AND DROP - translate, rotate, set center offset, and scale shape, and then drag and drop': function(containerId) {
'DRAG AND DROP - translate, rotate, center offset, and scale shape, and then drag and drop': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -1685,7 +1685,7 @@ Test.prototype.tests = {
var rect = new Kinetic.Rect({
x: 200,
y: 200,
y: 100,
width: 100,
height: 50,
fill: 'red',
@ -1706,6 +1706,14 @@ Test.prototype.tests = {
group.add(rect);
layer.add(group);
stage.add(layer);
stage.onFrame(function() {
rect.rotate(0.01);
layer.draw();
});
//stage.start();
},
'STAGE - hide stage': function(containerId) {
var stage = new Kinetic.Stage({