javascript - 何らかの操作の後に再描画するためにJavaScript配列に図形を保存する

Question

私はhtml5でエディターを開発しています。クリックすると、三角形、長方形、六角形、五角形、七角形、線などの図形を作成するためのボタンがあります。次に、回転、反転、元に戻す、やり直しなど、これらの図形に対しても操作を実行したいと思います。これらの描画されたオブジェクトをJavaScript配列などに保存して、キャンバスで操作を実行した後に作成できるようにします。キャンバスでは個々の形状を回転または反転できないため、再描画する必要があります。どうすればこれを達成できますか？前もって感謝します。

Answer 1

あなたが言ったように、コンテキストをクリアして、形状を変更するたびに形状を再描画する必要があります。すべてのコンテキストをクリアして再描画することは必須ではありません。形状が変更された領域を再描画するだけでかまいません。

そのため、シェイプを独自のプロパティとレンダリング メソッドを持つオブジェクトとして (OOP の方法で) 考える必要があります。私がしたいことは、シェイプに変換を適用する別のクラスを作成することです (フリップはちょうど -1 スケールです)。

このようにすると、膨大な作業になる可能性があります (機能を追加すればするほど、コードは複雑になり、アプリケーションの最初の設計は作業中に再考される可能性があります)。私があなたに提案できるのは、すでに仕事をしているフレームワークを使用することです.

たとえば、cgSceneGraphは、開発者が独自のレンダリング メソッドを追加できるように設計されており、それらを操作するための多くのメソッドを提供します。私はフレームワークのデザイナーです。変換を適用する方法や独自のノードを作成する方法について、お気軽にお問い合わせください (チュートリアルと例は既に Web サイトにありますが、お手伝いさせていただきます)。

Answer 2

長方形の画像をクリックすると長方形を描くことができ、楕円をクリックすると楕円を描くことができるプロジェクトがあります。私の形状はオブジェクトとして保存され、キャンバスを使用して描画され、反転、回転などが可能です。元に戻すやり直しを実装していません。

私のプロジェクトはhttp://canvimation.github.com/にあります

私のプロジェクトのソース コードはhttps://github.com/canvimation/canvimation.github.comにあります。

マスター ブランチは、現在の作業コードです。任意のコードを使用したり、プロジェクトをフォークしたりできます。