当前位置: 首页 > 知识库问答 >
问题:

如何在画布上的鼠标单击位置添加节点?

诸超
2023-03-14

现在我有一个应用程序,可以让用户单击按钮浏览用作画布背景的图片。我想这样做,如果用户单击画布上的某个地方,则在该点放置一个节点。我假设我需要获取鼠标坐标。有没有一个简单的方法可以调用将节点放置在鼠标单击位置,或者我必须在这个链接中选择路线:WPF-使用鼠标事件在画布上绘图?提前谢谢。

编辑:添加了我尝试制作椭圆的代码。不过它不起作用,而且我不确定如何使用鼠标点击椭圆的坐标。我知道对于一行来说,它只是. x1=电流点。x等。

画布的XAML代码:

<Canvas Margin="0,45,2,8" x:Name="canvas1">
</Canvas>

画布背景制作代码:

    private void BrowseButton_Click(object sender, RoutedEventArgs e)
    {
        OpenFileDialog dlg = new OpenFileDialog();
        dlg.InitialDirectory = "c:\\";
        dlg.Filter = "Image files (*.jpg)|*.jpg|All Files (*.*)|*.*";
        dlg.RestoreDirectory = true;

        if (dlg.ShowDialog() == System.Windows.Forms.DialogResult.OK)
        {
            string selectedFileName = dlg.FileName;
            ImageBrush brush = new ImageBrush();
            brush.ImageSource = new BitmapImage(new Uri(selectedFileName));
            canvas1.Background = brush;
            BitmapImage bitmap = new BitmapImage();
        }
     }

    //This is the method for adding the ellipse.
    private void addNode_MouseDown(object sender, MouseButtonEventArgs e)
    {
        Point currentPoint = new Point();
        if (e.ButtonState == MouseButtonState.Pressed)
            currentPoint = e.GetPosition(this);

        Ellipse ellipse = new Ellipse();

        SolidColorBrush mySolidColorBrush = new SolidColorBrush();

        mySolidColorBrush.Color = Color.FromArgb(255, 255, 255, 0);
        ellipse.Fill = mySolidColorBrush;
        ellipse.Width = 10;
        ellipse.Height = 10;

        canvas1.Children.Add(ellipse);

    }

共有1个答案

毋宪
2023-03-14

找到了答案。我必须在addNode\u MouseDown方法中使用此选项:

        Canvas.SetLeft(ellipse, e.GetPosition(canvas1).X);
        Canvas.SetTop(ellipse, e.GetPosition(canvas1).Y);

然后我就在画布上订阅了它。

 类似资料:
  • 问题内容: 将click事件处理程序添加到canvas元素(将返回click的x和y坐标)(相对于canvas元素)的最简单方法是什么? 不需要旧版浏览器兼容性,Safari,Opera和Firefox都可以。 问题答案: 这个答案很老了,它使用检查不再需要的旧浏览器,因为和属性在所有当前浏览器中都有效。您可能想查看PatriquesAnswer,以获得更简单,最新的解决方案。 最初的答案: 正如

  • 本文向大家介绍html5-canvas 检测鼠标在画布上的位置,包括了html5-canvas 检测鼠标在画布上的位置的使用技巧和注意事项,需要的朋友参考一下 示例 本示例将说明如何获取鼠标相对于画布的位置,例如(0,0)HTML5 Canvas的左上角。的e.clientX和e.clientY将获得相对于文档的顶部位置的鼠标,来改变这种是基于画布的顶部,我们减去left,并right从客户端X和

  • 问题内容: 您好,我正在开发最后一年的项目应用程序,但是我对HTML5的使用经验不足。 我正在尝试创建一个简单的画布,用于在开始时加载图像,并且在加载图像时,我希望能够在图像上放置标记,例如google maps如何放置标记…。最有可能是图像,但我需要计算X和Y位置并显示放置在原始加载的图像上的每个标记的坐标..... 标记可以以数组形式存储在javascript中,也可以以ajax形式存储,因为

  • 问题内容: 我正在尝试用鼠标在HTML5画布上绘制,但是似乎正常工作的唯一方法是,如果出于某种原因,如果我更改了画布位置,那么画布是否位于0,0(左上角)的位置它的绘制效果不理想。这是我的代码。 HTML部分 我已经读过一种方法可以在JavaScript中创建一个简单的函数来获得正确的位置,但是我不知道该怎么做。 问题答案: 简单的1:1方案 对于canvas元素与位图大小相比为1:1的情况,可以

  • 问题内容: 有没有一种方法可以将位置鼠标插入标签?我想要相对于而不是整个页面右上角的位置。 问题答案: 最简单的方法可能是向canvas元素添加onmousemove事件侦听器,然后您可以从事件本身获取相对于画布的坐标。 如果您只需要支持特定的浏览器,则完成此任务很简单,但是f.ex之间存在差异。Opera和Firefox。 像这样的东西应该适用于这两个:

  • 我想在画布上绘制200个或更多(高度流动)对象 并将鼠标添加到每个事件上,鼠标单击事件 像这样的源代码... (valiable k是增加的) “ 对于(k=0;k } 我的希望是... 如果鼠标放在形状上,显示有效k 如果鼠标点击形状,转到其他带有有效k参数的url 但是,我不想使用图像。 请帮帮我。 谢谢。