拖动拖动事件限制

我努力让自己在HTML5画布这是应该遵循一个可拖动的div当它被搬来搬去，像一个动画：拖动拖动事件限制

draggable_div.draggable({ 
    drag: function(e, ui) { 
     canvasDrawSomethingNearDraggable(ui); 
    } 
    stop: function(e, ui) { 
     canvasDrawSomethingNearDraggable(ui); 
    } 
}); 

function canvasDrawRectangleUnderDraggable { 
    for (i = 0; i < 10; i++) { // draw overlapping circles in fixed order 
     context.beginPath(); 
     context.arc(x[i], y[i], 10, 0, 2 * Math.PI, false); 
     context.fillStyle = c[i]; 
     context.fill(); 
     context.stroke(); 
    } 
}

但动画滞后当我移动可拖动元素（我将它的差距越大，它关闭，只有当拖动停止事件触发速度更快）：

enter image description here

是否有解决或减轻这个问题的方法吗？我是否应该计算拖动事件之间的时间，并以这种方式减少对绘图函数的调用，还是有更好的解决方案？

来源

2015-07-11 Bob

查看您的canvasDrawSomethingNearDraggable（ui）函数会更容易，但您可能会在可拖动div的子元素上拖动开始时获得更好的结果绘图，因此您的画布会随之移动。 –

增加了一些非常相似的插图 – Bob

你可能想要去掉你的函数，这样事件处理程序不会被太频繁地调用（这会减慢一切）。例如，请参阅Can someone explain the "debounce" function in Javascript。

在下划线库（http://underscorejs.org/#debounce）内可实现去抖动。您可以复制该函数以在您的代码中使用。

来源

2015-07-11 20:57:40

你的意思是油门，而不是反弹。如果您反弹它，那么每x毫秒到达一个事件流将不会导致处理程序被调用，直到流停止。 –

拖动拖动事件限制

回答

相关问题