您的位置：首页 > 其它

以鼠标为中心对图片进行放大，此文是转载的，楼主看到不怪

2015-06-11 23:42 239 查看

在WPF里面实现以鼠标位置为中心缩放移动图片

在以前的文章使用WPF Resource以及Transform等技术实现鼠标控制图片缩放和移动的效果里面，介绍了如何在WPF里面移动和放大缩小图片，程序也支持使用滚轮的方式缩放图片。然而前面文章里介绍的缩放功能只能以图片中心为原点来实现，但是这种功能往往并不是客户想要的，我们看图片的时候，往往都喜欢以鼠标放在图片的焦点为原点进行图片的缩放。
咋看起来，实现这个功能也不是很难， ScaleTransform类里面定义了CenterX和CenterY两个属性就是用来设置缩放的原点坐标的。将这两个属性分别赋予鼠标的X,
Y坐标值，就可以实现对原始图片，以鼠标位置为原点缩放图片了。但是，请注意，我说的原始图片是指没有移动之前的图片，如果图片缩放并且移动了，再次缩放的时候，就是另外一个故事了。
画个图说明一下吧，比如下图里面右下方方块是一个WPF程序里面的一个图片，大小是40 x 40，里面的黑点是预备缩放的原点，假设黑点的坐标是（10, 10），在运行程序的时候，用户首先将方块移动到左边的位置，当然原点（黑点）也移动了，假如这个时候图片移动了50个像素。

接着用户在移动后的位置上，将图片缩放，比如说放大了2倍，这个操作也会移动原点（黑点）在最终图片的位置。因为放大图片，实际上就是将原始图片的各个像素移动到新的位置（红点），这个时候，新的原点（红点）的坐标应该是（20, 20），相邻两个像素的空间使用插值的方法填充。这个时候，
ScaleTransform.ScaleX = 2;
ScaleTransform.ScaleY = 2;

这个时候，用户打算放大图片当中的另外一个区域，再放大一倍（即放大到原图的3倍），下图里是蓝点，假设坐标是(50, 50)，因为无论图片缩放与否，用户只会以他在实际图片看到的内容来判断新的缩放焦点：

如果我们直接盲目地将ScaleTransform的各个属性设置为类似下面的值的话：
ScaleTransform.ScaleX = 3;
ScaleTransform.ScaleY = 3;
ScaleTransform.CenterX = 50;
ScaleTransform.CenterY = 50;

就发生问题了，
因为ScaleX = 3表示新图是原图的3倍，然而我们的原点却是在2倍图片上设置的—原图的大小只有40 x 40。解决方案当然是将蓝点的位置转换回在原始图片的位置，注意原始图片应该是下图右下方的图片，而不是左边的—用户最初已经移动了图片。

看起来转换起来有点麻烦，不过WPF提供了一个
函数TransformGroup.Inverse，可以把转换后图片上的坐标转换会在原始图片的坐标。当然啦，如果你熟悉图形学和线性代数的话，实际上，图片的缩放和移动就是将原始图片乘上一个矩阵，而TransformGroup.Inverse函数就是执行矩阵求逆操作。

下面就是关键代码：
XAML代码：

<Grid.Resources>

<TransformGroup x:Key="ImageCompareResources">

<ScaleTransform />

<TranslateTransform/>

</TransformGroup>
</Grid.Resources>

<ScrollViewer
HorizontalScrollBarVisibility="Disabled"

VerticalScrollBarVisibility="Disabled" Grid.Row="0" Grid.Column="0"
x:Name="MasterScrollViewer" Margin="5" Background="WhiteSmoke">

<ContentControl x:Name="TestContentControl1"

MouseLeftButtonDown="MasterImage_MouseLeftButtonDown"

MouseLeftButtonUp="MasterImage_MouseLeftButtonUp"

MouseMove="MasterImage_MouseMove"

MouseWheel="MasterImage_MouseWheel">

<Image RenderOptions.BitmapScalingMode="NearestNeighbor"


x:Name="MasterImage" Source="{Binding
Path=MasterImagePath}" Stretch="Uniform"

RenderTransform="{StaticResource ImageCompareResources}"/>

</ContentControl>
</ScrollViewer>
C#代码：

private void MasterImage_MouseWheel(object sender,
MouseWheelEventArgs e)

{

ContentControl image = sender
as ContentControl;

if (image ==
null)
            {
                return;
            }



TransformGroup group = ImageComparePanel.FindResource("ImageCompareResources")
as TransformGroup;

Debug.Assert(group !=
null, "Can't find transform group from image compare panel resource");

Point point = e.GetPosition(image);

double scale = e.Delta * 0.001;
            ZoomImage(group, point, scale);
        }

private static
void ZoomImage(TransformGroup group,
Point point, double scale)
        {

Debug.Assert(group !=
null, "Oops, ImageCompareResources is removed from current control's resouce");


Point pointToContent = group.Inverse.Transform(point);

ScaleTransform transform = group.Children[0]
as ScaleTransform;

if (transform.ScaleX + scale < 1)
            {

return;

}

            transform.ScaleX += scale;
            transform.ScaleY += scale;

TranslateTransform transform1 = group.Children[1]
as TranslateTransform;

transform1.X = -1 * ((pointToContent.X * transform.ScaleX) - point.X);

transform1.Y = -1 * ((pointToContent.Y * transform.ScaleY) - point.Y);
        }


private void MasterImage_MouseMove(object sender,
MouseEventArgs e)

{

ContentControl image = sender
as ContentControl;

if (image ==
null)
            {

return;
            }


if (this.isMouseLeftButtonDown && e.LeftButton ==
MouseButtonState.Pressed)
            {

this.DoImageMove(image, e.GetPosition(image));
            }
        }


private void DoImageMove(ContentControl image,
Point position)
        {

TransformGroup group = ImageComparePanel.FindResource("ImageCompareResources")
as TransformGroup;

Debug.Assert(group !=
null, "Can't find transform group from image compare panel resource");

TranslateTransform transform = group.Children[1]
as TranslateTransform;
            transform.X += position.X -
this.previousMousePoint.X;
            transform.Y += position.Y -
this.previousMousePoint.Y;

this.previousMousePoint = position;
        }

标签:
WPF

绿色通道：
好文要顶关注我
收藏该文与我联系

donjuan
关注 - 4
粉丝 - 262

+加关注

2
0

(请您对文章做出评价)

«
上一篇：关于C#静态函数什么时候被调用的问题
»
下一篇：为WPF程序中的数据（Model）添加编辑功能

posted @ 2009-10-28 23:21
donjuan 阅读(9093) 评论(3)

编辑
收藏

发表评论

#1楼[楼主]
2009-10-28 23:22 |
donjuan

Google了一些资料才解决了这个问题……
支持(0)反对(0)

#2楼16846882009/10/29
0:36:12 2009-10-29 00:36 |
王喆(nasa)

呵呵我开发的一个菜单控件也多次对坐标点进行矫正才得到了想要的效果。：）
支持(0)反对(0) http://pic.cnblogs.com/face/u20522.gif
刷新评论刷新页面返回顶部

注册用户登录后才能发表评论，请
登录或注册，访问网站首页。

【推荐】50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库
【推荐】融云即时通讯云－专注为 App 开发者提供IM云服务
【推荐】如何让你的程序拥有象Excel一样强大的数据编辑功能
【活动】RDS邀您6.5折体验PostgreSQL

<iframe style="DISPLAY: none; VISIBILITY: hidden" src="http://tpc.googlesyndication.com/safeframe/1-0-2/html/container.html"></iframe>

<iframe style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; VERTICAL-ALIGN: bottom; BORDER-TOP: 0px; BORDER-RIGHT: 0px" id="google_ads_iframe_/1090369/cnblogs_blogpost_C1_sitehome_0" height="250" marginheight="0" src="http://tpc.googlesyndication.com/safeframe/1-0-2/html/container.html#xpc=sf-gdn-exp-1&p=http%3A//www.cnblogs.com" frameborder="0" width="300" allowtransparency="" name="1-0-2;52802; <div id=" quot="" google_flash_inline_div="" quot="" style=""position:relative;z-index:1001;width:300px"" div="" id=""google_flash_div"" style=""position:absolute;left:0px;z-index:1001"" object="" classid=""clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"" id=""google_flash_obj"" codebase=""//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"" width=""300"" height=""250"" param="" name="movie" value=""http://static.googleadsserving.cn/pagead/imgad?id=CICAgKDjr6_ElAEQrAIY-gEyCASg6KaSukuF"" param="" name="quality" value="high" param="" name=""AllowScriptAccess"" value=""never"" param="" name=""wmode"" value=""opaque"" param="" name=""FlashVars"" value=""clickTAG=http://www.googleadservices.com/pagead/aclk%3Fsa%3DL%26ai%3DCOdXzgKp5VejdDIux8gXRmoGIAcbLxOkGltmj4IEC0vGBjDwQASDRpeIoYJ2R34_YBaABitqX1gPIAQSpAt4iHAgAoIU-4AIAqAMBqgS7AU_Qpre3k071AHetOZSaDnEufgyY6H6aIqWfrxJCI4soJ4Jx5cogqpTm3LnOS6FujLBUCAi6KMF2cRpO44XPIcs0C1lAKRGGU0kwiAnTAmSXGW5OITQd7VZrbOufRzCPdvDn-M3jFcmU_DtayeDoRPnf_t9xOZiPqgGHUzB_NE5JGWbektgZigPUSGcEIqhfCwBkmCgeBClrhHpllL32tOWL5PKXfiA1_q8onkclHKOmnS9Z3qylg-e5ZpjgBAGIBgGgBgSAB96l6CmoB6a-G9gHAA%26num%3D1%26cid%3D5GhhKopnJ9v_DW8eDM3MXxnf%26sig%3DAOD64_3Y_kdd5czrxeuGZ4vis0RGPKD48Q%26client%3Dca-pub-8579300389988819%26adurl%3Dhttp://vdax.youzu.com/%253Fq%253D150505fHRP63a%2526keyword%253D%2526target%253D%2526placement%253Dwww.cnblogs.com%2526creative%253D69124328238"" object="" data=""http://static.googleadsserving.cn/pagead/imgad?id=CICAgKDjr6_ElAEQrAIY-gEyCASg6KaSukuF"" id=""google_flash_embed"" width=""300"" height=""250"" wmode=""opaque"" flashvars=""clickTAG=http://www.googleadservices.com/pagead/aclk%3Fsa%3DL%26ai%3DCOdXzgKp5VejdDIux8gXRmoGIAcbLxOkGltmj4IEC0vGBjDwQASDRpeIoYJ2R34_YBaABitqX1gPIAQSpAt4iHAgAoIU-4AIAqAMBqgS7AU_Qpre3k071AHetOZSaDnEufgyY6H6aIqWfrxJCI4soJ4Jx5cogqpTm3LnOS6FujLBUCAi6KMF2cRpO44XPIcs0C1lAKRGGU0kwiAnTAmSXGW5OITQd7VZrbOufRzCPdvDn-M3jFcmU_DtayeDoRPnf_t9xOZiPqgGHUzB_NE5JGWbektgZigPUSGcEIqhfCwBkmCgeBClrhHpllL32tOWL5PKXfiA1_q8onkclHKOmnS9Z3qylg-e5ZpjgBAGIBgGgBgSAB96l6CmoB6a-G9gHAA%26num%3D1%26cid%3D5GhhKopnJ9v_DW8eDM3MXxnf%26sig%3DAOD64_3Y_kdd5czrxeuGZ4vis0RGPKD48Q%26client%3Dca-pub-8579300389988819%26adurl%3Dhttp://vdax.youzu.com/%253Fq%253D150505fHRP63a%2526keyword%253D%2526target%253D%2526placement%253Dwww.cnblogs.com%2526creative%253D69124328238"" type=""application/x-shockwave-flash"" allowscriptaccess=""never"" object="" object="" div="" div="" div="" style=""position:relative;width:300px;height:250px;z-index:1000"" div="" --="" if="" ie="" endif="" --="" style="" div="" ul="" li="" margin:0="" padding:0="" abgc="" height:15px="" position:absolute="" right:16px="" text-rendering:geometricprecision="" top:0="" width:15px="" z-index:9010="" abgb="" height:100="" abgc="" img="" display:block="" abgc="" svg="" display:block="" abgs="" display:none="" height:100="" abgl="" text-decoration:none="" style="" div="" id="abgc" class="abgc" dir="ltr" div="" id="abgb" class=""abgb"" div="" div="" id="abgs" class="abgs" a="" id="abgl" class="abgl" href=""https://www.google.com/url?ct=abg&q=https://www.google.com/adsense/support/bin/request.py%3Fcontact%3Dabg_afc%26url%3Dhttp://www.cnblogs.com/killmyday/archive/2009/10/28/1591755.html%26gl%3DCN%26hl%3Den%26client%3Dca-pub-8579300389988819%26ai0%3DCOdXzgKp5VejdDIux8gXRmoGIAcbLxOkGltmj4IEC0vGBjDwQASDRpeIoYJ2R34_YBaABitqX1gPIAQSpAt4iHAgAoIU-4AIAqAMBqgS7AU_Qpre3k071AHetOZSaDnEufgyY6H6aIqWfrxJCI4soJ4Jx5cogqpTm3LnOS6FujLBUCAi6KMF2cRpO44XPIcs0C1lAKRGGU0kwiAnTAmSXGW5OITQd7VZrbOufRzCPdvDn-M3jFcmU_DtayeDoRPnf_t9xOZiPqgGHUzB_NE5JGWbektgZigPUSGcEIqhfCwBkmCgeBClrhHpllL32tOWL5PKXfiA1_q8onkclHKOmnS9Z3qylg-e5ZpjgBAGIBgGgBgSAB96l6CmoB6a-G9gHAA&usg=AFQjCNE-Rpl-277anQi6QUjdaoTFEHSRvQ"" target="_blank" a="" div="" div="" style="" cbc="" background-image:="" url="" http:="" static="" googleadsserving="" cn="" pagead="" images="" x_button_blue2="" png="" background-position:="" right="" top="" background-repeat:="" no-repeat="" cursor:pointer="" height:15px="" right:0="" top:0="" margin:0="" overflow:hidden="" padding:0="" position:absolute="" width:16px="" z-index:9010="" cbc="" cbc-hover="" background-image:="" url="" http:="" static="" googleadsserving="" cn="" pagead="" images="" x_button_dark="" png="" cbc="" cb-x="" height:="" 15px="" position:absolute="" width:="" 16px="" right:0="" top:0="" cb-x="" cb-x-svg="" background-color:="" lightgray="" position:absolute="" cbc="" cbc-hover="" cb-x="" cb-x-svg="" background-color:="" 58585a="" cb-x="" cb-x-svg="" cb-x-svg-path="" fill="" :="" 00aecd="" cbc="" cbc-hover="" cb-x="" cb-x-svg="" cb-x-svg-path="" fill="" :="" white="" cb-x="" cb-x-svg="" cb-x-svg-s-path="" fill="" :="" white="" style="" div="" id=""cbc"" class="cbc" div="" id=""cb-x"" class="cb-x" div="" div="" style="" ddmc="" background:="" ccc="" color:="" 000="" padding:0="" position:absolute="" z-index:9020="" max-width:100="" box-shadow:2px="" 2px="" 3px="" aaaaaa="" ddmc="" left="" margin-right:0="" left:0px="" ddmc="" right="" margin-left:0="" right:0px="" ddmc="" top="" bottom:20px="" ddmc="" bottom="" top:20px="" ddmc="" tip="" border-left:4px="" solid="" transparent="" border-right:4px="" solid="" transparent="" height:0="" position:absolute="" width:0="" font-size:0="" line-height:0="" ddmc="" bottom="" tip="" border-bottom:4px="" solid="" ccc="" top:-4px="" ddmc="" top="" tip="" border-top:4px="" solid="" ccc="" bottom:-4px="" ddmc="" right="" tip="" right:3px="" ddmc="" left="" tip="" left:3px="" ddmc="" dropdown-content="" display:block="" dropdown-content="" display:none="" border-collapse:collapse="" dropdown-item="" font:12px="" arial="" sans-serif="" cursor:pointer="" padding:3px="" 7px="" vertical-align:middle="" dropdown-item-hover="" background:="" 58585a="" color:="" fff="" dropdown-content="" table="" border-collapse:collapse="" border-spacing:0="" dropdown-content="" table="" tbody="" tr="" td="" padding:0="" style="" div="" id=""ddmc"" style=""display:none"" div="" class=""tip"" div="" div="" class=""dropdown-content"" table="" tr="" td="" div="" id=""admute"" class=""dropdown-item"" span="" stop="" seeing="" this="" ad="" span="" div="" td="" tr="" table="" div="" div="" style="" feedback_container="" width:="" 100="" height:="" 100="" position:="" absolute="" top:0="" left:0="" display:="" none="" z-index:="" 9020="" background-color:="" white="" feedback_page="" font-family:="" quot="" arial="" quot="" font-size:="" 13px="" margin:="" 16px="" 16px="" 16px="" 16px="" feedback_title="" font-weight:="" bold="" color:="" 000000="" feedback_page="" a="" font-weight:="" normal="" color:="" 3366cc="" feedback_description="" color:="" 666666="" line-height:="" 16px="" margin:="" 12px="" 0="" 12px="" 0="" feedback_closing="" color:="" 0367ff="" line-height:="" 16px="" margin:="" 12px="" 0="" 12px="" 0="" feedback_logo="" position:="" absolute="" right:="" 0="" bottom:="" 0="" margin:="" 0="" 12px="" 9px="" 0="" feedback_logo="" img="" height:="" 15px="" survey_description="" color:="" 666666="" line-height:="" 17px="" margin:="" 12px="" 0="" 10px="" 0="" survey="" color:="" 666666="" line-height:="" 20px="" survey_option="" input="" margin:="" 0="" vertical-align:="" middle="" survey_option_text="" margin:="" 0="" 0="" 0="" 5px="" line-height:="" 17px="" vertical-align:="" bottom="" survey_option:hover="" background-color:="" lightblue="" cursor:="" default="" style="" div="" id=""cbtf"" class=""feedback_container"" div="" class=""feedback_page"" div="" id=""mtadmas"" div="" class=""feedback_title"" it="" amp="" 39="" s="" gone="" a="" id=""mtadmaundo"" href=""javascript:void(0)"" undo="" a="" div="" div="" class=""survey_description"" what="" was="" wrong="" with="" this="" ad="" div="" div="" class=""survey"" label="" div="" class=""survey_option"" input="" type=""radio"" name=""surveyOptions"" value=""8"" span="" class=""survey_option_text"" inappropriate="" span="" div="" label="" label="" div="" class=""survey_option"" input="" type=""radio"" name=""surveyOptions"" value=""2"" span="" class=""survey_option_text"" repetitive="" span="" div="" label="" label="" div="" class=""survey_option"" input="" type=""radio"" name=""surveyOptions"" value=""7"" span="" class=""survey_option_text"" irrelevant="" span="" div="" label="" div="" div="" div="" id=""mtadmac"" style=""display:none"" div="" class=""feedback_title"" thanks="" for="" the="" feedback="" a="" id=""mtadmback"" href=""javascript:void(0)"" back="" a="" div="" div="" class=""feedback_description"" we="" ll="" review="" this="" ad="" to="" improve="" your="" experience="" in="" the="" future="" div="" div="" class=""feedback_description"" help="" us="" show="" you="" better="" ads="" by="" updating="" your="" a="" href=""http://www.google.com/settings/ads?hl=en"" target=""_blank"" ads="" settings="" a="" div="" div="" id=""ad-feedback-closing"" style=""display:none"" class=""feedback_closing"" div="" div="" div="" id=""mtadmpc"" style=""display:none"" div="" class=""feedback_title"" thanks="" for="" the="" feedback="" a="" id=""mtadmpundo"" href=""javascript:void(0)"" undo="" a="" div="" div="" class=""feedback_description"" we="" ll="" use="" your="" feedback="" to="" review="" ads="" on="" this="" site="" div="" div="" class=""feedback_description"" help="" us="" show="" you="" better="" ads="" by="" updating="" your="" a="" href=""http://www.google.com/settings/ads?hl=en"" target=""_blank"" ads="" settings="" a="" div="" div="" id=""pub-feedback-closing"" style=""display:none"" class=""feedback_closing"" div="" div="" span="" id=""feedback-closing-template"" style=""display:none"" closing="" ad:="" 1="" d="" span="" div="" class=""feedback_logo"" img="" src=""http://static.googleadsserving.cn/pagead/images/google-logo.png"/" alt="" div="" div="" div="" iframe="" scrolling=""no"" frameborder="0" height="0" width="0" src=""http://cm.g.doubleclick.net/push?client=ca-pub-8579300389988819"" style=""position:absolute"" iframe="" quot="" uid="" quot="" :1="" quot="" hostpeername="" quot="" :="" quot="" http:="" www="" cnblogs="" com="" quot="" quot="" initialgeometry="" quot="" :="" quot="" quot="" windowcoords_t="" quot="" :124="" quot="" windowcoords_r="" quot="" :1158="" quot="" windowcoords_b="" quot="" :396="" quot="" windowcoords_l="" quot="" :7="" quot="" framecoords_t="" quot="" :4692="" quot="" framecoords_r="" quot="" :413="" quot="" framecoords_b="" quot="" :4942="" quot="" framecoords_l="" quot="" :113="" quot="" stylezindex="" quot="" :="" quot="" auto="" quot="" quot="" allowedexpansion_t="" quot="" :0="" quot="" allowedexpansion_r="" quot="" :0="" quot="" allowedexpansion_b="" quot="" :0="" quot="" allowedexpansion_l="" quot="" :0="" quot="" xinview="" quot="" :0="" quot="" yinview="" quot="" :0="" quot="" quot="" permissions="" quot="" :="" quot="" quot="" expandbyoverlay="" quot="" :true="" quot="" expandbypush="" quot="" :false="" quot="" readcookie="" quot="" :false="" quot="" writecookie="" quot="" :false="" quot="" quot="" metadata="" quot="" :="" quot="" quot="" shared="" quot="" :="" quot="" sf_ver="" quot="" :="" quot="" 1-0-2="" quot="" quot="" ck_on="" quot="" :1="" quot="" flash_ver="" quot="" :="" quot="" 17="" 0="" 0="" quot="" quot="" quot="" reportcreativegeometry="" quot="" :false="" marginwidth="0" scrolling="no" data-is-safeframe="true" _xhe_src="http://tpc.googlesyndication.com/safeframe/1-0-2/html/container.html#xpc=sf-gdn-exp-1&p=http%3A//www.cnblogs.com"></iframe>

最新IT新闻:

· 互联网+，看准了你再跳哇

· 小米造个3000块的路由器是为了啥

· 百度上线搜索智能化产品“小度机器人”

· 即使是封闭的苹果，也不得不开源了

· 一个小功能，让Android手机使用 20 天

»
更多新闻...

最新知识库文章:
·
领域驱动设计阅读思考

· 程序员不是砌砖工人，他们是作家

· 技术债务偿还计划

· 那些令人喷饭的代码注释：仅以此代码献给...

· 给代码多留一些空间

» 更多知识库文章...

公告

昵称：donjuan

园龄：6年3个月

粉丝：262

关注：4
+加关注

2009年10月

日

一

二

三

四

五

六

搜索

积分与排名

积分 - 167405
排名 - 837

以鼠标为中心对图片进行放大，此文是转载的，楼主看到不怪

在WPF里面实现以鼠标位置为中心缩放移动图片

公告

搜索

常用链接

我的标签

随笔档案

积分与排名

最新评论

阅读排行榜

评论排行榜

推荐排行榜