mirror of
https://github.com/konvajs/konva.git
synced 2025-06-27 17:09:44 +08:00
refactored setAbsolutePosition() method and Shape _draw method
This commit is contained in:
Eric Rowell
parent
5e46018012
commit
df8df63400
80
dist/kinetic-core.js
vendored
80
dist/kinetic-core.js
vendored
@ -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
4
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
@ -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
23
src/Node.js
@ -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
21
src/Shape.js
@ -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
35
src/Stage.js
@ -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) {
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user