FabricJS double click new techniques?

Question

could someone please point me in the direction for how to enable double click on fabric images? i came across this solution

FabricJS double click on objects

I am trying to not use FabicjsEx

but i am unable to get anything to work correctly. can someone please let me know the best way to accomplish this?

Answer 1

The best way to accomplish this, is to use fabric.util.addListener method.

Using that you could add a double click event for the canvas element and to restrict it to any particular object ( ie. image ), you would have to check whether you clicked on an image object or not before performing any action.

ᴅᴇᴍᴏ

var canvas = new fabric.Canvas('canvas');

// add image
fabric.Image.fromURL('https://i.imgur.com/Q6aZlme.jpg', function(img) {
    img.set({
        top: 50,
        left: 50
    })
    img.scaleToWidth(100);
    img.scaleToHeight(100);
    canvas.add(img);
});

// add rect (for demo)
var rect = new fabric.Rect({
    left: 170,
    top: 50,
    width: 100,
    height: 100,
    fill: '#07C'
});
canvas.add(rect);

// mouse event
fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function(e) {
    if (canvas.findTarget(e)) {
        const objType = canvas.findTarget(e).type;
        if (objType === 'image') {
            alert('double clicked on a image!');
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>
<canvas id="canvas" width="320" height="200"></canvas>