Javascriptを使用して1つのオブジェクトをキャンバスからサイズ変更または削除するにはどうすればよいですか？

Question

キャンバスから選択したオブジェクトを削除またはサイズ変更する変更はありません。他のデザインを変更する必要はありません。

例： - 描いた円（ヘルプサークル1、サークル2、サークル3）。 circle1は他の2つの円の下になります。今度はcircle2やre-sizeを削除したいと思います。しかし、他のサークルに影響を与えるべきではありません。

Canavasの明確な方法を使用せずにこれを変更してください。

パワーポイントデザインのように、描画してサイズを変更して削除するだけです。

Answer 1

canvasは私が知っている限りビットマップオブジェクトであり、描画するものはイメージを更新します。

あなたがオブジェクトとして円を使用したい場合は、おそらくSVG

になります引用：四角形を描画されると 」、それが描かれたという事実は、システムによって忘れられてその位置がした場合。変更するには、矩形で覆われていた可能性のあるオブジェクトを含め、シーン全体を再描画する必要があります。

Answer 2

別のキャンバスで円を描くことができます。この場合は、サークル自体を含むCanvas要素を取り除くだけです。

もちろん、これはあなたがいくつかのCSSトリッキー（つまりZ-インデックスと絶対的な位置付け）を使わなければならないことを意味します...また、いくらかのオーバーヘッドが発生します。これは、適切な量のオブジェクトを扱っている場合は容認できるかもしれません。

私はSVGについてDavidに同意します。それは良い選択肢かもしれません。

Answer 3

キャンバスでは、独自のフレームワークの設定を開始する必要があります。私は、resizing shapesを含む、この件に関する簡単なチュートリアルをいくつか始めました。

要するに、描画した各オブジェクトの追跡を開始する必要があるため、何か動きがあるたびに再描画することができます。

Answer 4

fabric.jsのようなキャンバスライブラリを使用して描画することができます。はキャンバスオブジェクトにプログラムでアクセスします。キャンバスのコンテンツを多数のオブジェクトとして持つことで、他のものに影響を与えることなく、それらのオブジェクトを動的に変更することが容易になります。変更、削除、複製、プロパティの変更（色、不透明度など）