問題タブ [subpixel]

canvas 要素がテキストをアンチエイリアスする方法に少し混乱しており、皆さんが助けてくれることを願っています。

次のスクリーンショットで、上の「Quick Brown Fox」は H1 要素で、下の要素はテキストがレンダリングされたキャンバス要素です。下部には、両方の「F」が並べて配置され、ズームインされているのがわかります。H1 要素が背景とどのように調和しているかに注目してください。

キャンバステキストをレンダリングするために使用しているコードは次のとおりです。

キャンバス上のテキストを H1 要素と同じようにレンダリングすることはできますか? そして、なぜそれらは異なるのですか？

Flashでテキストを操作するとき、次の問題が発生することがよくあります。

http://www.aino.se/media/i/subpixel.png

これにより、テキストがさまざまな色で「輝き」ます。これを回避する良い方法はありますか？サブピクセルレンダリングと関係がありますが、修正方法がわかりません。私は利用可能なオプションのほとんどを試しました。

私はこれまでJavaの描画方法を使用したことがないので、PoCとしてアナログ時計を作成することにしました。手に加えて、分/時間の目盛りが付いた文字盤を描きます。単純なsin/cos計算を使用して、円の周りの線の位置を決定します。

しかし、細かい目盛りが非常に短いため、線の角度が間違っていることに気づきました。これは、Graphics2D.drawLine()とLine2D.double()メソッドの両方がサブピクセルの精度で描画できないためだと確信しています。

中心から始まり、円でマスクして（より長く、より正確な線を作成するために）線を引くことができることは知っていますが、それはそのようなエレガントでコストのかかる解決策のようです。私はこれを行う方法についていくつかの調査を行いましたが、私が遭遇した最良の答えはを使用することAffineTransformです。AffineTransformスーパーサンプリングを実行する必要があるのではなく、回転ありのみを使用できると思います。

これは、サブピクセル精度で描画する唯一の/最良の方法ですか？または、潜在的に高速なソリューションはありますか？

編集：私はすでにオブジェクトにを設定しRenderingHintていGraphics2Dます。

要求に応じて、ここにコードの一部を示します（これは単なるPoCであったため、完全には最適化されていません）。

これが図面のスクリーンショットです。少し見づらいかもしれませんが、59分間目盛りを見てください。それは完全に垂直です。

Canvas でテキストを描画していますが、アンチエイリアスの品質にがっかりしています。私が確認した限りでは、ブラウザは Canvas 上のテキストのサブピクセル アンチエイリアス処理を行っていません。

これは正確ですか？

これは、結果のテキストが他の DOM 要素によってレンダリングされたテキストほど鮮明ではない iPhone と Android で特に顕著です。

Canvas に高品質のテキストを出力するための提案はありますか?

ジュベール

ClearTypeのようなサブピクセル フォント レンダリングにより、フォントの表示解像度が大幅に向上し、画面の読みやすさが向上します。フォントのサブピクセル レンダリング (一般的に) をプログラムするにはどうすればよいですか? また、これを iPad (C、C++、または iOS デバイスの Objective-C) で実現するにはどうすればよいですか? iPad では特定のサイズでフォントがかなりぼやけてしまいますが、iPad のディスプレイがこのテクニックでうまく機能することはわかっています...

では、iPad 用のフォント レンダリング エンジンを開発するにはどうすればよいでしょうか (たとえば、サブピクセルにアクセスするにはどうすればよいでしょうか? OpenGL を使用しますか? Mac OS X?)?

Chrome や Safari (Windows) などの Web キット ブラウザーは、em 値を最も近いピクセルに丸める傾向があることに気付きましたが、Firefox、IE、? オペラ？サブピクセル値を使用できます。これは通常は大きな問題ではありませんが、em を使用して文字間隔を正確に揃えたり、さまざまなクライアントの解像度で一貫した効果を得るためにテキスト シャドウを使用したりすると、頭痛の種になります。次のテストケースを見てください。

FF では最小の文字にもまだ影があることがわかりますが、Chrome では em 値がゼロに切り捨てられ、最初の 2 つの段落には影がありません。

編集これはユニットに関するものではありません。0.03em を 0.9、0.8、0.7 .. pxに置き換えると、 FF はますます小さな影を表示しますが、Chrome が 1px を下回ると、突然何も表示されなくなります。

1px よりも細く、IE6+ で動作し、画像ではなく視覚的に適切にレンダリングされる境界線を持つことは可能ですか?

ありがとうございました。

OpenCVpythonラッパーを使用して次の関数を実行するのに問題があります。

これをiPythonon（OSX）で実行すると、次のエラーが発生します。

TypeErrorトレースバック（最後の最後の呼び出し）/ Users / katherinescott / simplecv-git / SimpleCV / sampleimages / in（）----> 1 cv.cornerSubPix（grayImg、corners、（11,11）、（-1、-1 ）、（cv.CV_TERMCRIT_ITER | cv.CV_TERMCRIT_EPS、10、0.01））

TypeError：numpy配列ではありません

上記のオブジェクトをnumpyndarrayにキャストするほとんどすべての順列を試しましたが、役に立ちませんでした。私の推測では、このエラーは用語基準オブジェクトに存在しますが、それが何を求めているのかについて私は途方に暮れています。OpenCV Pythonラッパーを使用してキャリブレーションを実行しようとしたときに、他の誰かがこの問題に遭遇しましたか？私は私が見つけることができるものを見るために情報源を掘り下げ始めようとしています。

プログラムまたはその他の方法で、Cocoa で記述された単一のアプリケーションのサブピクセル アンチエイリアシングを無効にする方法はありますか。グローバル ユーザーの既定値を設定してレベルを設定したり、外部モニターで強制的にオンにしたりすることもできますが、他のユーザーにも配布できるアプリごとのソリューションが必要です。

画面上で画像を移動する必要があるシステムがあります。現在pngを使用しており、目的の画面座標に配置しています。

画面解像度と必要なフレームレートの組み合わせにより、画像がまだ完全なピクセルを移動していないため、一部のフレームは同一です。残念ながら、画面の解像度は交渉できません。

サブピクセルレンダリングがエッジを滑らかにするためにどのように機能するかについての一般的な理解はありますが、シェーディングを使用して1ピクセル未満で画像を変換する方法に関するリソース（存在する場合）を見つけることができませんでした。

理想的には、これはどの画像でも使用できますが、円やリングのような単純な形状でのみ可能であれば、それも許容されます。