如何使 Canvas 中的 selection box 到 select 它接触的任何物体而不仅仅是它拥抱的物体？

Question

有一个很棒的教程 Selecting Multiple Objects with KineticJS 教你如何在 HTML Canvas 中创建一个 select 离子盒以便 select 多个对象，但作者 Michelle Higgins 将他的代码写入 select 被 select 离子盒包围的对象。

以下JavaScript代码表示算法：

var pos = rectSel.getAbsolutePosition();

//get the extents of the selection box
var selRecXStart = parseInt(pos.x);
var selRecXEnd = parseInt(pos.x) + parseInt(rectSel.attrs.width);
var selRecYStart = parseInt(pos.y);
var selRecYEnd = parseInt(pos.y) + parseInt(rectSel.attrs.height);

//get the extents of the group to compare to
var grpXStart = parseInt(grp.attrs.x);
var grpXEnd = parseInt(grp.attrs.x) + parseInt(grp.attrs.width);
var grpYStart = parseInt(grp.attrs.y);
var grpYEnd = parseInt(grp.attrs.y) + parseInt(grp.attrs.height);

//Are we inside the selction area?
if ((selRecXStart <= grpXStart && selRecXEnd >= grpXEnd) && 
    (selRecYStart <= grpYStart && selRecYEnd >= grpYEnd))
{
  if (arSelected.indexOf(grp.getName()) < 0)
  {
    arSelected.push(grp.getName());

    var tmpX = parseInt(grp.attrs.x);
    var tmpY = parseInt(grp.attrs.y);

    var rectHighlight = new Kinetic.Rect({
      x: tmpX,
      y: tmpY,
      height: grp.attrs.height,
      width: grp.attrs.width,
      fill: 'transparent',
      name: 'highlightBlock',
      stroke: '#41d6f3',
      strokeWidth: 3
    });

    layer.add(rectHighlight);
  }
}

问题是：如何使 select 离子盒 select 它接触的任何物体而不仅仅是它拥抱的物体？

P.S：这是一个有效的 jsbin.

Answer 1

当前的方法检查对象是否完全包含在选择矩形中。一个区间obj完全包含在另一个区间sel中时：

    sel.start <= obj.start && obj.end <= sel.end

当你只想让对象重叠时，测试：

    sel.start <= obj.end && obj.start <= sel.end

所谓间隔，我指的是单一维度。当然，您必须测试 x 和 y 的条件。请注意，第二个条件是第一个条件，它们的右侧交换了。

对于您的示例，将命中测试更改为：

        //Are we inside the selction area?
        if (selRecXStart <= grpXStart
         && selRecXEnd >= grpXEnd
         && selRecYStart <= grpYStart
         && selRecYEnd >= grpYEnd)
        { ...

至：

        //Are we inside the selction area?
        if (selRecXStart <= grpXEnd
         && selRecXEnd >= grpXStart
         && selRecYStart <= grpYEnd
         && selRecYEnd >= grpYStart)
        { ...

如何使 Canvas 中的 selection box 到 select 它接触的任何物体而不仅仅是它拥抱的物体？

How to make selection box in Canvas to select any object it touches not only objects it embraces?

javascript

algorithm

canvas

kineticjs

konvajs