38

私は高レベルの精度を必要とする描画アプリケーションに取り組んでおり、主要なブラウザー プラットフォーム (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

4

2 に答える 2

10

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

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

一部のブラウザーが正しくズームしない理由は、サブピクセルのサポートとは関係ありません。正確な位置を記憶しておらず、正しく丸められていないためです。言い換えれば、それらは位置を時期尚早に丸めているため、画像の位置がずれます。

于 2012-09-18T19:59:05.360 に答える
2

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

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

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

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

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

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

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

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

また、この操作を画像全体に対して一度に行うと、大量のメモリが消費されることに注意してください。したがって、「ズーム ウィンドウ」内の画像の可視部分のみに対してこれを行うと、処理が高速になり、メモリを集中的に使用するプロセスが少なくなります。

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

于 2012-09-19T07:02:37.567 に答える