WPF-如何在鼠标单击时获得画布位置，而与分辨率和调整大小无关 [英] WPF - How to get canvas position on mouse click independently of the resolution and resizing

问题描述

我在HTML 5 JavaScript的这个主题上发现了很多东西(像这样)，但我在WPF上一无所获.

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

XAML中的canvas元素非常简单:

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

我们通过鼠标单击获取坐标，如下所示:

 点p = Mouse.GetPosition(Cnv); 

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

  ellipse = new Ellipse();ellipse.Fill =笔刷.透明ellipse.Width = 20;椭圆高度= 20;ellipse.Stroke =刷子.灰色;ellipse.StrokeThickness = 1;Cnv.Children.Add(椭圆);Canvas.SetLeft(椭圆，第X-9页);Canvas.SetTop(椭圆，p.Y-5); 

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

有没有一种方法可以以更相对"的形式绘制此椭圆.在画布上的位置?考虑到这些要点，我该如何适当调整画布的尺寸?为此有一个事件处理程序吗?

解决方案

您可以使用Viewbox并注意Image大小是其Source位图的本机像素大小.

 < Viewbox><网格>< Image Source =" ..."Width ="{Binding Source.PixelWidth，RelativeSource = {RelativeSource Self}}""高度="{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 =新椭圆{宽度= 20，高度= 20，填充=画笔.洋红色};Canvas.SetLeft(椭圆，位置X-10);Canvas.SetTop(椭圆，位置Y-10);canvas.Children.Add(椭圆);} 

I found a lot on this subject for HTML 5 JavaScript (like so), but I have found nothing over WPF.

I have a canvas that we are creating for selecting points over a image in that canvas.

The canvas element in XAML is very simple:

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

We are getting the coordinates from mouse click like so:

        Point p = Mouse.GetPosition(Cnv);

Then, we draw something on that point:

        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);

The problem here is, if the user resizes his screen, the canvas will also resize. And of course, the coordinates won't be right anymore.

Is there a way to draw this ellipse in a more "relative" position to the canvas? And how do I proper resize my canvas, considering these points? Is there a event handler for this?

解决方案

You may use a Viewbox and take care that the Image size is the native pixel size of its Source bitmap.

<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>

The mouse event handler places an Ellipse at the click position, regardless of the scaling, and the click position (and Ellipse size) is in bitmap pixel coordinates:

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);
}

这篇关于WPF-如何在鼠标单击时获得画布位置，而与分辨率和调整大小无关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！