在对象选择上禁用鼠标事件并在结构 js 中清除对象选择后启用它答案

【问题标题】：Disable mouse events on object selection and enable it after object selection cleared in fabric js在对象选择上禁用鼠标事件并在结构 js 中清除对象选择后启用它
【发布时间】：2016-01-31 08:49:42
【问题描述】：

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

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

<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>

【问题讨论】：

标签： html fabricjs

【解决方案1】：

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

如果 e.target == 未定义，这意味着您单击的是画布而不是任何对象，因此您创建了该对象。
如果 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 
        });

希望有帮助，祝你好运。

【讨论】：

是的，它工作得很好，谢谢您的帮助，如果我的问题有帮助，请投票。但是在为 e.target==undefined 所有画布事件 gaon 禁用该事件之后。我们如何再次制作画布应用事件？