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

refactored setAbsolutePosition() method and Shape _draw method

Browse Source
This commit is contained in:
Eric Rowell 2012-04-14 16:27:00 -07:00
parent 5e46018012
commit df8df63400
7 changed files with 83 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
dist/kinetic-core.js vendored
View File

@ -46,7 +46,6 @@ Kinetic.GlobalObject = {
animIdCounter: 0,
dragTimeInterval: 0,
maxDragTimeInterval: 20,
//isChrome: navigator.userAgent.toLowerCase().indexOf('chrome') > -1,
frame: {
time: 0,
timeDiff: 0,
@ -459,17 +458,24 @@ Kinetic.Node.prototype = {
},
/**
* set absolute position relative to stage
* @param {Object} pos object containing an x and
* y property
*/
setAbsolutePosition: function(pos, override) {
setAbsolutePosition: function(pos) {
/*
* save rotation and scale and then
* remove them from the transform
* save rotation and scale and
* then remove them from the transform
*/
var rot = this.attrs.rotation;
var scale = {
x: this.attrs.scale.x,
y: this.attrs.scale.y
};
var centerOffset = {
x: this.attrs.centerOffset.x,
y: this.attrs.centerOffset.y
};
this.attrs.rotation = 0;
this.attrs.scale = {
x: 1,
@ -485,16 +491,6 @@ Kinetic.Node.prototype = {
y: this.attrs.y + it.getTranslation().y
};
// handle override
if(override !== undefined) {
if(override.x !== undefined) {
pos.x = override.x;
}
if(override.y !== undefined) {
pos.y = override.y;
}
}
this.setPosition(pos.x, pos.y);
// restore rotation and scale
@ -1826,6 +1822,10 @@ Kinetic.Stage.prototype = {
var pos = that.getUserPosition();
var dc = node.attrs.dragConstraint;
var db = node.attrs.dragBounds;
var lastNodePos = {
x: node.attrs.x,
y: node.attrs.y
};
// default
var newNodePos = {
@ -1833,28 +1833,6 @@ Kinetic.Stage.prototype = {
y: pos.y - go.drag.offset.y
};
/*
* chrome currently has a bug that slows down drag and drop.
* For google chrome instances, dynamically set the dragTimeInterval
* to improve drag and drop performance while not effecting other browsers
*/
//if(go.isChrome) {
/*
* handle dynamice drag time interval. As the distance between
* the mouse and cursor increases, we need to increase the drag
* time interval to reduce the number of layer draws so that
* the node position can catch back up to the cursor. When the difference
* is zero, the time interval is zero. When the difference approahces
* infinity, the time interval approaches the max drag time interval
*/
/*
var dragDiffX = Math.abs(newNodePos.x - node.attrs.x);
var dragDiffY = Math.abs(newNodePos.y - node.attrs.y);
var dragDiff = Math.sqrt(Math.pow(dragDiffX, 2) + Math.pow(dragDiffY, 2));
go.dragTimeInterval = go.maxDragTimeInterval * (dragDiff - 1) / (dragDiff + 1);
*/
//}
// bounds overrides
if(db.left !== undefined && newNodePos.x < db.left) {
newNodePos.x = db.left;
@ -1869,17 +1847,16 @@ Kinetic.Stage.prototype = {
newNodePos.y = db.bottom;
}
node.setAbsolutePosition(newNodePos);
// constraint overrides
var override = {};
if(dc === 'horizontal') {
override.y = node.attrs.y;
node.attrs.y = lastNodePos.y;
}
else if(dc === 'vertical') {
override.x = node.attrs.x;
node.attrs.x = lastNodePos.x;
}
node.setAbsolutePosition(newNodePos, override);
go.drag.node.getLayer().draw();
if(!go.drag.moving) {
@ -2293,25 +2270,16 @@ 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 m = node.getTransform().getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
if(node.getAbsoluteAlpha() !== 1) {
context.globalAlpha = node.getAbsoluteAlpha();
}
var m = this.getAbsoluteTransform().getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
if(this.getAbsoluteAlpha() !== 1) {
context.globalAlpha = this.getAbsoluteAlpha();
}
this.tempLayer = layer;
this.drawFunc.call(this);
context.restore();

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

File diff suppressed because one or more lines are too long

1
src/GlobalObject.js
View File

@ -18,7 +18,6 @@ Kinetic.GlobalObject = {
animIdCounter: 0,
dragTimeInterval: 0,
maxDragTimeInterval: 20,
//isChrome: navigator.userAgent.toLowerCase().indexOf('chrome') > -1,
frame: {
time: 0,
timeDiff: 0,

23
src/Node.js
View File

@ -306,17 +306,24 @@ Kinetic.Node.prototype = {
},
/**
* set absolute position relative to stage
* @param {Object} pos object containing an x and
* y property
*/
setAbsolutePosition: function(pos, override) {
setAbsolutePosition: function(pos) {
/*
* save rotation and scale and then
* remove them from the transform
* save rotation and scale and
* then remove them from the transform
*/
var rot = this.attrs.rotation;
var scale = {
x: this.attrs.scale.x,
y: this.attrs.scale.y
};
var centerOffset = {
x: this.attrs.centerOffset.x,
y: this.attrs.centerOffset.y
};
this.attrs.rotation = 0;
this.attrs.scale = {
x: 1,
@ -332,16 +339,6 @@ Kinetic.Node.prototype = {
y: this.attrs.y + it.getTranslation().y
};
// handle override
if(override !== undefined) {
if(override.x !== undefined) {
pos.x = override.x;
}
if(override.y !== undefined) {
pos.y = override.y;
}
}
this.setPosition(pos.x, pos.y);
// restore rotation and scale

21
src/Shape.js
View File

@ -178,25 +178,16 @@ 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 m = node.getTransform().getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
if(node.getAbsoluteAlpha() !== 1) {
context.globalAlpha = node.getAbsoluteAlpha();
}
var m = this.getAbsoluteTransform().getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
if(this.getAbsoluteAlpha() !== 1) {
context.globalAlpha = this.getAbsoluteAlpha();
}
this.tempLayer = layer;
this.drawFunc.call(this);
context.restore();

35
src/Stage.js
View File

@ -717,6 +717,10 @@ Kinetic.Stage.prototype = {
var pos = that.getUserPosition();
var dc = node.attrs.dragConstraint;
var db = node.attrs.dragBounds;
var lastNodePos = {
x: node.attrs.x,
y: node.attrs.y
};
// default
var newNodePos = {
@ -724,28 +728,6 @@ Kinetic.Stage.prototype = {
y: pos.y - go.drag.offset.y
};
/*
* chrome currently has a bug that slows down drag and drop.
* For google chrome instances, dynamically set the dragTimeInterval
* to improve drag and drop performance while not effecting other browsers
*/
//if(go.isChrome) {
/*
* handle dynamice drag time interval. As the distance between
* the mouse and cursor increases, we need to increase the drag
* time interval to reduce the number of layer draws so that
* the node position can catch back up to the cursor. When the difference
* is zero, the time interval is zero. When the difference approahces
* infinity, the time interval approaches the max drag time interval
*/
/*
var dragDiffX = Math.abs(newNodePos.x - node.attrs.x);
var dragDiffY = Math.abs(newNodePos.y - node.attrs.y);
var dragDiff = Math.sqrt(Math.pow(dragDiffX, 2) + Math.pow(dragDiffY, 2));
go.dragTimeInterval = go.maxDragTimeInterval * (dragDiff - 1) / (dragDiff + 1);
*/
//}
// bounds overrides
if(db.left !== undefined && newNodePos.x < db.left) {
newNodePos.x = db.left;
@ -760,17 +742,16 @@ Kinetic.Stage.prototype = {
newNodePos.y = db.bottom;
}
node.setAbsolutePosition(newNodePos);
// constraint overrides
var override = {};
if(dc === 'horizontal') {
override.y = node.attrs.y;
node.attrs.y = lastNodePos.y;
}
else if(dc === 'vertical') {
override.x = node.attrs.x;
node.attrs.x = lastNodePos.x;
}
node.setAbsolutePosition(newNodePos, override);
go.drag.node.getLayer().draw();
if(!go.drag.moving) {

33
tests/js/functionalTests.js
View File

@ -1674,6 +1674,39 @@ 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) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var rect = new Kinetic.Rect({
x: 200,
y: 200,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
rotationDeg: 60,
scale: {
x: 2,
y: 1
},
centerOffset: {
x: 50,
y: 25
}
});
group.add(rect);
layer.add(group);
stage.add(layer);
},
'STAGE - hide stage': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,