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

finished matrix integration. the stage, layers, groups, and nodes can be transformed in anyway, and drag and drop on any of these nodes now works great regardless of parent node transforms

Browse Source
This commit is contained in:
Eric Rowell
2012-03-23 23:39:54 -07:00
parent 7ced50f694
commit 68f9688575
8 changed files with 197 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/GlobalObject.js
View File

@@ -24,6 +24,10 @@ Kinetic.GlobalObject = {
offset: {
x: 0,
y: 0
},
start: {
x: 0,
y: 0
}
},
extend: function(obj1, obj2) {

11
src/Layer.js
View File

@@ -26,13 +26,17 @@ Kinetic.Layer = function(config) {
*/
Kinetic.Layer.prototype = {
/**
* public draw children
* draw children nodes. this includes any groups
* or shapes
*/
draw: function() {
this._draw();
},
/**
* clear layer
* clears the canvas context tied to the layer. Clearing
* a layer does not remove its children. The nodes within
* the layer will be redrawn whenever the .draw() method
* is used again.
*/
clear: function() {
var context = this.getContext();
@@ -52,7 +56,8 @@ Kinetic.Layer.prototype = {
return this.context;
},
/**
* add node to layer
* add a node to the layer. New nodes are always
* placed at the top.
* @param {Node} node
*/
add: function(child) {

41
src/Matrix.js
View File

@@ -11,8 +11,7 @@
/*
* The usage of this class was inspired by some of the work done by a forked
* project, KineticJS-Ext by Wappworks, which is based on Simon's Transform
* class. KineticJS has slightly modified the original class and added new methods
* specific for canvas.
* class.
*/
/**
@@ -60,10 +59,40 @@ Kinetic.Matrix.prototype = {
this.m[3] = m22;
},
/**
* transform canvas context
* Returns the translation
* @returns {Object} 2D point(x, y)
*/
transformContext: function(context) {
var m = this.m;
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
getTranslation: function() {
return {
x: this.m[4],
y: this.m[5]
};
},
/**
* Transform multiplication
* @param {Kinetic.Matrix} matrix
*/
multiply: function(matrix) {
var m11 = this.m[0] * matrix.m[0] + this.m[2] * matrix.m[1];
var m12 = this.m[1] * matrix.m[0] + this.m[3] * matrix.m[1];
var m21 = this.m[0] * matrix.m[2] + this.m[2] * matrix.m[3];
var m22 = this.m[1] * matrix.m[2] + this.m[3] * matrix.m[3];
var dx = this.m[0] * matrix.m[4] + this.m[2] * matrix.m[5] + this.m[4];
var dy = this.m[1] * matrix.m[4] + this.m[3] * matrix.m[5] + this.m[5];
this.m[0] = m11;
this.m[1] = m12;
this.m[2] = m21;
this.m[3] = m22;
this.m[4] = dx;
this.m[5] = dy;
},
/**
* return matrix as array
*/
toArray: function() {
return this.m;
}
};

33
src/Node.js
View File

@@ -507,6 +507,35 @@ Kinetic.Node.prototype = {
getDragBounds: function() {
return this.dragBounds;
},
/**
* get matrix transform of the node while taking into
* account the matrix transforms of its parents
*/
getAbsoluteMatrix: function() {
// absolute matrix
var am = new Kinetic.Matrix();
var family = [];
var parent = this.parent;
family.unshift(this);
while(parent) {
family.unshift(parent);
parent = parent.parent;
}
for(var n = 0; n < family.length; n++) {
var node = family[n];
var m = node.getMatrix();
am.multiply(m);
}
return am;
},
/**
* get matrix transform of the node while not taking
* into account the matrix transforms of its parents
*/
getMatrix: function() {
var m = new Kinetic.Matrix();
@@ -536,9 +565,13 @@ Kinetic.Node.prototype = {
var pos = stage.getUserPosition();
if(pos) {
var m = that.getMatrix().getTranslation();
var am = that.getAbsoluteMatrix().getTranslation();
go.drag.node = that;
go.drag.offset.x = pos.x - that.x;
go.drag.offset.y = pos.y - that.y;
go.drag.start.x = m.x - am.x;
go.drag.start.y = m.y - am.y;
}
});
},

7
src/Shape.js
View File

@@ -120,12 +120,13 @@ Kinetic.Shape.prototype = {
family.unshift(parent);
parent = parent.parent;
}
context.save();
for(var n = 0; n < family.length; n++) {
var node = family[n];
var m = node.getMatrix();
m.transformContext(context);
var m = node.getMatrix().toArray();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
if(node.getAbsoluteAlpha() !== 1) {
context.globalAlpha = node.getAbsoluteAlpha();
}

15
src/Stage.js
View File

@@ -16,7 +16,7 @@ Kinetic.Stage = function(config) {
* if container is a string, assume it's an id for
* a DOM element
*/
if(typeof config.container === 'string') {
if( typeof config.container === 'string') {
config.container = document.getElementById(config.container);
}
@@ -587,18 +587,21 @@ Kinetic.Stage.prototype = {
var node = go.drag.node;
if(node) {
var pos = that.getUserPosition();
var ds = node.dragConstraint;
var dc = node.dragConstraint;
var db = node.dragBounds;
if(ds === 'none' || ds === 'horizontal') {
var m = node.getMatrix().getTranslation();
var am = node.getAbsoluteMatrix().getTranslation();
if(dc === 'none' || dc === 'horizontal') {
var newX = pos.x - go.drag.offset.x;
if((db.left === undefined || db.left < newX) && (db.right === undefined || db.right > newX)) {
node.x = newX;
node.x = newX + m.x - (am.x + go.drag.start.x);
}
}
if(ds === 'none' || ds === 'vertical') {
if(dc === 'none' || dc === 'vertical') {
var newY = pos.y - go.drag.offset.y;
if((db.top === undefined || db.top < newY) && (db.bottom === undefined || db.bottom > newY)) {
node.y = newY;
node.y = newY + m.y - (am.y + go.drag.start.y);
}
}
go.drag.node.getLayer().draw();