在对象选择上禁用鼠标事件，并在 fabric js 中清除对象选择后启用它

Question

我有一个应用程序，在 canvas 上单击两次，它会在 mouse:down 事件上绘制一个矩形。但我想为对象选择和对象缩放清除此事件，因为当我单击悬停对象时，它开始绘制一个新矩形。

我曾尝试使用 canvas._eventListeners("mouse:down")=[] 清除鼠标按下事件以进行对象选择，但对象选择清除后 canvas 没有对任何事件做出响应。

<html lang="en" >

<head>

    <meta charset="utf-8" />

    <title>HTML5 canvas - Image color picker | Script Tutorials</title>

    <link href="index.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js" ></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 



</head>

<body>
    <div class="container">
    <div class="column1">
        <canvas id="panel" width="700" height="350"></canvas>   
    </div>
    <div style="clear:both;"></div>

</div>
</body>
<script>
    (function() {
        var canvas = new fabric.Canvas('panel');
        var clicks=0;
        var x1=0;var y1=0;

     canvas.on('mouse:down', function(e){
                if (clicks == 0) {
                    var pointer=canvas.getPointer(event.e);
                    console.log(pointer);
                    x1 = pointer.x;
                    y1 =pointer.y;
                    console.log("Pointer Start " +x1 ,y1);
                    clicks++;
                } 
                else 
                {
                    var pointer2=canvas.getPointer();
                    console.log(pointer2);
                    var endx=pointer2.x;
                    var endy=pointer2.y;
                    console.log("Pointer2 End  " +endx ,endy);
                    console.log("x and y"+x1,y1);
                    var newwidth=pointer2.x- x1;
                    var newheight=pointer2.y - y1;

                     var rect=new fabric.Rect({
                            left:x1,
                            top: y1,
                            originX :'left',
                            originY :'top',
                            width:newwidth,
                            height:newheight,
                            selectable: true,
                            evented:false,
                            fill:'red',
                            opacity :0.3

                        });
                    canvas.add(rect);

                    canvas.renderAll();
                    clicks=0;   
                }   
            });


            fabric.Image.fromURL('fedex.jpg', function (img) {
                canvas.add(img.set({
                    width: 700,
                    height:350,
                    left: 350,
                    top: 175,
                    selectable: false,

                }));
            });
    })();

</script>

Answer 1

您好，您可以在 mouse:down 上查看目标：

if e.target == undefined，这意味着您单击 canvas 而不是任何对象，因此您创建了对象。
如果 e.target != undefined ，这意味着您单击了一个对象，因此您移动或修改了您选择的对象等。

我刚刚将 if 语句添加到您的 mouse:down 事件中：

 canvas.on('mouse:down', function(e){

  //check if you clicked on an object that exists canvas
   if(e.target != undefined){

            if (clicks == 0) {
                var pointer=canvas.getPointer(event.e);
                console.log(pointer);
                x1 = pointer.x;
                y1 =pointer.y;
                console.log("Pointer Start " +x1 ,y1);
                clicks++;
            } 
            else 
            {
                var pointer2=canvas.getPointer();
                console.log(pointer2);
                var endx=pointer2.x;
                var endy=pointer2.y;
                console.log("Pointer2 End  " +endx ,endy);
                console.log("x and y"+x1,y1);
                var newwidth=pointer2.x- x1;
                var newheight=pointer2.y - y1;

                 var rect=new fabric.Rect({
                        left:x1,
                        top: y1,
                        originX :'left',
                        originY :'top',
                        width:newwidth,
                        height:newheight,
                        selectable: true,
                        evented:false,
                        fill:'red',
                        opacity :0.3

                    });
                canvas.add(rect);

                canvas.renderAll();
                clicks=0;   
            }   
        });


        fabric.Image.fromURL('fedex.jpg', function (img) {
            canvas.add(img.set({
                width: 700,
                height:350,
                left: 350,
                top: 175,
                selectable: false,

            }));
   }//end if 
        });

希望有所帮助，祝你好运。

在对象选择上禁用鼠标事件，并在 fabric js 中清除对象选择后启用它

Disable mouse events on object selection and enable it after object selection cleared in fabric js

html

fabricjs