WPF には、キーと曲線セグメント (線形、定数、スプライン) を表示するキャンバス上の (パン用の) スクロール ビューアーで構成される一種の曲線エディターがあります。私はMVVMを使用しています。また、何百ものキーがあり、セグメントが互いに区切られている場合もあります。また、パン/ズームは非常にスムーズで応答性が高くなければなりません。
モデル (および ViewModel) では、キーには XY 位置があります。セグメントにはPointCollection. ビューでは、キーはRectangle、カーブ セグメントはPolylineです。これらの UI 要素はすべて、Canvas の Top および Left 依存関係プロパティにバインドされています。
私が抱えている問題は、ズームを実装するときです。私は最初に、スクロールビューアとキャンバスの間に挿入されたビューボックスで作業しました
<ScrollViewer>
<Viewbox>
<Canvas/>
</Viewbox>
</ScrollViewer>
パンはうまくいきましたが、ズームは私が望む正しいズームではありませんでした。「グラフィカルな」ズームを作成しました。これにより、すべてが大きくなり、長方形とポリラインが作成されました。
私が望むのは、ズームインすると、キー (長方形) が大きくなることなく互いに遠くに移動し、セグメント (ポリライン) が 2 つのキー間でStrokeThickness大きく見えることなく伸びることです。
私が目指していた解決策は、ズームを変更するときにすべての座標を VM で変換することです。
例: モデルのキーの位置は (2,3) です。ズームの値が 2.0 の場合、キーの ViewModel は (4,6) の位置を示します。セグメントについては、モデルの PointCollection 内のすべてのポイントを変換し、それらを ViewModel の PointCollection 内に配置します。
このソリューションの問題は、何百ものキーがある場合にすばやくズームイン/ズームアウトすると、パフォーマンスが低下する可能性があることです。ズーム倍率を変更すると、すべての ViewModel 座標が変更されるため、すべての UIElement が移動します。
ズーム変換を適用するために UIElements の RenderTransform について考えましたが、Polylines では機能しません。ポリラインに ScaleTransform を使用することもできますが、それでは視覚的に引き伸ばされてしまいます。
説明するのは非常に複雑ですので、詳細についてはお気軽にお尋ねください。
どうすればそれを達成できるかについてのアイデアはありますか?