問題タブ [subpixel]

長くなるほど細くなるはずの線があります。問題は、ピクセルが薄くなるとジャンプがはっきりと見えることです。Androidでサブピクセルレンダリング/アンチエイリアスを実行する方法はありますか？

canvas.drawRect()float値を取りますが、それらを無視します。コードは次のとおりです。

ペイントオブジェクトがANTI_ALIAS_FLAG有効になり、単色が含まれています。

これがデフォルトの行です。

これは、それが長くなり、薄くなるときです。全体の移行をスムーズにするように見えますが、側面にアンチエイリアシングが必要です。

ドキュメントによると、 CATextLayer 内でフォント スムージングを有効にすることが可能です。

Text can only be drawn using sub-pixel antialiasing when it is composited into an existing opaque background at the same time that it's rasterized.

これが私がこの文をどのように理解するかです：

これは機能しません。テキストは、サブピクセル アンチエイリアシングを使用して描画されません。

C++ と OpenCV を使用して単純な「レーザー ライン」スキャナーを開発しています。これまでのところ、レーザー ラインの中心を 1 ピクセルの精度で検出できるので、可能な「サブ ピクセル」関数/アルゴリズムの開始点があります。(レーザーラインの幅は約 15 ～ 20 ピクセルです)

今、これをサブピクセルの精度に改良することに興味があります。OpenCVにはサブピクセル検出機能があることは知っていますが、私が知る限り、これらはコーナーを検出するためだけのものです。

誰か提案があれば、聞きたいです。

いくつかの情報;

• システム: QT フレームワーク、C++、OpenCV ライブラリ

• カメラ; モノクロ（無彩色）、赤フィルター搭載

• 画像解像度; 2560×1920

• 注: 1 つの画像のみがレーザー ラインに対して分析されます。

何らかの理由で、私が使用している Oracle の JDK のどのバージョンでも、サブピクセルではなくグレースケール ヒンティングを使用しています。私は、Netbeans 7.3 と Dev nightly+JDK 8 を使用してこれに気づいています。

Cfr. これらの写真:

左が JDK 6、右が JDK 8 (JDK 7 と同じ動作)

他の例は、ここに拡大されています。

Netbeans にサブピクセル ヒンティングを強制的に使用させるにはどうすればよいですか? FAQ hereにも従いましたが、あまり運がありませんでした。

Apple の JDK が OS X のフォント レンダリング用に微調整されていることは知っていますが、サブピクセルではなくグレースケールのヒントを得ているのも奇妙です。

行で 829 ピクセルを占めるコンテナーがあり、同じサイズの背景画像があります。

そのコンテナ内に、829px コンテナに基づいて幅を計算する div があります。Safari では、div の幅は 173.8px のようになりますが、Safari/Webkit では切り捨てられるため、切り捨てられて幅が 173px になります。

この 829px コンテナには、同じ行にインラインで 3 つの div があります。最初の div では 1px が失われ、2 番目では 2px が失われ、3 番目では 3 ピクセルが失われるため、3 番目の div は 3 ピクセル左にシフトされます。iPad では、6 ピクセルが失われます。

サブピクセル レンダリングの問題を検索しようとしましたが、john resigs の記事とその他の SO の質問を読みましたが、解決策が見つかりませんでした。

Google で次の記事を見つけました: http://www.pixafy.com/blog/2013/05/css-subpixel-rendering/#more-310 自分の状況に適用しようとしましたが、そうしないとうまくいかないコンテナ 829px で計算された幅を設定します。

私に何ができる？

chromium プロジェクトの問題のリストを見てみると、その多くはクロスプラットフォームのテキスト レンダリングの問題です。プラットフォームのテキスト レンダリング システムを使用し、それぞれの特異性に対応しなければならないのは大変な作業だと思います。

単純に FreeType ライブラリを使用して、それで完了しないのはなぜですか? FreeType は、Linux、iOS、Android などのプラットフォームで使用されています。したがって、これらのプラットフォームでは、ブラウザはとにかくラップされた FreeType ライブラリを使用しています。そのラッピングを破棄し、Windows と Mac でプラットフォームが提供するレンダリングを破棄し、純粋な FreeType に移行しないのはなぜですか?

私が思いつく唯一の答えは、Windows および Mac が提供するレンダリングが提供するグリフのハードウェア アクセラレーションによる合成とブレンディングを利用することではないかということです。

あるいは、サブピクセル アンチエイリアシングの特許が期限切れになる前に WebKit が移植されたため、サブピクセル アンチエイリアシングされたテキストを取得する唯一の方法は、プラットフォームが提供するレンダリングを使用することだったのかもしれません。

これらのどちらかが正しいですか？そうでない場合、どのような場合ですか？

10 進数の幅 (250.5 ピクセルなど) の div と、その中に幅 100% のテーブルがあります。何らかの理由で、Chrome はテーブルの幅の小数部分を切り捨てます (例: 250.5px から 250px)。ページがレンダリングされると、div は切り上げられ、テーブルの右側と div の右側の間に 1 ピクセルのギャップがあります。代わりに div をネストすると、この問題は発生しません。

なぜこれが起こるのですか?テーブルに小数部分を保持させる方法はありますか? Chrome でのみ問題が発生しています。IE10は問題ないようです。

問題のデモ @ http://jsfiddle.net/7UrHa/

HTML:

CSS

流体グリッドでこの奇妙な問題に遭遇しました。Chrome と Firefox ではすべて問題なく表示されますが、Ios とデスクトップ サファリではグリッドが整列しません。これは、ブラウザがサブピクセルをレンダリングする方法が異なるためだと思います。私の質問は、誰かがこれに対する回避策を持っているかどうかです?

ここで実際の例を参照してください: http://codepen.io/anon/pen/eFyIl

私は、より大きなプロジェクトで抱えている問題を抽出する次のフィドルを持っています

http://jsfiddle.net/zhaocnus/6N3v8/

Firefox と Safari では、このアニメーションは奇数のズーム レベル (Mac では Ctrl+/- または Cmd+/- を使用してズームイン/アウト) で左右にジッタリング効果を持ち始めます。これは、サブピクセル レンダリングの問題と、さまざまなブラウザーの違いにより、ズームの計算中にピクセルが切り上げられたり切り下げられたりするためだと思いますが、修正方法がわからず、提案を探しています。

IE7 などのレガシー ブラウザーをサポートする必要があるため、最新の CSS3 アニメーション機能を使用できません。

（以下のフィドルのコードは、それなしでは投稿できないようですが、CSSとHTMLなしでは意味がありません）