HTML5 Canvas上的用户可编辑矢量形状

我希望能够将一些基本矢量形状绘制到HTML5 Canvas元素上。HTML5 Canvas上的用户可编辑矢量形状

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

广场
圈
多边形

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

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

是否有一个现有的库，将有助于此？

如果没有图书馆，可以考虑我是一位经验丰富的网页设计师，他对JavaScript有很好的了解，但是我对编程向量很少有经验。我去哪里解决这个问题最好的地方在哪里，我可以建立我需要的东西？

来源

2017-05-30 Jimmery

http://fabricjs.com/ – Phil

[我建立了一个圆圈绘图应用程序。（https：//开头WWW .w3schools.com/code/tryit.asp？filename = FG4J46SUXVGF） –

@Phil我结束了最后使用fabricjs - 添加此作为答案，我会给你打勾 – Jimmery

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

来源

2017-09-07 12:46:52 Phil

您可以使用您的第一个实验这个小片段...

个人的圈子，那么必须使用：

鼠标按下（getCoordinates）鼠标松开（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>

来源

2017-05-30 09:30:35

HTML5 Canvas上的用户可编辑矢量形状

回答

相关问题