如何使用Javascript从画布调整大小或删除一个对象？

Question

是否有任何更改可以从Canvas中删除或调整所选对象的大小而不更改其他设计。

例如： - 我绘制了圆圈（仅用于帮助Circle1，circle2，circle3）。 circle1将是其他两个圆圈的底部。现在我想删除circle2或重新调整大小。但它不应该影响其他圈子。

如果没有使用明确的Canavas方法，那么有任何改变吗。

它应该像powerpoint design一样工作，只需绘制，调整大小和删除。

Answer 1

我不认为这是可能的，canvas就我所知是一个位图对象，你在它上面绘制的任何东西都会更新图像。

如果您想将圆圈用作对象，则可能应该查看SVG

引文： “一旦绘制了矩形，系统就会忘记绘制它的事实。如果要改变它的位置，则需要重新绘制整个场景，包括可能已被矩形覆盖的任何对象。” / p>

Answer 2

您可以尝试在单独的画布上绘制圆圈。在这种情况下，您所要做的就是摆脱包含圆圈本身的Canvas元素。

当然这意味着你必须使用一些CSS技巧（即z-index和绝对定位）......它也会产生一些开销。如果您正在处理足够数量的对象，这可能是可以接受的。

我同意David关于SVG的观点。这可能是个不错的选择。

Answer 3

使用Canvas，您必须开始设置自己的框架。我开始了一些关于这个主题的简单教程，包括resizing shapes。

简而言之，您必须开始跟踪您绘制的每个对象，以便每次移动时都可以重新绘制它们。

Answer 4

一种可能性是使用像fabric.js这样的画布库，它允许您以编程方式绘制和访问画布对象。将画布内容作为多个对象，可以轻松动态地修改这些对象，而不会影响其他任何内容;移动，调整大小，删除，克隆，更改属性（颜色，不透明度等）