避免在縮放多項式時將中心轉換爲鼠標位置

Question

在我的應用程序中，我在畫布中有一個多邊形（4點=矩形）。我想通過使用鼠標滾輪按比例縮放多邊形。對於我使用此代碼：

double scale = 1.0, factor = 1.01, cX, cY; 

    void polygon_MouseWheel(object sender, MouseWheelEventArgs e) 
    { 
     cX = e.GetPosition(polygon).X; 
     cY = e.GetPosition(polygon).Y; 

     if (e.Delta > 0) scale *= factor; 
     else scale /= factor; 

     polygon.RenderTransform = new ScaleTransform(scale, scale, cX, cY); 
    } 

這工作得很好，當我放置的MousePointer到一個點P（假設P是接近多邊形的左上角點）的多邊形和滾動或下降。所以多邊形根據這一點放大或縮小。但是當我將鼠標指針移動到另一個點Q（靠近右下角）並繼續放大或縮小時，多邊形向左上角移動一個量s。似乎數量s取決於P和Q之間的距離。所以如果P和Q之間的距離很大，則偏移很大。

在這種情況下，期望的行爲是，多邊形不移動，而只是擴展到新點Q.

有沒有人有一個想法，移位的什麼原因？我很感激任何提示。

示例代碼：

<window ...> 
    <Grid> 
     <Canvas Name="canvas1" Background="LightBlue"> 
     <Polygon Points="100,100 100,300 300,300 300,100" Name="polygon" Fill="Black" MouseWheel="polygon_MouseWheel"/> 
    </Canvas> 
    </Grid> 
</Window> 

public MainWindow() 
{ 
    InitializeComponent(); 
} 

double scale = 1.0, factor = 1.01, cX, cY; 

void polygon_MouseWheel(object sender, MouseWheelEventArgs e) 
{ 
    cX = e.GetPosition(polygon).X; 
    cY = e.GetPosition(polygon).Y; 

    if (e.Delta > 0) scale *= factor; 
    else scale /= factor; 

    polygon.RenderTransform = new ScaleTransform(scale, scale, cX, cY); 
} 

Answer 1

好了，繞了一個試圖後，我發現是什麼原因導致這種行爲。 MSDN article of the UIElement.RenderTransform特性說明：

渲染變換不會重新生成佈局大小或渲染大小信息。渲染變換通常用於對元素進行動畫處理或應用臨時效果。例如，該元素可能會在聚焦或蒙上陰影時放大，或者可能會在加載時產生抖動，以引起用戶界面（UI）的那部分視線。

這意味着，多邊形本身或多邊形的點不會被轉換。當應用ScaleTransform時，多邊形的點不會改變，並將保持它們在xaml中的設置。儘管如此，轉換後的多邊形會對鼠標事件作出反應，但鼠標位置會映射到原始邊界。

示例：讓我們看一下上面在xaml中定義的多邊形，並按1.5倍進行縮放。該多邊形顯示爲縮放，並且其點似乎具有值（150,150 150,450 450,450 450,150）。但在內部它仍然具有舊的價值（100,100 100,300,300 300,100）。如果您在縮放的右上角捕捉到鼠標指針的位置，它將是（300,100）而不是（450,150）。

使用鼠標位置作爲縮放的中心會導致縮放的多邊形偏移。

對此的解決方案是縮放多邊形本身的點，而不是使用ScaleTransform：

void Scale(double factor, double centerX, double centerY) 
{ 
    PointCollection pc = new PointCollection(); 

    foreach (Point p in polygon.Points) 
    { 
     Point q = new Point(); 

     q.X = p.X; 
     q.Y = p.Y; 

     q.X -= centerX; // translate 
     q.Y -= centerY; 

     q.X *= factor;  // scale 
     q.Y *= factor; 

     q.X += centerX; // translate back 
     q.Y += centerY; 

     pc.Add(q); 
    } 

    polygon.Points = pc; // polygon is defined in xaml 
} 

我不知道這是做正確的方式，但它爲我工作。