0

形状をレンダリングするためにキャンバスを使用しているより大きな Web アプリケーションに取り組んでいます。ここで、塗りつぶされていない四角形 ( ) のレンダリングに問題がありますstroke: '#fff', fill: false。境界線の半径は常に 1px です。小さな例で再現できました。境界線の半径を設定rx: -1, ry: -1すると消えますが、ドットが表示されます (ピクセルが 2 回描画されるため):

http://jsfiddle.net/NmWvY/1/

黒四角はrx: 0, ry: 0あり、赤は ありrx: -1, ry: -1。

どうすればこれを修正できますか?

こんにちは、
CK

4

1 に答える 1

1

FabricJS ソースに目を通すと、fabric.Rectオブジェクトは次のように描画されます。

...
ctx.moveTo(x+rx, y);
ctx.lineTo(x+w-rx, y);
ctx.quadraticCurveTo(x+w, y, x+w, y+ry, x+w, y+ry);
ctx.lineTo(x+w, y+h-ry);
ctx.quadraticCurveTo(x+w,y+h,x+w-rx,y+h,x+w-rx,y+h);
ctx.lineTo(x+rx,y+h);
ctx.quadraticCurveTo(x,y+h,x,y+h-ry,x,y+h-ry);
ctx.lineTo(x,y+ry);
ctx.quadraticCurveTo(x,y,x+rx,y,x+rx,y);
ctx.closePath();
...
this._renderStroke(ctx);

rxつまり、 andの有無はry、パスが作成されることを妨げないため、ストロークされます。rxとryが null の場合でも、デフォルトで に設定され0ます。

strokeWidthプロパティは、がまたはでないlineWidth場合にパスをストロークする を設定します。strokefalsenull

ストロークの幅を変更してみてください。strokeWidthストロークの幅が常に であるという問題が正確に何であるかは明確ではありませんが1px、これは役立つはずです。

于 2013-05-23T07:50:13.693 に答える