4

我在 c# WPF 中有一个包含许多部分的图像我想让每个部分单击使我想我试图将图像拆分为部分并在每个图像上进行事件但问题是图像的嵌套部分什么是制作图像的最佳方法地图 ？

4

4 回答 4

2

You can do it easily with Expression Design which is included in Microsoft Expression Studio. This is steps you gonna do:

  1. Add image to Expression Design.
  2. Then you can use PaintBrush tool for split image into parts as you want.
  3. Then you must export this to xaml. In export window you can choose Xaml Silverlight 3

Canvas as format and Paths as Text.

As you understand, it automatically converts objects you draw on your image to path object with all coordinates on it.

Then you can copy exported xaml and paste it to your application.

You can download Expression Studio from Dreamspark for free.

I have just made sample and exported it to 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>

The exported part is Path object. You can do whatever you want on it. For example you can handle MouseClick event for this path and change background of path....

于 2013-04-13T18:10:29.417 回答
2

You could overlay the image with a set of transparent shapes:

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

These shapes could be simple Rectangles or Ellipses, or more or less complex Polygons or Paths.

于 2013-04-13T18:10:36.780 回答
1

它非常简单。而不是去任何复杂的方式遵循这个，这是最简单的 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;

整个代码；看起来像这样

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 是图像上的坐标就是这样！！！

于 2013-05-28T05:01:52.880 回答
0

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

这是在 MSDN中添加图像控制（图像注释）和Adorner 概述的示例

于 2014-10-23T08:23:35.083 回答