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

again reworked the matrix transform logic with drag and drop

Browse Source
This commit is contained in:
Eric Rowell 2012-03-25 12:45:46 -07:00
parent 8ee223584d
commit fbb6d0f706
5 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/ * http://www.kineticjs.com/
* Copyright 2012, Eric Rowell * Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Mar 24 2012 * Date: Mar 25 2012
* *
* Copyright (C) 2011 - 2012 by Eric Rowell * Copyright (C) 2011 - 2012 by Eric Rowell
* *
@ -830,9 +830,9 @@ Kinetic.Node.prototype = {
* @param {Event} evt * @param {Event} evt
*/ */
_handleEvents: function(eventType, evt) { _handleEvents: function(eventType, evt) {
if (this.className === 'Shape') { if(this.className === 'Shape') {
evt.shape = this; evt.shape = this;
} }
var stage = this.getStage(); var stage = this.getStage();
this._handleEvent(this, stage.mouseoverShape, stage.mouseoutShape, eventType, evt); this._handleEvent(this, stage.mouseoverShape, stage.mouseoutShape, eventType, evt);
}, },
@ -1604,7 +1604,11 @@ Kinetic.Stage.prototype = {
newNodePos.x = node.x; newNodePos.x = node.x;
} }
// magic // save rotation and remove it from transform
var rot = node.rotation;
node.rotation = 0;
// unravel transform
var it = node.getAbsoluteTransform(); var it = node.getAbsoluteTransform();
it.invert(); it.invert();
it.translate(newNodePos.x, newNodePos.y); it.translate(newNodePos.x, newNodePos.y);
@ -1612,6 +1616,9 @@ Kinetic.Stage.prototype = {
node.x += it.getTranslation().x; node.x += it.getTranslation().x;
node.y += it.getTranslation().y; node.y += it.getTranslation().y;
// restore rotation
node.rotate(rot);
go.drag.node.getLayer().draw(); go.drag.node.getLayer().draw();
if(!go.drag.moving) { if(!go.drag.moving) {
@ -1619,6 +1626,7 @@ Kinetic.Stage.prototype = {
// execute dragstart events if defined // execute dragstart events if defined
go.drag.node._handleEvents('ondragstart', evt); go.drag.node._handleEvents('ondragstart', evt);
} }
// execute user defined ondragmove if defined // execute user defined ondragmove if defined
go.drag.node._handleEvents('ondragmove', evt); go.drag.node._handleEvents('ondragmove', evt);
} }

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

File diff suppressed because one or more lines are too long

6
src/Node.js
View File

@ -583,9 +583,9 @@ Kinetic.Node.prototype = {
* @param {Event} evt * @param {Event} evt
*/ */
_handleEvents: function(eventType, evt) { _handleEvents: function(eventType, evt) {
if (this.className === 'Shape') { if(this.className === 'Shape') {
evt.shape = this; evt.shape = this;
} }
var stage = this.getStage(); var stage = this.getStage();
this._handleEvent(this, stage.mouseoverShape, stage.mouseoutShape, eventType, evt); this._handleEvent(this, stage.mouseoverShape, stage.mouseoutShape, eventType, evt);
}, },

10
src/Stage.js
View File

@ -624,7 +624,11 @@ Kinetic.Stage.prototype = {
newNodePos.x = node.x; newNodePos.x = node.x;
} }
// magic // save rotation and remove it from transform
var rot = node.rotation;
node.rotation = 0;
// unravel transform
var it = node.getAbsoluteTransform(); var it = node.getAbsoluteTransform();
it.invert(); it.invert();
it.translate(newNodePos.x, newNodePos.y); it.translate(newNodePos.x, newNodePos.y);
@ -632,6 +636,9 @@ Kinetic.Stage.prototype = {
node.x += it.getTranslation().x; node.x += it.getTranslation().x;
node.y += it.getTranslation().y; node.y += it.getTranslation().y;
// restore rotation
node.rotate(rot);
go.drag.node.getLayer().draw(); go.drag.node.getLayer().draw();
if(!go.drag.moving) { if(!go.drag.moving) {
@ -639,6 +646,7 @@ Kinetic.Stage.prototype = {
// execute dragstart events if defined // execute dragstart events if defined
go.drag.node._handleEvents('ondragstart', evt); go.drag.node._handleEvents('ondragstart', evt);
} }
// execute user defined ondragmove if defined // execute user defined ondragmove if defined
go.drag.node._handleEvents('ondragmove', evt); go.drag.node._handleEvents('ondragmove', evt);
} }

8
tests/js/functionalTests.js
View File

@ -1023,12 +1023,18 @@ Test.prototype.tests = {
stroke: 'black', stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
draggable: true draggable: true
//rotationDeg: 60
//rotationDeg: Math.PI / 3
}); });
layer.add(rect); layer.add(rect);
stage.add(layer); stage.add(layer);
stage.rotateDeg(20); //stage.rotateDeg(20);
//console.log(rect.getAbsoluteTransform().getTranslation())
stage.rotate(Math.PI / 3);
stage.setScale(0.5); stage.setScale(0.5);
stage.draw(); stage.draw();