Silverlight 3 - ScaleTransform 或其他放大画布的方法?
我需要能够使用鼠标滚轮放大和缩小画布。 我已经成功设置了鼠标滚轮处理程序,并且当前正在使用 ScaleTransform 来应用缩放; 然而,缩放并不是以“直观”的方式完成的。
我正在尝试实现与您在 MultiScaleImage、Google Maps/Earth 或 Adobe Acrobat Reader 中看到的相同样式的“缩放”,但不是使用图像,而是使用控件。 过渡不需要“平滑”或动画(除非它是一种更简单的方法),但功能需要相同。
任何想法或想法将不胜感激,并提前致谢!
编辑:我已经设法使用动画“平滑”缩放:
<Canvas.Resources>
<Storyboard x:Name="ZoomStoryboard">
<DoubleAnimation x:Name="ZoomAnimationX"
Storyboard.TargetName="Workspace"
Storyboard.TargetProperty="Canvas.RenderTransform.ScaleTransform.ScaleX"
Duration="0:0:0.2"/>
<DoubleAnimation x:Name="ZoomAnimationY"
Storyboard.TargetName="Workspace"
Storyboard.TargetProperty="Canvas.RenderTransform.ScaleTransform.ScaleY"
Duration="0:0:0.2"/>
</Storyboard>
</Canvas.Resources>
使用以下代码:
_Zoom += (args.Delta / 7);
if (_Zoom < 0.15)
_Zoom = 0.15;
ZoomAnimationX.To = _Zoom;
ZoomAnimationY.To = _Zoom;
ZoomStoryboard.Begin();
ZoomScale.Text = _Zoom.ToString("0.00") + "x";
_PreviousMousePosition = _CurrentMousePosition
但是,问题仍然出现,它正在缩小左上角,而不是像 Google 地图这样的网站,缩放是“围绕”鼠标。
I need to be able to zoom in and out of a Canvas using the mousewheel. I have successfully set up the mouse wheel handlers and am currently using a ScaleTransform to apply the zoom; however, the scaling is not done in an "intuitive" way.
I'm trying to accomplish the same style of "zooming" as you can see in MultiScaleImage, Google Maps/Earth, or Adobe Acrobat Reader--but NOT with an image, with a control. The transition doesn't need to be "smooth" or animated (unless it's an easier approach), but the functionality needs to be the same.
Any thoughts or ideas would be highly appreciated and thanks in advance!
Edit: I've managed to "smooth" the zoom using animation:
<Canvas.Resources>
<Storyboard x:Name="ZoomStoryboard">
<DoubleAnimation x:Name="ZoomAnimationX"
Storyboard.TargetName="Workspace"
Storyboard.TargetProperty="Canvas.RenderTransform.ScaleTransform.ScaleX"
Duration="0:0:0.2"/>
<DoubleAnimation x:Name="ZoomAnimationY"
Storyboard.TargetName="Workspace"
Storyboard.TargetProperty="Canvas.RenderTransform.ScaleTransform.ScaleY"
Duration="0:0:0.2"/>
</Storyboard>
</Canvas.Resources>
with the following code:
_Zoom += (args.Delta / 7);
if (_Zoom < 0.15)
_Zoom = 0.15;
ZoomAnimationX.To = _Zoom;
ZoomAnimationY.To = _Zoom;
ZoomStoryboard.Begin();
ZoomScale.Text = _Zoom.ToString("0.00") + "x";
_PreviousMousePosition = _CurrentMousePosition
However, the issue still arises that it is zooming out of the top-left corner, as opposed to sites like Google Maps where the zoom is "around" the mouse.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您需要根据鼠标位置使用加权平均值作为缩放中心。 换句话说,保留最新的缩放中心(或者如果还没有,只需将其设置为当前鼠标位置)并保留计算缩放中心的次数(第一次缩放后,该次数为 1) 。 每次重新计算缩放中心时,都会增加该变量。
示例代码如下 - deltaZoom 是缩放的程度,centerX 和 centerY 是当前缩放中心,ZoomSteps 是我们缩放的次数,mouseX 和 mouseY 是当前鼠标位置:
已编辑,以便您可以放在下面1.0 缩放级别但仍然存在一些问题(ZoomStep = -1、0 或 1 有时会导致奇怪的抖动)。
You need to use a weighted average as the zoom center based on the mouse position. In other words, keep the latest zoom center (or if you don't have one yet just set it to the current mouse position) and keep the number of times the zoom center was calculated (after the first zoom, that would be 1). Than each time you recalculate the zoom center, increment that var.
Example Code Follows - deltaZoom is how much you're zooming, centerX and centerY are the current zoom center, ZoomSteps is the number of times we've zoomed, and mouseX and mouseY are the current mouse position:
Edited so that you can drop below 1.0 zoom level but there are still some problems (ZoomStep = -1, 0 or 1 sometimes cause weird shakes).