我正在阅读 HTML5 Canvas 教程。 http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-events-tutorial/
我想在画布的特定区域拖动一个对象,并且该对象不应从该区域拖出。我怎样才能做到这一点?
我正在阅读 HTML5 Canvas 教程。 http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-events-tutorial/
我想在画布的特定区域拖动一个对象,并且该对象不应从该区域拖出。我怎样才能做到这一点?
您必须定义一个自定义的拖动边界函数来限制可以拖动对象的位置。像这样:
var yellowGroup = new Kinetic.Group({
x: stage.getWidth() / 2,
y: 70,
draggable: true,
dragBoundFunc: function(pos) { // <--- starting here
var x = stage.getWidth() / 2;
var y = 70;
var radius = 50;
var scale = radius / Math.sqrt(Math.pow(pos.x - x, 2) + Math.pow(pos.y - y, 2));
if(scale < 1)
return {
y: Math.round((pos.y - y) * scale + y), //<--- you have to return an object like {x: number, y: number }
x: Math.round((pos.x - x) * scale + x)
};
else
return pos;
} // this bounds the dragging into a circle area.
});
从本质上讲,它只是一点点数学,它决定了你可以在哪里设置一个点。