web-dev-qa-db-ja.com

主要なブラウザのサブピクセル精度の現状はどうなっていますか?

私は高レベルの精度を必要とする描画アプリケーションに取り組んでいますが、主要なブラウザプラットフォーム(HTML Canvas要素とFlashを含む)のどちらが描画要素の両方で最高のサブピクセルレイアウト精度を提供するのか疑問に思っています( CanvasまたはFlashの長方形、ブラウザで絶対に配置されたDIV)、およびテキスト用。

このサイトと他のサイトの両方に、これに関連する投稿がいくつかありますが(下部のリストを参照)、多くはかなり古く、現在の状況を要約したものはありません。

私の理解では、Flashはサブピクセルの配置をネイティブにサポートしており、twipを使用してオブジェクトをピクセルの20分の1に配置します。また、TextLayoutFrameworkを使用すると、この精度はテキストにも拡張されます。ただし、Chromeではこれが正しく機能しないという報告が少なくとも1つあります。誰かがこれを確認できますか?

ブラウザの状況についての私の理解では、Firefox 14+は、ページレイアウトとキャンバス内の両方で、テキストと描画要素のサブピクセル配置をサポートしていますが、これがどれほど正確であるかを確認できませんでした。

Chrome(v21以降)はサブピクセル配置をまったくサポートしていないことを理解しています。

IE9がサブピクセルの配置をサポートしていないことは理解していますが、以下にリンクされているMSブログ投稿からIE10がサポートしているようです。

これにMac/PCの違いがあるかどうかはわかりません。また、Flashの精度がプラットフォームやブラウザによって異なるかどうかもわかりません。

このような要約の質問は議論を引き起こすかもしれないと理解していますが、これは人々が有用な答えを提供するのに十分具体的であると信じており、このスレッドがこれまでの測位精度の状態の参照になることを願っています。

いくつかの参考文献:

http://blogs.msdn.com/b/ie/archive/2012/02/17/sub-pixel-rendering-and-the-css-object-model.aspx

Chrome Canvas でのサブピクセルレンダリング

http://johnblackburne.blogspot.co.uk/2011/11/twips.html

http://ejohn.org/blog/sub-pixel-problems-in-css/

サブピクセルCSSポジショニング

https://productforums.google.com/forum/?fromgroups=#!topic/chrome/pRt3tiVIkSI

37
Jude Fisher

現在、最高の丸めとサブピクセルのサポートは、次点としてIEを使用してMozillaから提供されると期待できます。IEはより微調整される可能性があります、しかし、それらのリリースサイクルは非常に長いため、Mozillaはそれらの先を行く可能性があります。

サブピクセルレイアウトを行う限り、サブピクセルの利点は画面の位置の精度ではなくアンチエイリアシングの問題を改善するため、ウィスプを追いかけている可能性があります。サブピクセルのサポートに関係なく、画像は実際の位置から1ピクセルより正確になることはありません。

一部のブラウザが適切にズームしない理由は、サブピクセルのサポートとは関係ありません。これは、ブラウザが正確な位置と丸めを正しく記憶していないためです。つまり、位置が早まって丸められてしまい、画像の位置がずれてしまいます。

10
Tyler Durden

短い答え:
番号。不可能/文書化されていません。
そして、実験的に決定されたとしても、将来同じであることが保証されるわけではありません。

長い答え:
サブピクセル精度では、入力のキャプチャ/レンダリング方法に関してブラウザ/ OS/HW間で多くの差異があります。最近のほとんどのブラウザでh/wアクセラレーションが有効になっているため、さまざまなオペレーティングシステムでさまざまなブラウザを実行しているさまざまなPC間でレンダリングにさまざまなバリエーションがあります。そのため、共通サンプルのレンダリング出力のわずかに異なる バリエーションによって、すべての一意のユーザーを識別することさえ可能です

基礎となるフレームワークの不一致を心配するのではなく、これらの問題から独立するように描画アプリケーションのUIを設計するのはどうでしょうか。私が今考えることができるいくつかの方法は次のとおりです。

  1. ズーム/拡大レベルで画像を編集できるようにします。

  2. 要素のグリッドにスナップする方法を設計します。

更新:
「ズーム」操作はカスタム実装であり、基盤となるフレームワークの機能ではありません。したがって、ピクセルの1/10のオーダーのサブピクセル精度が必要な場合は、データをレンダリングするWebアプリの一部として10x_zoom()を実装する必要があります。

1番目のピクセル->(0,0)で10x10ピクセル、
2番目のピクセル->(11,11)から始まる10x10ピクセル。

このようにすると、データが非常に拡大されて表示されますが、フレームワークはこれらすべてを幸いにも認識せず、画面上のピクセル(この場合は画像ピクセルの1/10)に正確にレンダリングします。

また、この操作を画像全体に対して一度に実行すると、大量のメモリを消費することに注意することが重要です。したがって、「ズームウィンドウ」内の画像の表示部分に対してのみこれを行うと、プロセスが高速になり、メモリ消費量が少なくなります。

描画Webアプリに実装すると、フレームワークのサブピクセルの不正確さは、ユーザーがいつでもこれらのモードに切り替えて正確な入力を提供できるため、問題にならない場合があります。

2
TheCodeArtist