問題タブ [visual-artifacts]

円とテキストで SVG グループを描画しています。アニメーションの一部として、グループを拡大または縮小します。グループが比較的小さくスケーリングされると、すべてがうまく見えます。ただし、非常に小さくなると、厄介なアーティファクトが発生し始めます。

以下に例を示します。右側の円は問題ありませんが、円が非常に小さくなると、左側にテキスト アーティファクトが表示されます。

以下は、アーティファクトの原因となる SVG コードの例です。これはFirefoxでのみ発生するようです。

この StackOverflowの回答を使用して、列ヘッダーが行ヘッダーとして表示され、新しい DataGrid 行が列 (水平 DataGrid) として表示されるように DataGrid を回転させました。

DataGrid のスタイルには、ScrollContentPresenter と 2 つの ScrollBar (垂直と水平) で構成される ControlTemplate があります。ScrollContentPresenter の CanContentScroll が「true」に設定されているため、セルは物理的ではなく論理的にスクロールします。この ControlTemplate からの抜粋を以下に示します。

このグリッドの水平スクロールは期待どおりに機能します。ただし、垂直スクロールは依然として物理的に発生し、セルが画面外にスクロールされる (または画面に戻る) ときに、セルの一番上の行に奇妙な視覚的アーティファクトが発生します。アーティファクトのスクリーンショットはこちら.

下にスクロールすると、セルの上部が画面外に移動すると、セル (TextBlock) のコンテンツが消えます。セルを垂直方向にスクロールし続けると、背景色が水平方向に「消去」されます。

グリッドに適用している変換は次のとおりです。

DataGridCells に適用されるスタイル:

列ヘッダーに適用されるスタイル:

DataGrid に適用されるスタイル:

RenderTransform ではなく、すべて LayoutTransform があります。Transforms は、スクロール中にセルの計算された DisplayHeight に影響を与え、実際に画面外になる前に「消える」原因になっているようです。(補足: 論理スクロール (CanContentScroll = true) は、DataGridCells の仮想化を無効にします)。

私の目標は、論理的にスクロールするか、レンダリングの問題を修正することによって、垂直スクロールのアーティファクトを排除することです (推奨)。

編集:私の質問は次のとおりです:回転したデータグリッドのスクロールによるこれらの視覚的なアーティファクトをどのように排除できますか?

私は回転メッシュに取り組んでいますが、回転の特定の段階を除いて、ほとんどの部分で問題なく動作します。例えば：

前

間に

後

ご覧のように、OpenGL が目の前にあるものに対する意識を変えるようです。面白いことに、前と後の段階はどちらも「正常」に見えますが、お互いの反転のようなものです。(トリッピーな光学効果ですが、私が望んでいたものではありません。)

GLKit を使用して iOS 6 でプログラミングしています。

問題がセットアップと描画コードにあるのか、回転の仕方に関係があるのか​​ わかりません。どんな洞察も大歓迎です。

再プロの手順:

• フロー レイアウト パネルを空の Windows フォームに追加します。
• 自動スクロールを有効にします。
• 100 ～ 200 個のカラー パネルを配置します。
• 上下にスクロールしてみてください。

引き裂き/アーチファクトを観察します。これを解決するにはどうすればよいですか?

コード：

それでおしまい

Three.js を使用していますが、状況によっては問題が発生しました。
これが問題です: http://i60.tinypic.com/1zz6jac.png

私は調査を行い、これが CanvasRenderer の問題であることを知っています。WebGLRenderer を使用せずにこれを解決する方法はありませんか?

WebGLRenderer を使用しようとしましたが、 CanvasRenderer を中心にスクリプトを作成したため、さらに問題が発生
しました。スクリーンショットの立方体の下のグリッドに表示されます。

スプライトが定期的に再描画されるブラウザ/JavaScript ベースのゲームに取り組んでいますが、そうすると再描画のたびに奇妙な線が作成されます。もちろん、各フレームの後に穴のビューを再描画させることもできますが、パフォーマンスが大幅に低下します。これを修正する他の方法はありますか？

そのため、キャンバス上に多数のスプライトを等角図で描画するために狡猾な方法を使用しています。これらのスプライトを削除すると奇妙な線が表示され、それらを表示させる方法を探しています。

コメントがそうであるように、どんな提案も役に立ちます

パワーポイントのプレゼンテーションに含めるために、0.02 fps の 1 時間のビデオを 10 fps のような非常に短いビデオ (100 倍のスピードアップ) に変換しようとしています。

これは私がしました ：

うまく機能し、VLCまたはSMPlayer（デコードにffmpegライブラリを使用していると思います）でうまく再生できます。しかし、Windows Media Player で再生したり、PowerPoint プレゼンテーションに挿入したりすると、多くのアーティファクトが発生し、ビデオはほとんど見られなくなります。

パワーポイントでこれを視聴可能にする方法はありますか (問題はパワーポイントで使用されるビデオ レンダラーにあると思います...)

これに対する簡単な解決策があるかどうか疑問に思っています。libGDX And​​roid プロジェクトで、スプライト バッチとビットマップ フォントを使用してテキストをレンダリングしています。テキストは問題なくレンダリングされますが、いくつかの文字の後にいくつかの微妙な灰色の斑点ができてしまいます。これを解消したいと考えています。もう少しコンテキスト。Hiero を使用して生成された太字のコミック sans フォント (今のところ) を読み込んでいます。フォントのテクスチャの minfilter と magfilter を線形に設定しました。また、コードのどの時点でもフォントを拡大または縮小していませんが、後で必要になる場合があります。参照用のスクリーンショットを次に示します: http://i824.photobucket.com/albums/zz161/9bjames/Screenshot_zpseac8c515.png (少し拡大する必要がある場合があります)。

私はそれを調べて、これを見つけました：BitmapFont render artifacts、しかし、より迅速な修正があるかどうか疑問に思っていました...または少なくとも「ハッキー」ではない修正が1つありました。たとえば、ディスタンス フィールド フォントやカスタム シェーダーを使用すると、何か効果がありますか? ありがとう、さらに情報が必要な場合はお知らせください。その間、引き続き調べてみます。

-クイック編集: デフォルトのテクスチャ フィルター (最も近い) を使用すると、スケールアップしない限り、灰色の斑点が改善されることがわかりました。TextureFilter.Nearest を使用すると、一般的に品質も低下するようですが、より重要な部分が機能している間は、今のところ問題ありません。任意の推奨事項を引き続きいただければ幸いです。

私は現在、線を作成して作成後に変更できる小さなベクター描画プログラムを開発しています (これらの線はカスタム QGraphicsItem に基づいています)。たとえば、下の図は、線の左端 (黄色でマーク) の点を画面の右側にドラッグするとどうなるかを示しており、効果的に線が長くなります。

ポイントをゆっくり動かすとすべて正常に動作しますが、急速に動かすといくつかの視覚的なアーティファクトが表示されます。

再描画を呼び出すために使用しているコードmouseMoveEventは、次のコード行を保持する再定義されたメソッドにあります。

メソッドにboundingRect追加すると次のようになるため、私の定義にはpainter->drawRect(boundingRect())明らかに問題はありません。paint

QGraphicsItem::ItemIsMovableまた、単純に行を移動する (フラグを立てる) 場合も、急激に移動しても問題ありません。

ここで何が起こっているか知っている人はいますか？私の推測では、updateすぐに呼び出されていないためmouseMoveEvent、再描画が発生する前に複数回呼び出すことができます。おそらく以前の呼び出しをキャンセルしますか? わからない。

もちろん、簡単な修正はQGraphicsView、ラインを保持しているオブジェクトのビューポート モードを に設定するQGraphicsView::FullViewportUpdate)ことですが、それは醜い (そして遅い) ものです。

.png「アイコン」の色を変更するために、必要な色を動的に使用できるように、背景画像として透明を使用しようとしています。

40px x 40px の .png があります。background-image を使用して div に適用し、同じ div に background-color を指定します。

これは通常は問題なく動作するため、これで何が起こっているのかわかりません。最新バージョンの Chrome で、Mac と PC で (それぞれ) 表示されるスクリーン ショットを次に示します。

マック

パソコン

編集:これは、私が抱えている問題を示す、サイトの簡素化されたバージョンです:

私はフィドルを作ってみました（とにかくここにあります）が、フィドルはクロムで完全に表示されますが、実際のサイトでは表示されません。私はこれや何かにパーセンテージを使用しておらず、背景にネイティブサイズを使用しています - 他の誰かがこの問題を抱えていますか?