在以前的文章使用WPF Resource以及Transform等技術(shù)實現(xiàn)鼠標(biāo)控制圖片縮放和移動的效果里面，介紹了如何在WPF里面移動和放大縮小圖片，程序也支持使用滾輪的方式縮放圖片。然而前面文章里介紹的縮放功能只能以圖片中心為原點來實現(xiàn)，但是這種功能往往并不是客戶想要的，我們看圖片的時候，往往都喜歡以鼠標(biāo)放在圖片的焦點為原點進行圖片的縮放。

　　咋看起來，實現(xiàn)這個功能也不是很難， ScaleTransform類里面定義了CenterX和CenterY兩個屬性就是用來設(shè)置縮放的原點坐標(biāo)的。將這兩個屬性分別賦予鼠標(biāo)的X, Y坐標(biāo)值，就可以實現(xiàn)對原始圖片，以鼠標(biāo)位置為原點縮放圖片了。但是，請注意，我說的原始圖片是指沒有移動之前的圖片，如果圖片縮放并且移動了，再次縮放的時候，就是另外一個故事了。

　　畫個圖說明一下吧，比如下圖里面右下方方塊是一個WPF程序里面的一個圖片，大小是40 x 40，里面的黑點是預(yù)備縮放的原點，假設(shè)黑點的坐標(biāo)是（10, 10），在運行程序的時候，用戶首先將方塊移動到左邊的位置，當(dāng)然原點（黑點）也移動了，假如這個時候圖片移動了50個像素。

　　接著用戶在移動后的位置上，將圖片縮放，比如說放大了2倍，這個操作也會移動原點（黑點）在最終圖片的位置。因為放大圖片，實際上就是將原始圖片的各個像素移動到新的位置（紅點），這個時候，新的原點（紅點）的坐標(biāo)應(yīng)該是（20, 20），相鄰兩個像素的空間使用插值的方法填充。這個時候，

ScaleTransform.ScaleX = 2;

ScaleTransform.ScaleY = 2;

　　這個時候，用戶打算放大圖片當(dāng)中的另外一個區(qū)域，再放大一倍（即放大到原圖的3倍），下圖里是藍點，假設(shè)坐標(biāo)是(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)換后圖片上的坐標(biāo)轉(zhuǎn)換會在原始圖片的坐標(biāo)。當(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)以鼠標(biāo)位置為中心縮放移動圖片，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。