問題タブ [drawingcontext]

スクロール可能な領域に何千ものグラフィック プリミティブを視覚化するカスタム WPF コントロールに取り組んでいます。コントロールのテンプレートのコア部分は次のとおりです。

パフォーマンスを向上させるために、すべての描画操作は ItemAreaElement の OnRender メソッドで実行されます。鮮明な描画を行うために、初期化コードで次の設定も使用します。

しかし、私の絵にはいくつかの奇妙な問題があります。それらを示すために、ItemAreaElement の定義を次のように単純化しました。

このコードを 282ppi の Ultra-HD 画面 (システム スケール ファクターは 300%) を備えたメインの開発用ラップトップで起動すると、次の画像が表示されます。

または、グリッド線で paint.net を拡大した後:

ご覧のとおり、ItemAreaElement の左端と上端は、コントロールの境界線で部分的に覆われています。そうでなければなりませんか？これを回避するために使用できる設定はありますか?

2 番目の問題は、開始点を含まない行です (「セル」の左上隅を参照してください)。これは予想される動作ですか？もしそうなら、WPFに強制的に開始ピクセルを描画させる方法は?

3 つ目の問題は、緑色の線が交わる場所またはデバイスに依存しないポイント (セルの右下隅) です。ご覧のとおり、この点はギザギザです。その場所には緑色の四角が見えるだけだと思っていました。DrawingContext.DrawLine メソッドを使用してこれを実装できますか? または、マルチポイント ラインなどに特別な設定を加えた、より複雑なジオメトリを使用する必要がありますか?

ところで、このコードを「クラシック」96 ppi モニターと 100% に設定された OS のスケール ファクターを備えたテスト PC で起動すると、状況は右下隅で少し良くなります。

しかし、一番上の行の赤い横線や最初の列の赤い縦線さえ見えません。そこにそれらが表示されることを期待していましたが、コントロールの境界線で覆われていないことを期待していました. これらの問題をすべて解決する方法を知っている場合は、教えてください。

HTMLCanvas要素にアクセスしてフードの下にスタックDrawingContext2D saveする方法はありますか?restore

目的はsave、ベース状態、clipその領域をオフにして、不確定な順序で適用される可能性のある操作を実行できるようにすることclipです（つまりsave、スタックに2〜3つの状態があり、それらを復元しないか、複数回実行される可能性があります）親関数に戻る前に元の状態を失い、スタックに存在しなくなった状態を試行します。)restoresaverestoresaverestore

DrawingContext2DJavaScriptは関数呼び出しごとに少し遅くなり、レンダリングは時間に敏感になる傾向があるため、ラッパークラスなしでこれを行うことをお勧めします。

restore呼び出された関数に依存せずに、呼び出された関数で可能な呼び出しの数を制限できることも素晴らしいでしょう。

通常の TreeView は私のニーズに合わないため、独自の TreeView を作成し、TreeView から継承し、TreeViewItems 間に線を引きます。このようなもの

ここまでは順調ですが、ツリーを作成して描画した後で ReDraw (追加行を削除) したいと思います。現在、線を描画するための DrawingContext を既に提供している OnRender メソッドですべてを行っています。

しかし、コントロールが一度レンダリングされた後は DrawingContext にアクセスできません。ローカル変数に保存されているため、DrawingContext が既に破棄されているため、既に描画されている図形を削除したり、何も再描画したりすることはできません。

Google でもスタック オーバーフローでも、役立つ情報が見つからないか、単に回答がありません (または、何を検索したらよいかわからないだけかもしれません)。最も近い質問は次のとおりです。 WPF

しかし、私はこの単純なプログラムでこのラグの底に到達したいのですが、おそらく私は正しいことをしていないだけです.

UI Element の OnRender() で約 2000 ポイントを線でレンダリングし、基本的に折れ線グラフを作成しています。それはいいのですが、MouseMove でグラフをパンしたいのです。それは問題なく動作しますが、問題は LAG です。マウスでドラッグするときはいつでもスムーズな更新が期待できますが、2000 個のポイントを線で区切って再描画するのは、i5 CPU にとって公園を散歩するようなものだと思います。しかし、自宅のラップトップの低解像度でも、信じられないほど遅い. そこで、パフォーマンス プロファイラーを確認しました。OnRender() 関数はほとんど CPU を使用しません。

レイアウトが変更され、CPU を大量に使用していることがわかりました。

「レイアウト」の完了に最も時間がかかっています

さて、ビジュアル ツリーという言葉をよく耳にしますが、この単純なプロジェクトにはほとんどビジュアルがありません。メイン ウィンドウの単なる UI 要素。そして、それは描画コンテキストを使用しています.描画コンテキストはビットマップのように描画されていると思いましたか、それとも独自のイベント/ヒットボックスなどでUI要素を描画していますか? 私が欲しいのは、UIElement が画像のように動作するだけでなく、マウス イベントも処理するので、全体をドラッグ (またはマウスホイールでズーム) できるからです。

質問:

1. レイアウトが遅さ/遅延を引き起こしている場合、どうすればこれを防ぐことができますか?
2. また、意味のある多くのガベージコレクションに気づきましたが、レンダリング中に発生させたくありません。暇な時にやればいいのに。しかし、どのように？

ソースは次のとおりです。

.cs ファイル

.XAML ファイル

このプログラムのアイデアは、地図の画像を用意し、その地図に黒いキャンバスを重ねることです。次に、ユーザーがキャンバスの一部をクリックすると、スプレー ペイント ツールと同様に、マウスの近くのピクセルがキャンバス上で透明になります。したがって、マップが表示されます (戦争タイプの機能の霧のように)。キャンバスの左上付近をクリックすると、スプレーペイントは意図したとおりに機能しますが、キャンバスをさらに右と下にクリックすると、透明になるピクセルがさらに右と下になります...ここで何が間違っているのでしょうか? コードは次のとおりです。