有一个很棒的教程,《使用KineticJS选择多个对象》,教您如何在HTML Canvas中创建选择框以选择多个对象,但是作者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。
当前方法检查对象是否完全包含在选择矩形中。在以下情况下,一个间隔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)
{ ...
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句