HTML5 画布上的用户可编辑矢量形状答案

【问题标题】：User Editable Vector Shapes on a HTML5 CanvasHTML5 画布上的用户可编辑矢量形状
【发布时间】：2017-09-07 20:48:26
【问题描述】：

我希望能够在 HTML5 Canvas 元素上绘制一些基本的矢量形状。

用户应该能够使用鼠标直接绘制任何这些：

方形
圆
多边形

在画布上 - 这些稍后将用于图像上的热点。

重要的是，用户应该能够通过直接在画布内单击来绘制这些矢量形状。

是否有现有的图书馆可以帮助解决这个问题？

如果没有库，请认为我是一位经验丰富的网页设计师，对 javascript 有很好的了解，但我对向量编程的经验很少。我可以去哪里解决这个问题，以便我可以构建我需要的东西？

【问题讨论】：

fabricjs.com
I have built a circle drawing app.
@Phil 我最终使用了fabricjs - 添加这个作为答案，我会给你打勾
@jimmery 完成（：

标签： javascript html canvas

【解决方案1】：

fabricjs.com 在这种情况下是你的朋友 ;)

【讨论】：

【解决方案2】：

您可以将这个小 sn-p 用于您的第一次实验......

对于您必须使用的个别圈子：

mousedown (getCoordinates) mouseup (getCoordinates)

计算这两点之间的距离，即半径。

为 Square、Circle 和 Polygon 构建一个 html 选项列表。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <style>
    canvas{border:1px solid #ccc;}
  </style>
</head>
<body>
  <canvas id="myCanvas" width="200" height="200"></canvas>

  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    function getMousePos(canvas, evt) {
      var rect = canvas.getBoundingClientRect();
      return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
      };
    }
    canvas.addEventListener('click', function(evt) {
            var mousePos = getMousePos(canvas, evt);
            context.beginPath();
            context.arc(mousePos.x,mousePos.y,5,0,2*Math.PI);
            context.stroke();
          }, false);
  </script>
</body>
</html>

【讨论】：