Question

我发布的问题是，在给定的示例程序中，当我单击第一个按钮而不是我绘制线时，我已经制作了两个按钮，当我单击第二个按钮时，我绘制矩形。问题是当我单击第二个按钮时比线和矩形都是同时绘制的。这是我的代码

<!DOCTYPE html>
<html>
<head>
    <title>Final layout</title>
    <script type="text/javascript" src="fabric.min.js"></script>
    <script type="text/javascript" src="jquery-2.0.2.js"></script>
    <script type="text/javascript">
        //Start when the document is loaded
        $(document).ready(function(){
            //Getting the canvas
            var canvas1= new fabric.Canvas('canvas');
            //Setting the canvas properties
            canvas1.setHeight(400);
            canvas1.setWidth(1300);
            canvas1.setBackgroundColor('lightgrey');
            canvas1.renderAll();
            //End of canvas1


            //Binding the functions to button_1
            $('#1').click(function(){

                console.log("button 1 clicked");
                canvas1.isDrawingMode=true;  // **Enables line drawing
                canvas1.freeDrawingBrush.width=3;
                canvas1.freeDrawingBrush.color='blue';

                //Adding code to alter line properties

                canvas1.on('path:created',function(e){
                    var line1= e.path;
                    line1.lockScalingX;
                    line1.lockScalingY;
                });
            });


            //Binding the functions to button_2
            $('#2').click(function(){

                console.log("Button 2 cilcked");

                //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:'white'
                    });
                    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;
                });




            });
 });
    </script>
</head>
<body>
<canvas id="canvas" style="border: 2px solid darkblue"></canvas>
<div style="position: relative; width: 1300px; height:30px; border: 2px solid black; margin-top: 5px">
    <input type="button" id="1" value="pencil">
    <input type="button" id="2" value="rectangle">
</div>
</body>

请让我知道这个问题是什么，我应该尝试一次绘制一个形状。

Answer 1

您需要将isDrawingMode设置为false以停止自由绘制模式。

在Fabric.js中同时绘制两个对象

1 个答案: