1

マウスをドラッグしてキャンバスに描画するだけのキャンバスペイントツールを作成しています。私が理解しているように、ラインは仕事に最適な方法です。そのため、マウス ダウンで KineticJS Line オブジェクトを作成し、ユーザーがドラッグすると、最後のマウス位置と現在の位置の間にポイントを追加します。複数のポイントを持つ線オブジェクトが 1 つしかないことに注意してください。

ユーザーがマウスを放すと線が完成し、もう一度クリックしてさらに描画すると、新しい線オブジェクトが作成されます。

これに関する問題は、テキストを描画する場合、「私の名前は x」と言うと、各文字に 1 つ (および「x」と「i」に 2 つ) の多数の線オブジェクトが生成されることです。

これを行うより良い方法はありますか？私のアイデアは、線オブジェクトを1つだけ持つことでした.onmousedownでは、前の位置から線を追加せず、ドラッグすると追加します。しかし、KineticJS Line がそれをサポートしているとは思いません。

基本的に、ユーザーに描画させる方法を改善できますか?

4

1 に答える 1

1

1 つの文字を定義する 1 ～ 2 つのポリラインを持つ現在の設計は問題ありません。

canvas と Kinetic はどちらも、パフォーマンスが低下する前に文字の段落全体をサポートできます。

文全体に対して 1 つの定義が必要な場合は、カスタムの Kinetic.Shape を使用できます。

Shape を使用すると、ラップされたキャンバス コンテキストに完全にアクセスできます。そのコンテキストを使用して 2 番目のアイデアを実行できます。保存された moveTo コマンドと lineTo コマンドのセットを使用して文を描画する単一の context.path です。

個人的には、現在のデザイン (キャラクターごとに 1 ～ 2 ポリライン) を使用します。パフォーマンスが優れており、柔軟性が向上するからです。（たとえば、人の名前を別の色で描きたい場合は、現在のデザインの方が簡単です）。

于 2013-10-14T16:05:48.017 に答える