iT邦幫忙

0

C# NET6 WPF 動態新增按鈕跟著圖片的相對位置縮放

  • 分享至 

  • xImage

我想要讓新增後的按鈕
在圖片縮放時 可以跟著大放縮小
然後位置可以不動
假如 圖片大小為1 按鈕的位置在(100,100)
圖片大小為2 按鈕的位置也會在這張圖的(100,100)
然後 按鈕的大小會 * 2
像下面這張 兩顆按鈕的位置 都是固定在這張圖的相對位置
https://imgur.com/m2Sb6IN

目前效果圖片 https://imgur.com/IMsggLN

放大縮小的程式碼 如需其他的我再補充

private void IMG_MouseWheel(object sender, MouseWheelEventArgs e)
{
    var img = sender as ContentControl;
    if (img == null)
    {
        return;
    }

    var point = e.GetPosition(img);
    var group = IMG.FindResource("Imageview") as TransformGroup;
    var delta = e.Delta * 0.001;
    DowheelZoom(group, point, delta);

    var transform = group.Children[0] as ScaleTransform;
    if (transform == null)
    {
        return;
    }

    // 更新動態新增按鈕的位置和大小
    foreach (Button button in dynamicButtons)
    {
        var buttonPosition = button.TranslatePoint(new System.Windows.Point(0, 0), img);
        var scaledPosition = new System.Windows.Point(buttonPosition.X * transform.ScaleX, buttonPosition.Y * transform.ScaleY);
        Canvas.SetLeft(button, scaledPosition.X);
        Canvas.SetTop(button, scaledPosition.Y);
        //button.Width = button.Width * transform.ScaleX;
        //button.Height = button.Height * transform.ScaleY;
    }
}

        //鼠标滑轮事件
private void DowheelZoom(TransformGroup group, System.Windows.Point point, double delta)
{
    var pointToContent = group.Inverse.Transform(point);
    var transform = group.Children[0] as ScaleTransform;
    if (transform.ScaleX + delta < 0.1) return;
    transform.ScaleX += delta;
    transform.ScaleY += delta;
    var transform1 = group.Children[1] as TranslateTransform;
    transform1.X = -1 * ((pointToContent.X * transform.ScaleX) - point.X);
    transform1.Y = -1 * ((pointToContent.Y * transform.ScaleY) - point.Y);
}

XAML 的部分

<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" Background="SkyBlue" Cursor="SizeAll" Focusable="False" x:Name="BackFrame" >
    <ContentControl
        MouseLeftButtonDown="IMG_MouseLeftButtonDown"   
        MouseLeftButtonUp="IMG_MouseLeftButtonUp" 
        MouseRightButtonDown="IMG_MouseRightButtonDown"   
        MouseRightButtonUp="IMG_MouseRightButtonUp"
        MouseMove="IMG_MouseMove"
        MouseWheel="IMG_MouseWheel">
        <Canvas x:Name="BtnCanvas" Grid.Row="1" Background="LightGray" AllowDrop="True" Drop="Canvas_Drop">
            <Image x:Name="uploadedImage" Source="{Binding window.ImageFullName}" RenderTransform="{StaticResource Imageview}" Stretch="Uniform" RenderOptions.BitmapScalingMode="NearestNeighbor" ></Image>
        </Canvas>
    </ContentControl>
</ScrollViewer>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答