如何使用Javascript調整或刪除畫布上的一個對象？

Question

是否有任何更改可以在不更改其他設計的情況下從Canvas中移除或調整選定對象的大小。

例如： - 我畫圓圈（僅用於幫助Circle1，circle2，circle3）。 circle1將在其他兩個圓圈的底部。現在我想刪除circle2或重新調整大小。但它不應該影響其他圈子。

而且它沒有使用明確的Canavas方法就可以做到這一點。

它應該像powerpoint設計工作只是繪製和調整大小和刪除。

Answer 1

我不認爲這是可能的，canvas是一個位圖對象，據我所知，你在它上面繪製的任何東西都會更新圖像。

如果你喜歡用圓圈作爲一個對象，你或許應該看看SVG

引文： 「一旦繪製矩形，但事實上，它被畫被系統遺忘如果它的位置是到。被改變，整個場景將需要重新繪製，包括矩形可能覆蓋的任何對象。「

Answer 2

您可以嘗試在單獨的畫布上繪製圓圈。在這種情況下，您所要做的就是擺脫包含圓圈本身的Canvas元素。

當然這意味着你必須使用一些CSS技巧（即z-index和絕對定位）......它也會帶來一些開銷。如果你正在處理足夠數量的對象，這可能是可以接受的。

我同意David對SVG的看法。這可能是一個不錯的選擇。

Answer 3

使用畫布，您必須開始設置自己的框架。我開始了一些關於這個主題的簡單教程，其中包括resizing shapes。

總之，您必須開始跟蹤您繪製的每個對象，以便每次移動時都可以重新繪製它們。

Answer 4

一種可能性是使用像fabric.js這樣的畫布庫，它允許您以編程方式繪製和訪問畫布對象。將畫布內容作爲多個對象可以很容易地動態修改這些對象，而不會影響其他任何內容;移動，調整大小，刪除，克隆，更改屬性（顏色，不透明度等）