kineticjs当与另一个重叠时停止拖动到一个形状 [英] kineticjs Stop drag to a shape when overlaps with another

问题描述

我有两个形状而不是可拖动的组。

I have two shapes rather groups which are draggable.

拖动蓝色组时，它不应与黄色组重叠。

When the blue group is dragged it should not overlap the yellow group.

下面是小提琴 http://jsfiddle.net/bittu4u4ever/3Kprr/

我尝试做一些 getIntersections 但是我真的是kinetic.js中的菜鸟。

i tried doing some getIntersections but im really a noob in kinetic.js.

推荐答案

你可能认为getIntersections（）会让你碰到碰撞对象，我也这么认为，但事实并非如此。它只给出容器的相交CHILDREN（而不是所有）对象。

You may think getIntersections() will get you the colliding objects, I thought so too, but it's not true. It only gives intersecting CHILDREN(not all) objects of the container.

您可以在矩形和/或组上运行碰撞检测逻辑。
以下链接是如何检测矩形上的碰撞。拖动矩形时，可以将其应用到代码中。

You can run collision detection logic on your rectangles and/or groups. The following link is how to detect collision on rectangles. You may apply this into your code when a rectangle is dragged.

快速矩形到矩形交叉点

这是我用KineticJS检测两个矩形碰撞的函数。

Here is my function of how I detect collision on two rectangles with KineticJS.

var isRectCollide = function(rect1, rect2) {
    if (rect1.x - rect1.width  >= rect2.x + rect2.width  &&
        rect1.y - rect1.height >= rect2.y + rect2.height &&
        rect1.x + rect1.width  <= rect2.x + rect2.width  &&
        rect1.x + rect1.height <= rect2.y - rect2.height )
        return false;
    else
        return true;
}

您可能已经知道这一点，但是以防万一;

You may already know this, but in case;

1. 组没有宽度/高度，组中的形状没有。


2. 组中的形状确实有x / y但是相对小组。

希望有所帮助

这篇关于kineticjs当与另一个重叠时停止拖动到一个形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！