Question

我希望允许用户添加形状/调整大小，使用与此页面上的形状面板类似的形状面板：

我已经读过这个并且使用HTML画布似乎是不可避免的。我的问题是允许用户添加每个形状的1个以上，并允许用户调整每个形状的大小。

Answer 1

您可以使用名为FabricJS的JavaScript画布库来实现这一目标。

<强>ᴅᴇᴍᴏ

\r\r\n

var canvas = new fabric.Canvas('c');

function addRectangle() {
   var rectangle = new fabric.Rect({
      top: 65,
      left: 65,
      width: 50,
      height: 50,
      fill: '#03A9F4'
   });
   canvas.add(rectangle);
}

function addTriangle() {
   var triangle = new fabric.Triangle({
      top: 65,
      left: 65,
      width: 50,
      height: 50,
      fill: '#4CAF50'
   });
   canvas.add(triangle);
}

function addCircle() {
   var circle = new fabric.Circle({
      top: 65,
      left: 65,
      radius: 25,
      fill: '#f44336'
   });
   canvas.add(circle);
}

body { margin: 10px 0 0 0 }
canvas { border: 1px solid #ccc }
button { margin-top: 9px }

要了解有关此库的更多信息，请参阅official documentation。

允许用户添加和调整形状大小

1 个答案: