1

HTML5キャンバスで自由描画を実装しています。現在、すべてが正常に機能しています。すべてのマウスムーブに moveTo() と lineTo() を使用しています。図面を微調整する必要があります。

急激な動きで曲線のような線を描くと、直線の継ぎ目のように描画されます。描画をよりスムーズにするための別の描画方法はありますか?

4

2 に答える 2

0

描画自体にこれ以上の方法はないと思いますが、描画関数を直接マウス移動イベント ハンドラーに配置すると、速度が低下します。

これを高速化するには、座標をイベント ハンドラーの配列に保存し、マウスの動きが止まるのを待ってから、配列を移動して描画します。

利点は、イベントがより迅速に呼び出されて曲線が滑らかになることです。欠点は、マウスを大きく動かすと「ラグ」が発生することです。

別の方法としては、ユーザーが曲がったタイミングを検出して、適切な曲線描画方法を使用することもできます。

于 2011-08-01T09:28:37.973 に答える
0

私は実際に同じことをしました：

ctx.beginPath();
ctx.moveTo(lp.x-.5, lp.y-.5); // Last recorded position.
ctx.lineTo(cp.x-.5, cp.y-.5); // Current position at time of call.
ctx.stroke();

ベジエ曲線はペンのような (パス) 機能に最適ですが、それによっても意図しない結果になりました。つまり、P0 と P2 の間の曲線が P1 から離れすぎています...これは、余分なポイントを追加することで処理できます。これに対して関数を評価します（アドビが行う方法のように、より高度に評価します）。

私はこの質問に答えるのに 2 日間を費やし、最良の例について多くの調査を行い、可能な場合はコードを引き裂きました。基本的に 2 つの応答があります。

1.) フィルターを適用します。ボックスぼかしまたはガウスぼかしを使用すると、粗いエッジが少し滑らかになり、角度が少なくなります。

2.) ベジエ曲線を適用する –mousedownとmouseupイベントの間で、ポイントの配列をログに記録し、曲線を適用します。線が長いほど、再レンダリングが遅くなります ( Muro - deviantArt のキャンバス アプリはこれを行っているようです)。[注意: 人々が絵を描くための芸術的な Web アプリを作成することを考えている場合は、スムーズなレンダリングが完了するまで元の線を示してください。]

個人的にはその中間が好きです。わずかなぼかしは、特に角の近くで物を柔らかくする傾向があり、ゆっくりと配置された (したがって、頻繁で短い線) をはるかに柔らかくします)。

追加しますが、これは完全に明白かもしれませんので、お詫び申し上げます: キャップのスタイルを「ラウンド」に設定していることを確認してください ––ctx.lineCap = 'round'

于 2011-08-04T17:38:43.617 に答える