Question

我今天开始使用fabric.js在我的画布上使用不同的模式进行绘制。这意味着当我点击 lines 按钮时，我将能够在画布上绘制直线。当我按矩形按钮时，我将能够使用徒手按钮绘制矩形和相同的颜色。我能够画出所有这些。

问题来了。一旦我绘制任何形状并尝试在旧形状附近绘制其他东西，之前的形状就会变得可移动。

这是我的代码

<%@ 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>

此外，我将画布保存为图像时遇到问题。给定代码中的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

嗯，这看起来有点贵，但考虑在画布上设置所有其他对象，将selectable或evented属性设置为false。这样做可以确保在您进行绘图时，他们不会对任何鼠标输入做出反应。

selectable控制是否可以物理选择对象，而evented则阻止它对任何事件做出反应。

就您的save()函数而言，它看起来好像是在访问常规HTML5 Canvas API的toDataURL()方法。这似乎有效，但请记住，结构在幕后使用两个画布元素。你可能无法获得完整的图像。使用您在代码顶部声明的toDataURL实例的fabric.Canvas方法，这应该就是您所需要的。你不会需要找到画布的context或类似的东西。

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

1 个答案: