1

線を作りたいのですが、たとえば線を使って単語を書く場合など、エッジが鋭くなります。Photoshopでは、シャープ度の低いブラシを使用することも、高解像度でズームアウトすることもできます。HTML5のキャンバスラインにも良いトリックはありますか？

        canvas.addEventListener('mousemove', function(e) {
        this.style.cursor = 'pointer';
        if(this.down) {
             with(ctx) {
                beginPath();
                moveTo(this.X, this.Y);
                lineTo(e.pageX , e.pageY );
                strokeStyle = red;
                ctx.lineWidth=1;
                stroke();
             }
             this.X = e.pageX ;
             this.Y = e.pageY ;
        }
    }, 0);
4

1 に答える 1

1

ご存知のように、mousemoveを使用してユーザーにポリラインを描画させると、非常にギザギザの線を描画するポイントのリストが表示されます。

あなたがする必要があるのは：

  • ポイント数を減らす
  • 結果のパスをユーザーの意図した形状に忠実に保ちます。

したがって、「前」から「後」に移動する必要があります。

ここに画像の説明を入力してください

Ramer-Douglas-Peuckerポリゴン簡略化アルゴリズム

これを行うには、Ramer-Douglas-Peucker（RDP）ポリゴン簡略化アルゴリズムを使用します。目的のパスの本質を維持しながら、ポリラインの「ギザギザ」を軽減します。

RDPがどのように機能し、何を実現できるかについての概要は次のとおりです。http: //ianqvist.blogspot.com/2010/05/ramer-douglas-peucker-polygon.html

そして、これがMatthew TaylorのおかげでRDPアルゴリズムのjavascriptの実装です：https ：//gist.github.com/rhyolight/2846020

マシューの含意では、「イプシロン」は、元の「ギザギザ」にどれだけ忠実になりたいかを示す数字です。

于 2013-03-24T17:52:54.143 に答える