WPF缩放问题
在 WPF 中,我有一种曲线编辑器,它由画布顶部的滚动查看器(用于平移)组成,在其中显示键和曲线段(线性、常量和样条曲线)。我正在使用MVVM。另外,我可能有数百个键,彼此之间有段。此外,平移/缩放必须非常平滑且响应灵敏。
在模型(和 ViewModel)中,键具有 XY 位置;段有一个PointCollection
。 在视图中,按键是矩形
,曲线段是多段线
。 所有这些 UI 元素都绑定到 Canvas 的 Top 和 Left 依赖属性。
我遇到的问题是在实现缩放时。 我首先使用插入在滚动查看器和画布之间的视图框
<ScrollViewer>
<Viewbox>
<Canvas/>
</Viewbox>
</ScrollViewer>
平移效果很好,但缩放不是我想要的正确缩放。它进行了“图形”缩放,使所有东西都变得更大,矩形和折线。
我想要的是,当放大时,键(矩形)彼此之间走得更远,而不会变大,并且线段(多段线)在两个键之间延伸,而 StrokeThickness
看起来不会更大。
我想要的解决方案是在更改缩放时在虚拟机中转换所有坐标。
前任: 模型中密钥的位置为 (2,3)。当缩放值为2.0时,键的ViewModel将显示(4,6)的位置。对于段,我将翻译模型的 PointCollection 中的所有点,并将它们放入 ViewModel 的 PointCollection 中。
该解决方案的问题在于,当我有数百个键时,快速放大/缩小时性能可能会变慢。由于更改缩放系数将更改所有 ViewModel 坐标,因此每个 UIElement 都会移动。
我考虑过在 UIElements 上使用 RenderTransform 来应用缩放平移,但它不适用于折线。我可以对折线使用 ScaleTransform,但这会在视觉上拉伸它们。
描述起来相当复杂,因此请随时询问更多详细信息。
关于如何实现这一目标有什么想法吗?
In WPF, I have a sort of Curve Editor, which consists of a scrollviewer (for panning) on top of a canvas, where I display keys, and curve segments (linear, constant and splines). I'm using MVVM. Also, I might have hundreds of keys, with segments between each other. Also, the panning/zooming must be really smooth and responsive.
In the model (and ViewModel), a key has XY positions; segments have a PointCollection
.
In the View, the keys are Rectangle
, curves segments are Polyline
.
All those UI elements are binded to the Canvas' Top and Left dependency properties.
The problem I have is when implementing the zoom.
I first worked with a viewbox that is inserted between the scrollviewer and the canvas
<ScrollViewer>
<Viewbox>
<Canvas/>
</Viewbox>
</ScrollViewer>
Panning worked fine, but the zoom was not the right zoom that I want. It made a "graphical" zoom, which makes everything bigger, rectangles and the polylines.
What I want is, that when zooming in, the keys (rectangles) go farther between each other, without getting bigger, and the segment (Polyline) stretches between the two keys, without the StrokeThickness
looking any bigger.
The solution I was going for is to have all the coordinates translated in the VM when changing the zoom.
Ex:
The key, in the model, has a position of (2,3). When the zoom's value is 2.0, the key's ViewModel will show positions of (4,6). For the segments, I will translate all the Points in the Model's PointCollection, and put them inside the PointCollection of the ViewModel.
The problem with that solution is that it might get slow on performance when zooming in/out quicly when I'll have hundreds of keys. Since changing the zoom factor will change -all- the ViewModels coordinates, and thus every UIElements will get moved.
I thought about the RenderTransform on the UIElements to apply the zoom translation, but it won't work with the Polylines. I could use a ScaleTransform for the polylines, but that will stretch them visually.
It's quite complex to describe, so feel free to ask for more details.
Any ideas on how I could achieve that?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我做了一些与你想要的非常相似的事情。不幸的是,我认为使用 ViewBox 甚至 ScaleTransform 都不会得到你想要的东西。
您可能想考虑创建自己的实现 IScrollInfo 的面板,以便您可以自己处理排列。
希望这有帮助。
I've done something very simliar to what you are wanting. Unfortuantely I don't think you are going to get what you want by using a ViewBox or even a ScaleTransform.
You probably want to look into creating your own Panel that implements IScrollInfo so that you can handle the Arrange yourself.
Hope this helps.