缩放/滚动到光标答案

【问题标题】：Zoom/scroll to cursor缩放/滚动到光标
【发布时间】：2010-12-04 08:23:52
【问题描述】：

在滚动查看器中放大/缩小图像时遇到问题。当我使用放大按钮时，每次单击按钮时，我都会将图像宽度/高度的双重动画设置为原始大小的 1.25。将比例因子设置为 0.75 的缩小按钮也是如此。到目前为止一切顺利。

问题在于，基于我相对于滚动查看器 id 中心单击的位置，我喜欢向点击点滚动。我基于此计算了一个 delta x/y，用于确定 x 和 y 轴上的滚动方向。

double deltaX = (ClickPosition.X - center.X)
double deltaY = (ClickPosition.Y - center.Y)

现在，在将增量应用于垂直和水平滚动条（也使用双动画进行动画处理）时，我必须考虑图像的当前缩放系数。

当我同时缩放和滚动时，最终位置不会到达我期望的位置。图像缩放的原点似乎总是在图像的 0,0（左上角），所以我不知道如何处理，因此单击中心的左侧比单击更能向左滚动中心的右侧。

例子： http://212.214.41.66/SilverlightZoom/RealQImageMapTestPage.html

来源： http://212.214.41.66/SilverlightZoom/ImageMap.zip

【问题讨论】：

我查看了您的代码。为什么你使用宽度和高度而不是使用缩放变换来缩放图像有什么原因吗？

标签： silverlight zooming scrollviewer

【解决方案1】：

在您的代码中，您通过增加图像的宽度和高度来缩放图像。这将始终发生在左上角附近。但是，如果您使用缩放变换，您可以设置图像应围绕其缩放的点。

<Image x:Name="img" Margin="151,127,208,142" Source="Waterfall.jpg" Stretch="Fill">
                   <Image.RenderTransform>
                   <ScaleTransform x:Name="imagescale" ScaleX="1.2" ScaleY="1.2" CenterX="100" CenterY="100">
                   </ScaleTransform>
                   </Image.RenderTransform>
                   </Image>

此代码示例取自here

这应该使您能够通过将 ClickPosition 绑定到属性来设置缩放比例。

另外一点：我不确定您是否打算像这样进行缩放，但如果您放大 1.25，则应该缩小 1/1.25 而不是 0.75。这将保持缩放不变，您的缩放会随着您的前进而变化（即，如果我放大两次并缩小两次，我将不再有 1 的缩放。）

【讨论】：