There is a great tutorial Selecting Multiple Objects with KineticJS that teaches you how to create a selection box in HTML Canvas in order to select multiple objects, but the author Michelle Higgins wrote his code to select object that embraced by the selection box.
The following JavaScript code expresses the algorithm:
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);
}
}
The question is: How to make selection box to select any object it touches not only objects it embraces?
P.S: Here is a working jsbin.