現在お絵かきアプリを作っています。html キャンバスを使用します。ユーザーはキャンバスに図形を描くことができます。
今、問題が私に来ます。キャンバスに描いた線を選択したい。選択したら、ドラッグしたり削除したりできます。どうすれば実装できますか? 良いアイデアはありますか？
2764 次
2 に答える
1
canvas を使用した描画アプリケーションのソース コードが含まれている https://github.com/canvimation/canvimation.github.comを参照してください。
このアプリケーションは再コーディングされていますが、新しいコードをオンラインで使用した動作バージョンはまだないことに注意してください。新しいソース コードはstage1ブランチにあります。願わくば、この新しいコードが古いコードよりも理解しやすく、以下で参照されているコードがstage1ブランチからのものであることを願っています。
基本的に、描画された各形状に対して形状オブジェクトが作成されます。これには、形状に関するすべてのデータが含まれます。これには、形状の周りに長方形の境界を与えるパス データやデータが含まれます。「boundarydrop」div をクリックすると、関数 checkBoundary が呼び出され、シフト キーとカーソル位置に関するデータが渡されます。次に、各形状について、最初のチェックはカーソルが形状の境界内にあるかどうかを確認することであり、そうであれば、より洗練されたチェックが実行されます。閉じた形状の場合は、カーソルが形状の内側にあるかどうかがチェックされ、開いた形状の場合はカーソルがパスの近くにあるかどうかがチェックされます。
Shift キーが押されているかどうか、および形状がどのグループに属しているかによって、さらに複雑になります。しかし、基本はそこにあります。
チェックアウトする関数
index.htmlで
シフトダウン
getPosition
scripts/drawboundary.js 内
チェック境界
あります
オンです
scripts/shape.js 内
形
アプリケーションの動作するオンライン バージョンはhttp://canvimation.github.com/にありますが、これは master ブランチの古いコードを使用しており、いくつかのバグがありますが、アプリケーションが何をするかについてのアイデアを得ることができます。
これが役立つことを願っています
于 2012-07-04T10:28:47.637 に答える
0
kinetic.js というライブラリがあり、選択機能を使用してキャンバスに描画した図形を追跡できます。
リンクは次のとおりです: https://github.com/ericdrowell/KineticJS
于 2012-07-04T08:10:12.853 に答える