Question

我使用Fabric.js在画布上绘制矩形。绘制矩形后，我想禁用该对象上的所有事件。我尝试使用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 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>

Answer 1

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

此方法适用于结构中的所有Observable（请参阅API文档：http://fabricjs.com/docs/fabric.Observable.html#off）

Answer 2

最终答案是什么？如果事件有目标，我们将根据事件决定打开或关闭。我想出了这个解决方案（第二个mousedown处理程序），但是没有用。

canvas.on('mouse:down', function (e) {
    // canvas click, not object click; so create the obj
    if (e.target === undefined) {
        canvas.on('mouse:down', eventHandler);
    }
    else {
        // an object was clicked, so don't create the obj again
        canvas.off('mouse:down', eventHandler);
    }
});

eventHandler是处理对象创建的函数。

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

2 个答案: