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