4

複数のオブジェクトを選択するために、HTML Canvas で選択ボックスを作成する方法を説明する、KineticJS を使用して複数のオブジェクトを選択するという優れたチュートリアルがありますが、著者のMichelle Higginsは、選択ボックスに含まれるオブジェクトを選択するコードを作成しました。

次の 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);
  }
}

問題は、選択ボックスを作成して、それが受け入れるオブジェクトだけでなく、接触するオブジェクトを選択する方法ですか?

PS: これは動作中のjsbinです。

4

1 に答える 1

2

現在のアプローチでは、オブジェクトが選択長方形に完全に含まれているかどうかを確認します。次の場合、間隔objは別の間隔に完全に含まれますsel。

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

オブジェクトをオーバーラップさせたいだけの場合は、次のようにテストします。

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

間隔とは、単一の次元を意味します。もちろん、 と の両方の条件をテストする必要がありxますy。2 番目の条件は、右側が交換された最初の条件であることに注意してください。

あなたの例では、ヒット テストを次のように変更します。

        //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)
        { ...
于 2016-02-10T15:29:13.840 に答える