Easeljs 将对象保持在边界内

Question

我正在 HTML5 canvas 中使用 Easeljs 开发绘图应用程序。到目前为止，我可以将对象拖放到字段中，但我只希望它们在特定范围内。

举例说明：

应删除对象 1、2、4 和 5，但应保留对象 3。

我试过使用 hitTest()，但效果不佳（我可能做错了什么）。我很想 post 我使用的代码，但是我的电脑在处理它时死机了......我想我最好在解冻时问一下，哈哈。

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;

毕竟这么简单，但我想我花了很长时间才开始想太多......

Easeljs 将对象保持在边界内

Easeljs keep object within bounds

html5-canvas

easeljs