Как сделать поле выбора в Canvas для выбора любого объекта, к которому он касается не только объектов, которые он охватывает?

Question

Существует большой учебник Selecting Multiple Objects with KineticJS, в котором описано, как создать поле выбора в HTML-холсте, чтобы выбрать несколько объектов, но автор 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); 
 
    } 
 
}

Вопрос: Как сделать окно выбора, чтобы выбрать какой-либо объект, он затрагивает не только объекты, она включает в себя?

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) 
     { ...