是否有在浏览器中创建绘图功能的首选方法？

Question

我希望能够通过单击鼠标或触摸显示器在图片上绘制圆圈。如果给定的圈子再次 clicked/touched，我也想删除它们。我知道如何检查给定坐标是否在圆内。问题是我不知道完成这项任务的最佳方法。 Atm 我正在使用 HTML5 canvas 通过 .stroke() 函数绘制圆圈，但我不知道如何 "store" 这些圆圈所以我可以删除它们clicked/touched 再次。是否有比 canvas 更好的解决方案，或者我是否以正确的方式解决问题？

Answer 1

这是一个基于 SVG 而不是 canvas 的解决方案。您可能会考虑一个好处：它易于存储和检索，因为它是自描述的。

makeSVG = (tag, attrs) => {
    let el = document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (var k in attrs) el.setAttribute(k, attrs[k]);
    return el;
}

$(() => { 
  let $svg = $('svg')
  
  $('svg image').on('click', e => {
    let x = e.pageX - $svg.offset().left;
    let y = e.pageY - $svg.offset().top;
    
    var circle= makeSVG('circle', {cx: x, cy: y, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
    
    $svg.append(circle);
  })
  
  $('svg').on('click', 'circle', e => {
    $(e.currentTarget).remove()
  })
})

html, body {
  padding:0;
  margin:0;
  height:100%;
  width:100%;
  position: relative;
}

svg {
  height:100%;
  width:100%;
  border: 1px solid red;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="100%" width="100%"/>
</svg>

是否有在浏览器中创建绘图功能的首选方法？

Is there a preferred way for creating a draw feature in a browser?

html

javascript

drawing

canvas