FabricJS双击新技术? [英] FabricJS double click new techniques?

问题描述

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

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

FabricJS双击对象

我正试图不使用FabicjsEx

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?

推荐答案

达到此目的的最佳方法是使用

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

如果您可以为canvas元素添加双击事件并将其限制为任何特定对象(即image)，则必须检查是否单击了image对象或不在执行任何操作之前.

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>

这篇关于FabricJS双击新技术?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！