FabricJS双击新技术？

Question

有人可以指点我如何启用双击织物图像的方向吗？我遇到了这个解决方案

FabricJS double click on objects

我正在尝试不使用 FabicjsEx

但我无法让任何东西正常工作。有人可以告诉我完成此任务的最佳方法吗？

Answer 1

最好的方法是使用 fabric.util.addListener 方法。

使用您可以为画布元素添加双击事件并将其限制为任何特定对象（即图像），您必须检查您是否单击了图像对象或在执行任何操作之前。

ᴅᴇᴍᴏ

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>