Easeljs将对象保持在界限内

Question

我正在使用Easeljs在HTML5画布上绘制绘图应用程序。到目前为止，我能够将对象拖放到字段中，但我只希望它们在某些范围内。

举例说明：

对象1,2,4和5应该被删除，但是应该保留对象3。

我尝试过使用hitTest（），但是没有正常工作（我可能做错了）。我很乐意发布我使用过的代码，但是我的PC在处理它的时候冻结了......想到我解冻时最好问一下，哈哈。

Answer 1

这是一个带有边界约束的快速拖放示例：

http://jsfiddle.net/xrqatyLs/8/

秘诀就是将阻力位置限制在你自己的价值中。

clip.x = Math.max(bounds.x, Math.min(bounds.x + bounds.width - clipWidth, evt.stageX)); 
clip.y = Math.max(bounds.y, Math.min(bounds.y + bounds.height-clipHeight, evt.stageY)); 

这是另一个更复杂的例子，它手动检查一个矩形是否与另一个矩形相交：

http://jsfiddle.net/lannymcnie/yvfLwdzn/

希望有所帮助！

Answer 2

<强>解决方案：

var obj1 = obj.getBounds().clone(); // obj = a pylon
var e = obj1.getTransformedBounds();
var obj2 = bg.getBounds().clone(); // bg = the big green field
var f = obj2.getTransformedBounds();

if(e.x < f.x || e.x + e.width > f.x + f.width) return false;
if(e.y < f.y || e.y + e.height > f.y + f.height) return false;

return true;

毕竟它很简单，但我想我已经做了很长时间了，所以我开始认真思考......