1

I am using fabric js to draw move resize rectangles. But one thing that I am getting stuck is to be able to draw circle or rectangle on mouse drag i.e. free drawing. I am following this tutorial example a line drawing example! But it did not explain about how to draw rectangle or circle like this example.

I am a beginner in using Fabric js , please help me out.

Code : `//Declaring the variables var isMouseDown=false; var OriginX=new Array(); var OriginY= new Array(); var refRect;

    //Setting the mouse events
    canvas1.on('mouse:down',function(event){
        //Defining the procedure
        isMouseDown=true;
        OriginX=[];
        OriginY=[];

        //Getting yhe mouse Co-ordinates
        var posX=event.e.clientX;
        var posY=event.e.clientY;
        OriginX.push(posX);
        OriginY.push(posY);

        //Creating the rectangle object
        var rect=new fabric.Rect({
            left:OriginX[0],
            top:OriginY[0],
            width:0,
            height:0,
            stroke:'red',
            strokeWidth:3,
            fill:''
        });
        canvas1.add(rect);

        refRect=rect;  //**Reference of rectangle object

    });

    canvas1.on('mouse:move', function(event){
        // Defining the procedure

        if(!isMouseDown)
        {
            return;
        }
        //Getting yhe mouse Co-ordinates
        var posX=event.e.clientX;
        var posY=event.e.clientY;

        refRect.setWidth(Math.abs((posX-refRect.get('left'))));
        refRect.setHeight(Math.abs((posY-refRect.get('top'))));
        canvas1.renderAll();


    });

    canvas1.on('mouse:up',function(){
        //alert("mouse up!");
        isMouseDown=false;
    });`

Thanks

graphics123
  • 1,191
  • 3
  • 20
  • 57
  • Please add the code example of your attempt and what did not work – prasun Oct 11 '15 at 05:39
  • Thanks for your reply. But I dont really know how to write the code for that as I am a newbie to fabric js. But you can see the code for line drawing @http://fabricjs.com/freedrawing/ – graphics123 Oct 11 '15 at 06:15
  • Please paste the code you are trying here and please avoid links. – Rohit Gupta Oct 11 '15 at 06:21
  • I am really sorry , but I am unable to add code here . I am getting errors which I am not able to figure out. Could you please go to http://fabricjs.com/freedrawing/ and click "Cancel drawing mode" , In the right hand side , you will see the code. If you are good with stackoverflow, please suggest me edits by adding code. – graphics123 Oct 11 '15 at 06:26
  • What is the error you are getting or issue you are facing? the code that you have copied from or using may be slight different from the one which you have referred. There are changes for modification intentionally or by mistake. Please share the code that you have tried which would help other users easy to understand your problem and to provide better solutions. You can simply copy your code and paste it on a text editor and apply a tab/4 spaces to each line then copy and paste it on the stack overflow editor. – Kesavamoorthi Oct 12 '15 at 03:10
  • I have finally added some code . please let me know why the mouse positions aren't coming correctly. – graphics123 Oct 12 '15 at 18:08
  • Draw Rectangle Anwer - https://stackoverflow.com/questions/9417603/fabric-js-free-draw-a-rectangle/45917491#45917491 – krunal shah Sep 18 '17 at 01:18
  • Draw Circle Answer - https://stackoverflow.com/questions/33111045/how-to-free-draw-circle-using-fabric-js/46268027#46268027 – krunal shah Sep 18 '17 at 01:18
  • See https://stackoverflow.com/questions/9417603/fabric-js-free-draw-a-rectangle – cancerbero Aug 31 '19 at 17:34

0 Answers0