wpf中可点击图像映射的最佳方式

Question

我在c＃WPF中有很多部分的图像我想让每个部分点击make认为我试图将图像分割成部分并在每个图像上制作事件但问题是图像的嵌套部分什么是制作图像的最佳方法地图？

Answer 1

您可以使用一组透明形状覆盖图像：

<Canvas>
    <Image Source="..."/>
    <Ellipse Canvas.Left="50" Canvas.Top="50" Width="100" Height="50"
             Fill="Transparent" MouseDown="Ellipse_MouseDown"/>
    <Path Data="..." MouseDown="Path_MouseDown"/>
</Canvas>

这些形状可以是简单的矩形或椭圆形，也可以是或多或少复杂的多边形或路径。

Answer 2

您可以使用Microsoft Expression Studio中包含的Expression Design轻松完成此操作。 这是你要做的步骤：

1. 将图像添加到Expression Design。
2. 然后，您可以根据需要使用PaintBrush工具将拆分图像分割成零件。
3. 然后，您必须将其导出到xaml。 在导出窗口中，您可以选择Xaml Silverlight 3

画布为格式，路径为文本。

如您所知，它会自动将您在图像上绘制的对象转换为路径对象，并在其上包含所有坐标。

然后，您可以复制导出的xaml并将其粘贴到您的应用程序中。

您可以从Dreamspark免费下载Expression Studio。

我刚刚制作了样本并将其导出到xaml：

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Untitled1" Width="62" Height="62" Clip="F1 M 0,0L 62,0L 62,62L 0,62L 0,0" UseLayoutRounding="False">
    <Canvas x:Name="Layer_1" Width="62" Height="62" Canvas.Left="0" Canvas.Top="0">
        <Image x:Name="Image" Source="Untitled1_files/image0.png" Width="1920" Height="1080" Canvas.Left="0" Canvas.Top="0">
            <Image.RenderTransform>
                <TransformGroup>
                    <MatrixTransform Matrix="1,0,0,1,-929.667,-510.667"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Path x:Name="Path" Width="159.722" Height="161.743" Canvas.Left="82.757" Canvas.Top="-0.415951" Stretch="Fill" Fill="#FFE7DEDE" Data="F1 M 82.8307,30.8333C 81.8859,46.01 90.3304,60.6249 90.3304,75.831C 90.3304,88.8304 91.9427,101.93 90.3304,114.829C 89.0281,125.247 87.0101,136.367 90.3304,146.327C 95.3301,161.327 119.518,161.327 135.328,161.327C 157.018,161.327 175.778,144.86 193.825,132.828C 209.523,122.363 235.198,120.495 241.823,102.83C 243.994,97.0391 240.326,90.2367 237.323,84.8306C 230.656,72.8294 223.759,60.756 214.824,50.3323C 205.057,38.9377 205.748,18.0458 192.325,11.3342C 183.723,7.03329 173.332,8.29683 163.827,6.83447C 144.945,3.92956 125.479,-3.30947 106.83,0.834766C 94.3289,3.61269 83.6265,18.0524 82.8307,30.8333 Z "/>
    </Canvas>
</Canvas>

导出的部分是Path对象。 你可以做任何你想做的事情。 例如，您可以处理此路径的MouseClick事件并更改路径的背景....

Answer 3

它非常简单。 而不是去任何复杂的方式，这是最简单的1）首先在XAML中声明您的图像

<Grid Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Image Name="imagePath" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

2）在图像上找到鼠标位置以获得x和y坐标

String[] arr = new String[2];
var mousePos = Mouse.GetPosition(imagePath);
arr = mousePos.ToString().Split(',');
double x = Double.Parse(arr[0].ToString());
double y = Double.Parse(arr[1].ToString());

3）声明您想要获得可点击区域或鼠标悬停的区域

if (x >= 10 && y >= 10 && x <= 20 && y <= 20//this declares square area with x1,y1,x2,y2
{
  //do whatever you want to do
  //don't forget to add left and top each time
  left = left +x;//x=10 i.e x1
  top = top + y;//y=20 i.e y1
}

4）每次移动图像时添加此x1和y1

int left = 0;
int top = 0;

整个代码; ll看起来像这样

InitializeComponent();
imagePath.MouseMove += new MouseEventHandler(myMouseMove);

private void myMouseMove(object sender, MouseEventArgs e)
    {
        String[] arr = new String[2];
        var mousePos = Mouse.GetPosition(imagePath);
        arr = mousePos.ToString().Split(',');
        double x = Double.Parse(arr[0].ToString());
        double y = Double.Parse(arr[1].ToString());
        int x = (int)xx;
        int y = (int)yy;
        int left = 0;
        int top = 0;

        Console.WriteLine("Screen Cordinate-------------------------" + x + ", " + y);

                for (int i = 0; i < n; i++)
                {
                    if (x >= x1 && y >= y1 && x <= x2 && y <= y2
                    {                            
                        Mouse.OverrideCursor = Cursors.Hand;
                        left = left + x1;
                        top = top + y1;
                        break;
                    }
                    else
                    {
                        Mouse.OverrideCursor = Cursors.Arrow;
                    }
                }

其中x1，y1，x2，y2是图像上的坐标那就是它！

Answer 4

我认为使用Adorner实现功能是最好的方法。

以下是在MSDN中添加图像控制（ 图像注释 ）和Adorner概述的方法