5

I am using fabric js, i use the following function to put an image on canvas, when i click on canvas an image is put on that location, i want to know if there is way that i can check weather there is something already present at location where i am clicking especially if there is another image or not

  document.getElementById("door").onclick = function () {

            canvas.on('mouse:down', function (o) {
                fabric.Image.fromURL('http://localhost:60099/Images/door.png', function (img) {
                    var pointer = canvas.getPointer(o.e);

                    logo = img.set({ left: pointer.x , top: pointer.y  })

                    canvas.add(logo);
                    canvas.item(objC).lockMovementY = true;
                    canvas.item(objC).lockMovementX = true;
                    canvas.renderAll();

                });

            });

        }
1
  • can you share your fiddle
    – Dakshika
    Apr 25, 2014 at 4:15

1 Answer 1

7

Collisions can be detected with the fabric.js 'intersectsWithObject' function. Consider their 'intersection' example:

http://fabricjs.com/intersection

1
  • This is useful, however it's only rudimentary collision detection based on bounding box. "Note that intersection is checked against bounding boxes, not actual shapes". e.g. A collision won't occur along the curved edge of a circle, as most ppl would desire.
    – Kalnode
    May 3, 2023 at 16:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.