|
|
在以前的文章使用WPF Resource以及Transform等技術(shù)實(shí)現(xiàn)鼠標(biāo)控制圖片縮放和移動(dòng)的效果里面，介紹了如何在WPF里面移動(dòng)和放大縮小圖片，程序也支持使用滾輪的方式縮放圖片。然而前面文章里介紹的縮放功能只能以圖片中心為原點(diǎn)來(lái)實(shí)現(xiàn)，但是這種功能往往并不是客戶想要的，我們看圖片的時(shí)候，往往都喜歡以鼠標(biāo)放在圖片的焦點(diǎn)為原點(diǎn)進(jìn)行圖片的縮放。
咋看起來(lái)，實(shí)現(xiàn)這個(gè)功能也不是很難， ScaleTransform類里面定義了CenterX和CenterY兩個(gè)屬性就是用來(lái)設(shè)置縮放的原點(diǎn)坐標(biāo)的。將這兩個(gè)屬性分別賦予鼠標(biāo)的X, Y坐標(biāo)值，就可以實(shí)現(xiàn)對(duì)原始圖片，以鼠標(biāo)位置為原點(diǎn)縮放圖片了。但是，請(qǐng)注意，我說(shuō)的原始圖片是指沒(méi)有移動(dòng)之前的圖片，如果圖片縮放并且移動(dòng)了，再次縮放的時(shí)候，就是另外一個(gè)故事了。
畫(huà)個(gè)圖說(shuō)明一下吧，比如下圖里面右下方方塊是一個(gè)WPF程序里面的一個(gè)圖片，大小是40 x 40，里面的黑點(diǎn)是預(yù)備縮放的原點(diǎn)，假設(shè)黑點(diǎn)的坐標(biāo)是（10, 10），在運(yùn)行程序的時(shí)候，用戶首先將方塊移動(dòng)到左邊的位置，當(dāng)然原點(diǎn)（黑點(diǎn)）也移動(dòng)了，假如這個(gè)時(shí)候圖片移動(dòng)了50個(gè)像素。
接著用戶在移動(dòng)后的位置上，將圖片縮放，比如說(shuō)放大了2倍，這個(gè)操作也會(huì)移動(dòng)原點(diǎn)（黑點(diǎn)）在最終圖片的位置。因?yàn)榉糯髨D片，實(shí)際上就是將原始圖片的各個(gè)像素移動(dòng)到新的位置（紅點(diǎn)），這個(gè)時(shí)候，新的原點(diǎn)（紅點(diǎn)）的坐標(biāo)應(yīng)該是（20, 20），相鄰兩個(gè)像素的空間使用插值的方法填充。這個(gè)時(shí)候，
ScaleTransform.ScaleX = 2;
ScaleTransform.ScaleY = 2;
這個(gè)時(shí)候，用戶打算放大圖片當(dāng)中的另外一個(gè)區(qū)域，再放大一倍（即放大到原圖的3倍），下圖里是藍(lán)點(diǎn)，假設(shè)坐標(biāo)是(50, 50)，因?yàn)闊o(wú)論圖片縮放與否，用戶只會(huì)以他在實(shí)際圖片看到的內(nèi)容來(lái)判斷新的縮放焦點(diǎn)：
如果我們直接盲目地將ScaleTransform的各個(gè)屬性設(shè)置為類似下面的值的話：
ScaleTransform.ScaleX = 3;
ScaleTransform.ScaleY = 3;
ScaleTransform.CenterX = 50;
ScaleTransform.CenterY = 50;
就發(fā)生問(wèn)題了， 因?yàn)?/span>ScaleX = 3表示新圖是原圖的3倍，然而我們的原點(diǎn)卻是在2倍圖片上設(shè)置的—原圖的大小只有40 x 40。解決方案當(dāng)然是將藍(lán)點(diǎn)的位置轉(zhuǎn)換回在原始圖片的位置，注意原始圖片應(yīng)該是下圖右下方的圖片，而不是左邊的—用戶最初已經(jīng)移動(dòng)了圖片。
看起來(lái)轉(zhuǎn)換起來(lái)有點(diǎn)麻煩，不過(guò)WPF提供了一個(gè) 函數(shù)TransformGroup.Inverse，可以把轉(zhuǎn)換后圖片上的坐標(biāo)轉(zhuǎn)換會(huì)在原始圖片的坐標(biāo)。當(dāng)然啦，如果你熟悉圖形學(xué)和線性代數(shù)的話，實(shí)際上，圖片的縮放和移動(dòng)就是將原始圖片乘上一個(gè)矩陣，而TransformGroup.Inverse函數(shù)就是執(zhí)行矩陣求逆操作。
下面就是關(guān)鍵代碼：
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>
NET技術(shù)：在WPF里面實(shí)現(xiàn)以鼠標(biāo)位置為中心縮放移動(dòng)圖片，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
