Question

我正在申请，在两次点击画布上，它会在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>

Answer 1

您好，您可以在鼠标：向下：

上查看目标

如果e.target == undefined，这意味着您单击画布而不是任何对象，因此您创建对象。
如果e.target！= undefined，这意味着您单击了一个对象，因此您可以移动或修改所选对象等。

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

def columnsMapFunc( expr: String) : Column = {
    if(expr(0) == '$')
        return expr.drop(1)
    else
        return concat(extractedColumnNames).as(newName)
}

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

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

1 个答案: