在 fabricjs 上，你如何确定一个对象是否已经存在于某个坐标？

Question

过去几周我一直在使用 fabricjs，但我找不到解决我遇到的问题的方法。我有一个对象，我想以编程方式确定它周围的区域是否为 "empty"（没有对象），因此如果我在那里添加一个对象，它们将不会相交。

我一直在摆弄 canvas.findTarget 和不同的 "virtual" 对象，但我什么也做不了。

这是我找到的解决方案：

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

此致，亚历克斯

Answer 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
});

如果您还有其他问题，请告诉我。很高兴为您提供更多帮助！

Answer 2

我想在这里使用两个事件来捕捉鼠标何时在给定对象上以及何时离开：

 myobject[i].on('mouseover', () => {
    console.log("mouse over"+i)

 });
 myobject[i].on('mouseout', () => {
    console.log("mouse out"+i)

 });

在 fabricjs 上，你如何确定一个对象是否已经存在于某个坐标？

On the fabricjs how can you determine if an object already exists at certain coordinates?

javascript

canvas

fabricjs