个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 01:54:16 24 4
gpt4 key购买 nike

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

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

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

最佳答案

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

关于javascript - Fabric.js 中同时绘制两个对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19348074/

24 4 0
文章推荐： javascript - 使用 jquery 自定义简单亚马逊类型星级评级 :lt
文章推荐： 应用 jQuery 后 php header 不起作用
文章推荐： javascript - 过滤器执行时如何向angularjs添加事件？
文章推荐： javascript - jquery 通过两个变量进行过滤，其中之一可能未定义
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com