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概述的方法