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

debugcn 发表于 Dev

斯瓦普尼尔·卡卡雷

我有一个应用程序，在画布上单击两次可在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>

根据伊扎里斯的说法

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

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

希望有帮助，祝你好运。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。