在fabricjs上,如何确定某个坐标上是否已存在某个对象?

时间:2017-03-29 11:51:39

标签: javascript canvas fabricjs

过去几周我一直在使用fabricjs,但我无法找到解决问题的方法。 我有一个对象,我想以编程方式确定它周围的区域是否为“空”(没有对象),所以如果我在那里添加一个对象,它们就不会相交。

我一直在使用canvas.findTarget和不同的“虚拟”对象,但我无法正常工作。

这是我找到的解决方案:

var targetPoint = new fabric.Point(target.left + offset + 1, target.top + 1);
          if (obj.containsPoint(targetPoint)) {
            objectOnRight = obj;
          }

祝你好运, 亚历

1 个答案:

答案 0 :(得分:1)

这应该让你相当接近(我过去用过的一些代码来显示上下文菜单):

fabric.util.addListener(document.getElementsByClassName('upper-canvas')[0], 'contextmenu', function (env) {
    var x = env.offsetX;
    var y = env.offsetY;
    var itemIndex = -1;
    $.each(canvas.getObjects(), function (i, e) {
        // e.left and e.top are the middle of the object use some "math" to find the outer edges
        if (e.selectable && e.id != 'canvasNumbers') {
            var d = e.width * e.scaleX / 2;
            var h = e.height * e.scaleY / 2;
            if (x >= (e.left - d) && x <= (e.left + d)) {
                if (y >= (e.top - h) && y <= (e.top + h)) {
                    itemIndex = i;
                }
            }
        }
    });
    if (itemIndex > -1) {
        canvas.setActiveObject(canvas.getObjects()[itemIndex]);
        canvasSelectedItem = canvas.getObjects()[itemIndex];
        $('.contextmenu').css({
            top: env.pageY + 'px',
            left: env.pageX + 'px'
        }).show();
    }
    env.preventDefault();
    return false; //stops the event propigation
});

如果您有任何其他问题,请与我们联系。很乐意提供更多帮助!