2

HTML5キャンバスの2Dコンテキストで正方形のグリッドを構築しています。グリッドの正方形のサイズが1単位になるようにキャンバスを平行移動および拡大縮小しますが、30ピクセル、たとえば変換されていません。これは、30pxの正方形の10x10グリッドの例です。

これは、テキストという1つのことを除いて正常に機能します。

正方形の中に収まるキャンバスのフォントを指定するには、1未満のフォントサイズを指定する必要があります。

たとえば、「。5px sans-serif」は正方形の半分のサイズにする必要があります（つまり、30pxの変換されていない正方形の場合は「15pxsans-serif」）。これは、少なくともChromeでは失敗し、キャンバスはより大きなデフォルトに戻ります。

私が見つけた唯一の解決策は、テキストを描画するときにキャンバスのスケーリングを元に戻すことです、yuk！

サブピクセルフォント仕様でこれを解決する方法はありますか？（当然、変換後、フォントはまともな大きなフォントになります。サブピクセルのフォントサイズは、キャンバス変換にのみ相対的です）

4

3 に答える 3

2

フォントサイズを0.5pxに設定すると、フォントは半分ピクセル変換されません。スケール値ではなく、絶対値です。

したがって、フォントサイズを拡大縮小されていないサイズとして指定し、コンテキストを拡大縮小し、テキストとグリッドを描画してから、オプションで拡大縮小を削除します。

このデモでは、これが実際に動作していることを示します。
スケールデモ

重要な部分：

ctx.font = '15px sans-serif';
ctx.scale(1/30, 1/30);
ctx.fillText('TEXT', 5, 5);
ctx.strokeRect(0, 0, 30, 30);

デモ例

この例では、左上隅に小さなドットが生成されます。

于 2014-03-28T03:17:07.427 に答える
1

これが難しくなると思った後、変換を使用した簡単な解決策があることに気付きました。

コンテキストが現在複雑な方法で変換されていることを考慮してください。特定の場所にテキストを描画したいと思います(tx,ty)。知っておく必要があるのは、現在の縮尺だけです(scaleX,scaleY)（フォントの小数サイズを計算するには、とにかく知っておく必要があります。次に、（変換された座標系で）変換してから、縮尺を解除してテキストを描画します。

ctx.save();
ctx.translate(tx, ty);
ctx.scale(1/scaleX, 1/scaleY);
ctx.fillText("Some String", 0, 0);
ctx.restore();

テキストサイズに関連する計算を行う必要がある場合は、「スケーリングされていない」座標で行うことができます。

于 2014-03-28T01:33:41.343 に答える
-2

率直に言って、サブピクセルのフォントサイズはかなり無意味です。代わりに、テキストを完全に削除するか、テキスト行を示すために小さな直線で「ギリシャ語」にすることもできます。既知の標準サイズでmeasureText（）を使用して、各行の適切な相対的な長さを取得してから、（読み取り不可能な）テキストの存在を示すためにまっすぐな小さな線を描画します。

于 2012-12-06T23:32:57.133 に答える