Wie erstelle ich ein Auswahlfeld in Canvas, um ein Objekt auszuwählen, das es berührt, und nicht nur Objekte, die es umfasst?

Question

Feb 10, 2016, 02:31 PM

javascript algorithm canvas konvajs kineticjs

Wie erstelle ich ein Auswahlfeld in Canvas, um ein Objekt auszuwählen, das es berührt, und nicht nur Objekte, die es umfasst?

Es gibt ein tolles TutorialMehrere Objekte mit KineticJS auswählen das zeigt Ihnen, wie Sie ein Auswahlfeld in HTML Canvas erstellen, um mehrere Objekte auszuwählen, aber der AutorMichelle Higgins schrieb seinen Code, um ein Objekt auszuwählen, das von der Auswahlbox umfasst wird.

Der folgende JavaScript-Code drückt den Algorithmus aus:

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

Die Frage ist: Wie wird ein Auswahlfeld erstellt, um ein Objekt auszuwählen, das es berührt, und nicht nur Objekte, die es umfasst?

P.S: Hier ist ein funktionierendes jsbin.