7

キャンバスに偶奇塗りつぶしルールを実装するオープン ソース ライブラリ (JaveScript) はありますか。私がそれを自分で実装しようとすると、それはどれほど複雑になり（複雑な曲線を持つ一般的なケースを考慮して）、パフォーマンスに影響を与えますか（JaveScriptの各ピクセルに対してそれを行うオーバーヘッドによる）。

偶奇フィルをゼロ以外の巻線に変換する方法は何ですか (すべてのケースで機能する一般的なソリューションを考慮して)。私が見つけた方法は、形状をすべての交差しないポリゴンに分割し、それらを別々に塗りつぶすことでした。

1 つのオプションは、SVG を使用してキャンバスに SVG を描画することですが、iPad ではネイティブ SVG レンダリングが少し遅いこともわかりましたが、HTML キャンバス (iPad) に描画しても SVG は遅いですか?

前もって感謝します

4

2 に答える 2

8

しばらく前に同じものを探していたので、この質問に出くわしました。つまり、HTML キャンバス内で「evenodd」塗りつぶしルールを使用します。

少し調査し、メーリング リストとパッチを調べた結果、最近のバージョンの Firefox と Chrome の両方でこれがサポートされていることがわかりましたが、それぞれのブラウザ固有の方法が異なります。

Firefox では、mozFillRule 属性を使用するだけです。例：

//
// Firefox Example
//
// canv has the HTML canvas element
var ctx = canv.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.mozFillRule = 'evenodd';
ctx.beginPath();
ctx.moveTo(100, 10);
ctx.lineTo(40, 180);
ctx.lineTo(190, 60);
ctx.lineTo(10,60);
ctx.lineTo(160,180);
ctx.closePath();
ctx.fill();

Chrome では、文字列evenoddをパラメーターとしてfillメソッドに渡すことでこれを行います。例：

//
// Chrome Example
//
// canv has the HTML canvas element
var ctx = canv.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.beginPath();
ctx.moveTo(100, 10);
ctx.lineTo(40, 180);
ctx.lineTo(190, 60);
ctx.lineTo(10,60);
ctx.lineTo(160,180);
ctx.closePath();
ctx.fill('evenodd');

これらは私が調査した 2 つのブラウザーなので、他のブラウザーでの状態についてはわかりません。うまくいけば、そう遠くない将来に、現在HTML 標準fillRuleの一部となっている属性を介してこの機能を使用できるようになるでしょう。

于 2013-03-31T13:54:18.330 に答える
3

fill() メソッド APIを参照してください。

   void ctx.fill();
   void ctx.fill(fillRule);
   void ctx.fill(path, fillRule);

fillRule は "nonzero" または "evenodd" にすることができます
--- "nonzero " : 非ゼロのワインディング ルール。これがデフォルトのルールです。
--- "evenodd" : 偶奇巻規則。

ブラウザの互換性:
--- IE 11 以降、Firefox 31 以降、Chrome は問題ありません。
--- IE 9/10 ではテストしていません。
---ctx.mozFillRule = 'evenodd';古い Firefox 30/30- で使用します。

キャンバス fillRuleevenodd 非ゼロ

于 2016-01-29T21:08:38.833 に答える