WPF-如何在鼠标点击时独立于分辨率和大小调整获得画布位置

Question

我在超文本标记语言5 JavaScript上找到了很多关于这个主题的东西（像这样），但是我在WPF上什么也没找到。

我有一个我们正在创建的画布，用于在画布中的图像上选择点。

XAML中的canvas元素非常简单：

        <Canvas x:Name="Cnv" Grid.Column="1" Grid.Row="1" />

我们从鼠标点击中获取坐标，如下所示：

        Point p = Mouse.GetPosition(Cnv);

然后，我们在这一点上画一些东西：

        ellipse = new Ellipse();
        ellipse.Fill = Brushes.Transparent;
        ellipse.Width = 20;
        ellipse.Height = 20;
        ellipse.Stroke = Brushes.Gray;
        ellipse.StrokeThickness = 1;

        Cnv.Children.Add(ellipse);
        Canvas.SetLeft(ellipse, p.X-9);
        Canvas.SetTop(ellipse, p.Y-5);

这里的问题是，如果用户调整屏幕大小，画布也会调整大小。当然，坐标不再正确。

有没有办法在与画布更“相对”的位置绘制这个椭圆？考虑到这些点，我如何正确调整画布的大小？有事件处理程序吗？

Answer 1

您可以使用Viewbox，并注意图像大小是其源位图的本机像素大小。

<Viewbox>
    <Grid>
        <Image Source="..."
               Width="{Binding Source.PixelWidth, RelativeSource={RelativeSource Self}}"
               Height="{Binding Source.PixelHeight, RelativeSource={RelativeSource Self}}"
               MouseDown="ImageMouseDown"/>
        <Canvas x:Name="canvas"/>
    </Grid>
</Viewbox>

无论缩放比例如何，鼠标事件处理程序都会在单击位置放置一个椭圆，并且单击位置（和椭圆大小）以位图像素坐标表示：

private void ImageMouseDown(object sender, MouseButtonEventArgs e)
{
    var pos = e.GetPosition((IInputElement)sender);

    var ellipse = new Ellipse
    {
        Width = 20,
        Height = 20,
        Fill = Brushes.Magenta
    };

    Canvas.SetLeft(ellipse, pos.X - 10);
    Canvas.SetTop(ellipse, pos.Y - 10);
    canvas.Children.Add(ellipse);
}