是否有在浏览器中创建绘图功能的首选方法？ [关闭]答案

【问题标题】：Is there a preferred way for creating a draw feature in a browser? [closed]是否有在浏览器中创建绘图功能的首选方法？ [关闭]
【发布时间】：2023-03-13 19:05:01
【问题描述】：

我希望能够通过鼠标点击或触摸显示屏在图片上绘制圆圈。如果再次单击/触摸它们，我也想删除给定的圆圈。我知道如何检查给定坐标是否在一个圆圈内。问题是我不知道完成这项任务的最佳方法。 Atm 我正在使用 HTML5 画布使用 .stroke() 函数绘制圆圈，但我不知道如何“存储”这些圆圈，以便在再次单击/触摸时将它们删除。有没有比画布更好的解决方案，或者我是否以正确的方式解决问题？

【问题讨论】：

您是否考虑过改用 SVG？所有元素都在 DOM 中，您甚至可以附加事件处理程序。

标签： javascript html canvas drawing

【解决方案1】：

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

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>

【讨论】：

我同意这是一个更好的解决方案！但是，我现在无法使用浏览器大小缩放圆圈。当我调整浏览器大小时，圆圈保持在完全相同的位置，如果我在不同设备上查看页面，这很麻烦。环顾四周后，我认为 viewBox 可能是一个解决方案，但到目前为止我没有任何运气。