wfp实现图片移动和缩放(Image以鼠标位置为中心缩放)

xaml中的核心代码:

<Grid Name="ImgGrid" Width="600" ClipToBounds="True">
     <Image  x:Name="ImgCtrl" Source="desktop.jpg" MouseLeftButtonDown="ImgCtrlMouseLeftButtonDown" MouseRightButtonUp="ImgCtrl_MouseRightButtonUp" MouseLeftButtonUp="ImgCtrlMouseLeftButtonUp" MouseMove="ImgCtrlMouseMove" Stretch="Uniform"  MouseWheel="ImgCtrlMouseWheel">
         <Image.RenderTransform>
             <TransformGroup>
                 <ScaleTransform x:Name="mScaleTransForm" ScaleX="1.0" CenterX="0"/>
                 <TranslateTransform x:Name="mTranslateTransform" X="0" Y="0"/>
             </TransformGroup>
         </Image.RenderTransform>
     </Image>
</Grid>

cs文件中核心代码:

	private Point oldPt;
    private void ImgCtrlMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        oldPt = e.GetPosition(ImgGrid);
    }

    private void ImgCtrlMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        oldPt = e.GetPosition(ImgGrid);
    }

    private void ImgCtrlMouseMove(object sender, MouseEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed)
        {
            Point pt = e.GetPosition(ImgGrid);
            mTranslateTransform.X += pt.X - oldPt.X;
            mTranslateTransform.Y += pt.Y - oldPt.Y;
            oldPt = pt;
        }
    }

    private void ImgCtrlMouseWheel(object sender, MouseWheelEventArgs e)
    {
        Point zoomCenter = e.GetPosition(ImgCtrl);
        Point pt = ImgCtrl.RenderTransform.Inverse.Transform(zoomCenter);
        this.mTranslateTransform.X = (zoomCenter.X - pt.X) * this.mScaleTransForm.ScaleX;
        this.mTranslateTransform.Y = (zoomCenter.Y - pt.Y) * this.mScaleTransForm.ScaleY;
        this.mScaleTransForm.CenterX = zoomCenter.X;
        this.mScaleTransForm.CenterY = zoomCenter.Y;
        if(e.Delta>0)
        {
            this.mScaleTransForm.ScaleX *= 1.1;
            this.mScaleTransForm.ScaleY *= 1.1;
        }
        else
        {
            if ((this.mScaleTransForm.ScaleX * 0.9) < 0.1)
                return;
            this.mScaleTransForm.ScaleX *= 0.9;
            this.mScaleTransForm.ScaleY *= 0.9;
        }
    }

    private void ImgCtrl_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
    {
        this.mTranslateTransform.X = 0;
        this.mTranslateTransform.Y = 0;
        this.mScaleTransForm.ScaleX = 1;
        this.mScaleTransForm.ScaleY = 1;
    }

效果:
在这里插入图片描述

几个问题点记录一下:
1.超出边界显示:
解决方法在Image外面的Grid添加ClipToBounds=“True”
2.沿鼠标位置缩放不准
解决方法,还原上一次缩放时候的图片偏移位置,并设置图片缩放中心

Point zoomCenter = e.GetPosition(ImgCtrl);
Point pt = ImgCtrl.RenderTransform.Inverse.Transform(zoomCenter);
this.mTranslateTransform.X = (zoomCenter.X - pt.X) * this.mScaleTransForm.ScaleX;
this.mTranslateTransform.Y = (zoomCenter.Y - pt.Y) * this.mScaleTransForm.ScaleY;
this.mScaleTransForm.CenterX = zoomCenter.X;
this.mScaleTransForm.CenterY = zoomCenter.Y;

3.缩小到一定程度之后图片翻转
解决方法限制最小缩放比例

if ((this.mScaleTransForm.ScaleX * 0.9) < 0.1)
return;
发布了109 篇原创文章 · 获赞 30 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览