javascript - EaselJSラインのあいまいさ

Question

HTML5キャンバスのAPIとしてEaselJSを使用しています。

次のコードに気づきました。

line.graphics.setStrokeStyle(1).beginStroke("black").moveTo(100,100).lineTo(200,200);
stage.addChild(line);

...次の行を生成します：

太さを1に設定しましたが、線はまだぼやけています。スナップショットでズームインすると、実際に3ピクセルを占めていることがわかります。キャンバスが2つのピクセルの間に点を描くところを読んだと思います。そのため、実際には両方のピクセルが色付けされます。また、ポイントを描画する場所をピクセル幅の半分だけシフトして、ピクセル全体に配置する必要があります。

アプリケーションには鮮明な画像が必要です。アドバイスしてください。

Answer 1

EaselJS はキャンバス API の単なる抽象化であり、指定された座標にすべての線を描画します。snapToPixel API は、特に自動丸めを行うためのものですが、説明している半ピクセルの問題は考慮されていません。

ベスト プラクティス アプローチは、すべてをコンテナーに入れ、コンテナーを正または負 (0.5,0.5) に配置することです。これにより、すべてが調整され、すべての計算をオフセットするのではなく、通常の座標空間で作業できます。