使画布上绘制的形状不可移动（fabric.js）

Question

I have started using fabric.js today for drawing on my canvas using different modes. 我今天开始使用fabric.js在我的画布上使用不同的模式绘图。 That means when I click lines button I shall be able to draw straight lines on canvas. 这意味着当我点击线条按钮时，我将能够在画布上绘制直线。 When I press rectangles button I shall be able to draw rectangles and same with freehand button. 当我按下矩形按钮时，我将能够绘制矩形，并使用手绘按钮。 I am able to draw all of them. 我能够画出所有这些。

Problem comes here. 问题来了。 Once I draw any shape and try to draw some thing else near the old shape, the previous shape is becoming movable. 一旦我绘制任何形状并尝试在旧形状附近绘制其他东西，之前的形状就变得可移动了。

Here is my code 这是我的代码

<%@ taglib uri="/struts-tags" prefix="s" %>
<html>
<head>
    <style>
        #myCanvas { background:url("images/<s:property value="userImageFileName"/>") ;
                 background-size: 100% 100%;
                 background-repeat: no-repeat;}
    </style>    
    <script type="text/javascript" src="fabric.js"></script>
    <script type="text/javascript" src="jscolor.js"></script>
</head>
<body>
    <img id="result" src="images/<s:property value="userImageFileName"/>" hidden="true" width="565" height="584" class="annotatable"/>
    <canvas id="myCanvas" width="565" height="584" style="border:1px solid #d3d3d3;">Please use a modern browser like Firefox, Chrome, Safari</canvas>

    <div >Choose Color</div>
    <input class="color" id="selectedColor">

    <input type="button" value="rectangles" onClick="operate('rectangles')">
    <input type="button" value="freehand"   onClick="operate('freehand')">
    <input type="button" value="lines"      onClick="operate('lines')">
    <input type="submit" value="save"       onClick="save()">
    <br>
    <canvas id="canvas2" width="565" height="584"></canvas>
    <img id="canvasImg" alt="No annotated image found">

    <script>
        var canvas = new fabric.Canvas('myCanvas', { selection: false });
        var drawRectangle = false;
        var color;

        function operate(mode)
        {
            var line, mouseClicked = false;

            canvas.on('mouse:down', function(o)
            {
                mouseClicked = true;
                var pointer = canvas.getPointer(o.e);
                color=document.getElementById("selectedColor").value;

                if(mode=="freehand")
                {
                    canvas.isDrawingMode    = true;
                    drawRectangle           = false;

                    canvas.freeDrawingBrush.width = 5;
                    canvas.freeDrawingBrush.color = '#'+color;
                }

                else if(mode=="lines")
                {
                    canvas.isDrawingMode    = false;
                    drawRectangle           = false;

                    var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
                    line = new fabric.Line(points, {
                        strokeWidth: 5,
                        fill: 'red',
                        stroke: 'red',
                        originX: 'center',
                        originY: 'center'
                    });
                    canvas.add(line);
                }

                else if(mode=="rectangles")
                {
                    canvas.isDrawingMode = false;
                    drawRectangle = true;

                    origX = pointer.x;
                    origY = pointer.y;
                    var pointer = canvas.getPointer(o.e);
                    rect = new fabric.Rect({
                        left: origX,
                        top: origY,
                        originX: 'left',
                        originY: 'top',
                        width: pointer.x-origX,
                        height: pointer.y-origY,
                        angle: 0,
                        transparentCorners: false,
                        stroke: "red",
                        fill:"transparent",
                        strokeWidth: 5
                    });
                    canvas.add(rect);
                }

            });

            canvas.on('mouse:move', function(o)
            {
                if (!mouseClicked) return;
                var pointer = canvas.getPointer(o.e);

                if(mode=="lines")
                {
                      line.set({ x2: pointer.x, y2: pointer.y });
                      canvas.renderAll();
                }

                else if(mode=="rectangles")
                {
                     if(origX>pointer.x){
                        rect.set({ left: Math.abs(pointer.x) });
                     }
                     if(origY>pointer.y){
                        rect.set({ top: Math.abs(pointer.y) });
                     }

                     rect.set({ width: Math.abs(origX - pointer.x) });
                     rect.set({ height: Math.abs(origY - pointer.y) });

                     canvas.renderAll();
                }

            });

            canvas.on('mouse:up', function(o){
              mouseClicked = false;
            });
        }

        function save(){
            var canvas2 = document.getElementById('canvas2');
            var context2 = canvas2.getContext('2d');

            var img=document.getElementById("result");
            context2.drawImage(img, 0, 0, 565, 584);
            context2.drawImage(canvas, 0, 0);

            var canvasData = canvas2.toDataURL();
            //document.write(dataURL);
            document.getElementById('canvasImg').src = canvasData;

        };

    </script>
</body>
</html>

Also I am getting problem with saving the canvas as image. 另外我将画布保存为图像时遇到问题。 The saving code in the given code is my old code which was working fine before I switched to fabric.js . 给定代码中的saving代码是我的旧代码，在我切换到fabric.js之前工作正常。

In the image You can see the outline of the shape which is allowing me to move that shape.,but I don't want that. 在图像中您可以看到允许我移动该形状的形状轮廓。但我不希望如此。 How can I get rid of it. 我怎么能摆脱它。

Answer 1

Hmm, it may seem a tad expensive, but consider setting all other objects on the canvas to have their selectable or evented property set to false . 嗯，它看起来有点贵，但考虑在画布上设置所有其他对象，使其selectable或evented属性设置为false 。 Doing so will ensure that none that they won't react to any mouse input while you're drawing. 这样做将确保在您绘图时不会对任何鼠标输入作出反应。

selectable controls if the object can be physically selected, while evented prevents it from reacting with any events whatsoever. 如果可以物理选择对象，则可selectable控件，而evented可防止它对任何事件做出反应。

As far as your save() function, it looks as if you are accessing the toDataURL() method of the regular HTML5 Canvas API. 就save()函数而言，它看起来好像是在访问常规HTML5 Canvas API的toDataURL()方法。 That may seem to work, but remember that fabric uses two canvas elements behind-the-scenes. 这似乎有用，但请记住，Fabric在幕后使用了两个 canvas元素。 You likely wouldn't be getting the full image. 你很可能无法获得完整的图像。 use the toDataURL method of your fabric.Canvas instance that you declared at the top of your code, and that should be all you need. 使用您在您的代码顶部声明的fabric.Canvas实例的toDataURL方法，这应该是您所需要的。 You won't need to find the context of the canvas or anything like that either. 您不需要找到画布的context或类似的任何内容。

使画布上绘制的形状不可移动（fabric.js）

问题描述

1 个解决方案

解决方案1
0 2014-10-14 04:11:26

使画布上绘制的形状不可移动（fabric.js）

问题描述

1 个解决方案

解决方案1 0 2014-10-14 04:11:26

解决方案1
0 2014-10-14 04:11:26