使用Fabric.js启用和禁用画布的鼠标事件

我正在使用Fabric.js在画布上绘制矩形。绘制矩形后，我想禁用该对象上的所有事件。我试图使用canvas.__eventListeners["mouse:down"] = [];来做到这一点，但在清除对象选择后，画布无法应用任何事件。使用Fabric.js启用和禁用画布的鼠标事件

<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 id="log"></div> 
</div> 
</body> 
<script> 
    (function() { 
     var canvas = new fabric.Canvas('panel'); 
     var clicks=0; 
     var x1=0;var y1=0; 
     var rect; 
     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("Start Pointer " +x1 ,y1); 
         clicks++; 
        } 
        else 
        { 
         var endpointer=canvas.getPointer(); 
         console.log(endpointer); 
         var endx=endpointer.x; 
         var endy=endpointer.y; 
         console.log("Endpointer " +endx ,endy); 
         console.log("x and y"+x1,y1); 
         var newwidth=endpointer.x- x1; 
         var newheight=endpointer.y - y1; 

         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); 
         //console.log(rect.setWidth(pointer2.x- x1)); 
         //console.log(rect.setHeight(pointer2.y - y1)); 
         canvas.renderAll(); 
         clicks=0; 

        } 
       } 
       else 
       { 

        //canvas.getActiveObject().remove(); 
        canvas.__eventListeners["mouse:down"] = []; 
       } 
      }); 

      canvas.on('object:moving',function(){ 
       var bound=rect.getBoundingRect(); 
       console.log(bound.left,bound.top,bound.width,bound.height); 
      }); 
      canvas.on('object:scaling',function(){ 
       var bound=rect.getBoundingRect(); 
       console.log(bound.left,bound.top,bound.width,bound.height); 
      }); 
      canvas.on('object:selected',function(e){ 

       document.onkeydown = function(e) { 
        if (e.keyCode === 27||e.button==3) { 
         e.preventDefault(); 
         canvas.getActiveObject().remove(); 
        } 

       } 

      }); 

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

来源

2015-12-03 Swapnil Kachare

随着方法canvas.off('mouse:down', eventHandler)事件处理程序使用canvas.on('mouse:down', eventHandler)可以去除登记。确保将相同的功能传递给两个调用（例如，通过将处理程序分配给变量）。

这种方法在织物适用于所有Observable S（参见API文档：http://fabricjs.com/docs/fabric.Observable.html#off）

来源

2015-12-03 22:24:52 forrert

是这有助于我解决我的问题。谢谢。如果我的问题有帮助，请投票。 –

感谢您的最后提示：“一定要将相同的功能传递给这两个调用”，这解决了我的问题，重新启用事件 –

使用Fabric.js启用和禁用画布的鼠标事件

回答

相关问题