本文介绍了使用ContainsPoint选择组中的对象的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

通过阅读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选择组中的对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-16 21:50