我想要讓新增後的按鈕
在圖片縮放時 可以跟著大放縮小
然後位置可以不動
假如 圖片大小為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>