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

dynamically set drag time interval to determine the optimal dragging performance. Makes dragging and dropping even smoother and responsive

Browse Source
This commit is contained in:
Eric Rowell 2012-04-12 21:33:40 -07:00
parent 328f457512
commit b7f14ca821
4 changed files with 192 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Apr 08 2012
* Date: Apr 12 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -44,6 +44,8 @@ Kinetic.GlobalObject = {
tempNodes: [],
animations: [],
animIdCounter: 0,
dragTimeInterval: 0,
maxDragTimeInterval: 15,
frame: {
time: 0,
timeDiff: 0,
@ -55,7 +57,8 @@ Kinetic.GlobalObject = {
offset: {
x: 0,
y: 0
}
},
lastDrawTime: 0
},
extend: function(obj1, obj2) {
for(var key in obj2.prototype) {
@ -1193,7 +1196,6 @@ Kinetic.Stage.prototype = {
function addLayer(n) {
var dataURL = layers[n].getCanvas().toDataURL();
console.log(dataURL);
var imageObj = new Image();
imageObj.onload = function() {
bufferContext.drawImage(this, 0, 0);
@ -1741,10 +1743,27 @@ Kinetic.Stage.prototype = {
var go = Kinetic.GlobalObject;
var node = go.drag.node;
if(node) {
var date = new Date();
var time = date.getTime();
if(time - go.drag.lastDrawTime > go.dragTimeInterval) {
go.drag.lastDrawTime = time;
var pos = that.getUserPosition();
var dc = node.attrs.dragConstraint;
var db = node.attrs.dragBounds;
/*
* 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 dragDiff = Math.abs(pos.x - node.attrs.x);
go.dragTimeInterval = go.maxDragTimeInterval * dragDiff / (dragDiff + 1);
// default
var newNodePos = {
x: pos.x - go.drag.offset.x,
@ -1817,6 +1836,7 @@ Kinetic.Stage.prototype = {
// execute user defined ondragmove if defined
go.drag.node._handleEvents('ondragmove', evt);
}
}
}, false);
this.onContent('mouseup touchend mouseout', function(evt) {

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

File diff suppressed because one or more lines are too long

5
src/GlobalObject.js
View File

@ -16,6 +16,8 @@ Kinetic.GlobalObject = {
tempNodes: [],
animations: [],
animIdCounter: 0,
dragTimeInterval: 0,
maxDragTimeInterval: 15,
frame: {
time: 0,
timeDiff: 0,
@ -27,7 +29,8 @@ Kinetic.GlobalObject = {
offset: {
x: 0,
y: 0
}
},
lastDrawTime: 0
},
extend: function(obj1, obj2) {
for(var key in obj2.prototype) {

19
src/Stage.js
View File

@ -161,7 +161,6 @@ Kinetic.Stage.prototype = {
function addLayer(n) {
var dataURL = layers[n].getCanvas().toDataURL();
console.log(dataURL);
var imageObj = new Image();
imageObj.onload = function() {
bufferContext.drawImage(this, 0, 0);
@ -709,10 +708,27 @@ Kinetic.Stage.prototype = {
var go = Kinetic.GlobalObject;
var node = go.drag.node;
if(node) {
var date = new Date();
var time = date.getTime();
if(time - go.drag.lastDrawTime > go.dragTimeInterval) {
go.drag.lastDrawTime = time;
var pos = that.getUserPosition();
var dc = node.attrs.dragConstraint;
var db = node.attrs.dragBounds;
/*
* 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 dragDiff = Math.abs(pos.x - node.attrs.x);
go.dragTimeInterval = go.maxDragTimeInterval * dragDiff / (dragDiff + 1);
// default
var newNodePos = {
x: pos.x - go.drag.offset.x,
@ -785,6 +801,7 @@ Kinetic.Stage.prototype = {
// execute user defined ondragmove if defined
go.drag.node._handleEvents('ondragmove', evt);
}
}
}, false);
this.onContent('mouseup touchend mouseout', function(evt) {