如何使用Fabric.js创建多个形状

How do I create multiple shapes with Fabric.js?

本文关键字：创建 何使用 Fabric js      更新时间：2024-03-23

我希望能够使用双击在画布上创建多个矩形。但是，我只能创建一个矩形。还有，有没有一种方法可以为创建的每个矩形添加一个ID？我希望能够在任何时候访问我想要的任何矩形，并更改其属性。

var i=0;
function drawRectangle() {
   if (rectClickToggle) {
          getMouse(event);
          var canvas = new fabric.Canvas('drawArea');
          canvas.add(new fabric.Rect({width:20,height:20,fill:'#f55',top:my,left:mx}));
          canvas.item(i).set({borderColor:'red',cornerColor:'green',cornerSize:6,transparentCorners: false});
          canvas.setActiveObject(canvas.item(i));   
          i++;
       }
  }
 drawArea.ondblclick = drawRectangle;

每次调用drawRectangle函数都是在重新定义画布。尝试将该代码移动到drawRectangle函数之外。

编辑-用于绘制许多矩形。

var canvas = new fabric.StaticCanvas('canvas-ele');
canvas.setHeight(300);
canvas.setWidth(300);
var drawRect = function(e) {
    canvas.add(new fabric.Rect({
            left: e.x - 10,
            top: e.y - 10,
            fill: 'rgba(100,0,0,0.3)',
            width: 72,
            height: 72,
            stroke: 'black'
        })
    );
};
var canvasEle = document.getElementById('canvas-ele');
canvasEle.ondblclick = function (e) {
    drawRect(e);
};
canvas.renderAll();

试试小提琴http://jsfiddle.net/coryasilva/Y5fu5/

***顺便说一句，我不建议使用双击；这会导致糟糕的用户体验）

编辑#2

我现在更明白了。这是怎么回事？

http://jsfiddle.net/Y5fu5/3/

相关文章：