问题描述
通过阅读ContainsPoint上的Fabric文档( http://fabricjs.com /docs/symbols/fabric.Canvas.html#containsPoint ),它指出:
From reading the documentation for Fabric on ContainsPoint (http://fabricjs.com/docs/symbols/fabric.Canvas.html#containsPoint), it states :
Applies one implementation of 'point inside polygon' algorithm
Parameters:
e
{ Event } event object
target
{ fabric.Object } object to test against
Returns:
{Boolean} true if point contains within area of given object
因此,基于此,我试图遍历组中的所有对象,如果containsPoint返回true,则选择该对象.
So based on this, I'm trying to iterate through all objects within a group and if containsPoint returns true, select the object.
但是它总是返回false;
But it always returns false;
canvas.on('object:selected',function(o,i) {
console.log(o)
if ( o.target.isType('group') ) {
o.target.forEachObject(function(child) {
child.setCoords();
//always false
console.log(canvas.containsPoint(o.e, child) );
});
}
})
这是jsFiddle-有什么想法吗? http://jsfiddle.net/LNt2g/1/
Here's the jsFiddle - any ideas?http://jsfiddle.net/LNt2g/1/
推荐答案
已解决!有点令人费解,但它可以工作.我必须根据组和子对象的尺寸/位置专门计算起始x/y和结束x/y.
Solved! A little convoluted, but it works. I had to specifically calculate the starting and ending x/y based on the dimensions/position of both the group and the child object.
canvas.on('mouse:down', function(options) {
if (options.target) {
var thisTarget = options.target;
var mousePos = canvas.getPointer(options.e);
if (thisTarget.isType('group')) {
var groupPos = {
x: thisTarget.left,
y: thisTarget.top
}
thisTarget.forEachObject(function(object,i) {
var objectPos = {
xStart: (groupPos.x - (object.left*-1) ) - (object.width / 2),
xEnd: (groupPos.x - (object.left*-1)) + (object.width / 2),
yStart: (groupPos.y - (object.top*-1)) - (object.height / 2),
yEnd: (groupPos.y - (object.top*-1)) + (object.height / 2)
}
if (mousePos.x >= objectPos.xStart && mousePos.x <= (objectPos.xEnd)) {
if (mousePos.y >= objectPos.yStart && mousePos.y <= objectPos.yEnd) {
console.log(objectPos);
console.log('Hit!',object);
}
}
});
}
}
});
以下是更新的小提琴: http://jsfiddle.net/LNt2g/4/
Here the updated fiddle:http://jsfiddle.net/LNt2g/4/
这篇关于使用ContainsPoint选择组中的对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!