3

私は現在このチュートリアルを使用しており、完全に機能していますが、私の唯一の懸念は少し遅いことです. 600x600 のキャンバスがあり、塗りつぶしツールを使用すると、キャンバスを塗りつぶすのに約 2 秒かかります。Microsoft Paint では、このサイズのキャンバスを塗りつぶすのは瞬時であり、そのサイズの 10 倍 (6000x6000) のキャンバスを塗りつぶすのは、約 1 秒で、さらにわずかに短くなります。

これは JavaScript と canvas 要素の単なる制限ですか、それとも MS Paint のようなデスクトップ プログラムの速度に近づくように最適化できますか? Firebug でプロファイリングしたところ、この関数が主なボトルネックの 1 つに思えますが、反復ごとに実行する必要があるため..

function matchStartColor(pixelPos, startR, startG, startB) {
    var r = colorLayerData.data[pixelPos];
    var g = colorLayerData.data[pixelPos + 1];
    var b = colorLayerData.data[pixelPos + 2];

    return (r == startR && g == startG && b == startB);
}
4

2 に答える 2

3

MS ペイントはネイティブ コード (マシン コードに変換された C または C++) で記述されており、これははるかに高速であり、正しく記述されていれば、canvas/javascript よりも効率的にレンダリングできます。また、MS ペイントがコンピューターのハードウェアのビデオ レンダリング機能を使用する可能性があることも考慮してください。キャンバスがほとんどのブラウザーでデフォルトで使用するとは思えません。

また、MS ペイントの塗りつぶしアルゴリズムは、使用しているアルゴリズムとは異なる場合があります。何かを達成するには、常に複数の方法があります。単純な行ごとのスキャンを試して、白いピクセルを塗りつぶしてみましたか? ベンチマーク目的のためだけに試すことができます。

于 2012-06-14T19:46:18.620 に答える
0

私もこのチュートリアルに従いました。このアルゴリズムは、定義済みの画像では機能しません。キャンバスに描画したものに対してのみ機能します。

于 2012-09-09T21:02:27.887 に答える