1

HTMLの「ワークスペース」（固定サイズで、テキストや画像を含む絶対位置のオブジェクト）をHTML5キャンバス図面に変換する必要があるアプリケーションに取り組んでいます。.fillText（）などのキャンバス描画メソッドの実装により、要素のテキストをキャンバスに追加するのに非常に苦労しています。つまり、使用されているすべてのCSSルールを取得しているにもかかわらず、キャンバス上のテキストを元のワークスペースオブジェクト内のテキストと同じサイズにすることはできません。

c.font = obj.title.fontStyle+' '+obj.title.fontWeight+' '+obj.title.fontSize+'px + obj.title.fontFamily;

// c = drawing context

ちなみに、要素のフォントサイズはピクセル単位で提供されています。

アプリはhttp://picselbocs.com/projects/goalcandy/にあります。メール入力に「demo@demo.com」、パスワードに「demo」を使用してログインし、左からワークスペースにタイトルのある要素を追加して、「PNGに変換」を押してください。 。テキストサイズがどのように大きくなるかに気付くでしょう。

この苛立たしい問題をどのように回避できますか？

4

2 に答える 2

1

問題が面白いように聞こえるかもしれませんが、実際には完全にばかげていました! したがって、問題が検出され、解決策が 2 秒 (文字通り) で適用されると、答えは信じられないほど単純でした。問題はクロスブラウザの問題ではなく、Chrome のズーム機能にありました。以前、アプリケーションを開いたウィンドウを知らないうちにズームインしていたため、キャンバスの描画がぼやけて表示されていました。解決策：ズームアウト！ %#$%# $@~!@

于 2012-07-04T09:39:12.047 に答える
0

これはキャンバス描画アルゴリズムの制限であり、これを簡単に回避することはできないようです。

参照用にこの質問を参照してください: HTML5 のキャンバス要素のサブピクセル アンチエイリアス テキスト

于 2012-07-03T13:06:59.273 に答える