Question

我正在使用fabric js来绘制移动调整大小的矩形。但是我遇到的一件事就是能够在鼠标拖动上绘制圆形或矩形，即自由绘图。我正在关注本教程示例 a line drawing example！但它没有像这个例子那样解释如何绘制矩形或圆形。

我是使用Fabric js的初学者，请帮帮我。

代码：`//声明变量 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;
    });`

由于

如何使用鼠标使用Fabric js自由绘制圆形和矩形？

0 个答案: