CODEWITHSUNDEEP
htmlfabricjs
Swapnil Kachare
Swapnil Kachare

Reputation: 203

Disable mouse events on object selection and enable it after object selection cleared in fabric js

I am having application in which on two clicks on canvas it draws a rectangle on mouse:down event. But I want to clear this event for object selected and object scaling because when I click hover the object it starts drawing a new rectangle.

I have tried to clear mouse down event using canvas._eventListeners("mouse:down")=[] for object selection but after object selection cleared canvas didn't response for any events.

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

Upvotes: 1

Views: 2586

Answers (1)

Theo Itzaris
Theo Itzaris

Reputation: 4681

hello you can check the target on mouse:down :

  1. if e.target == undefined, this means that you click on canvas and not on any object, so you create the object.
  2. if e.target != undefined , this means that you clicked on an object , so you move or modify you selected object and etc.

i just added the if statement into your mouse:down event: 

 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 
        });

hope helps, good luck.

Upvotes: 1

Related Questions