这不是一个问题,更多的是一篇关于如何做到这一点的文章。
我一直在寻找一种方法来实现这个
这就是我所说的带有可点击区域的图像,它看起来很简单,但我花了一些时间
我在Stack和其他网站上发现了很多问题,但没有任何关于它实际上是如何做的。只有零星的碎片散落在周围。
所以我花了一些时间才弄明白,不得不学习矢量图像,关于skiasharp包,还有很多其他的东西。
使用c#
和SkiaSharp
软件包通过xamarin forms
完成此操作
所有的细节是如何工作的是在我的答案,起初我写它作为一篇文章,但后来我被要求格式化它作为一个问题与答案,所以我这样做了。
在答案中,你可以看到一个循序渐进的方法,详细说明如何做到这一点,希望其他正在搜索这一点的人可以以此为起点。
1条答案
按热度按时间fd3cxomn1#
我不得不做了大量的搜索,研究和实验如何做到这一点。
也许有更好的方法来做到这一点,我不知道,但这种方法肯定有效,我想在这里分享我的发现,让其他人可以受益于我的斗争。
我想要达到的是
看起来还不错嘿,让我们看看这是怎么做的
那么,你需要什么呢?
你必须从nuget获得skiaSharp包,这可以很容易地使用nuget管理器安装,搜索
SkiaSharp.Views.Forms
接下来,您需要一个可以用作基础图像的图像,在本例中,您可以在上面的gif中看到汽车的图像。
XAML文件
xaml文件实际上非常简单,在上面的例子中,我需要一个标签在顶部,一个Skia画布在中间,两个按钮之间的标签在底部
为了避免错误
The type 'skia:SKCanvasView' was not found
,请在xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
的定义中包含此内容背后的代码
在后面的代码中,我们需要做3件事
1.在屏幕上绘制基本图像
1.确定某人点击了图像,以及他点击了图像的什么地方
1.用不同的颜色(本例中为红色)在基本图像上绘制单击区域
我的基础映像是一个名为
draw_regions_car.png
的文件,我在项目中将其命名为embedded resource
要在Skia Canvas上绘制它,我需要将它放在
SKBitmap
上,以便稍后在PaintSurface
事件中使用它在屏幕上绘制它。在我的示例中,它看起来如下所示
这是地表事件目前的样子
如果您现在运行应用程序,它应该会在屏幕上显示基础图像。
从这里我们可以进入下一步
为此,我们需要使用SKCanvasView的
Touch
事件(参见本文中的ctor)在我们的示例中,我们将其命名为
SKCanvasView_Touch
在这里,我确定发生了什么类型的触摸,如果是
click
,则调用一个名为OnPressed
的私有方法因此,在
OnPressed
方法中,我们可以处理在图像上执行的所有clicks
。例如,让我们看看如何知道用户是否单击了front_door_left。
为此,我需要此门的
path
。这是什么?
嗯,这是一个矢量绘图。矢量绘图(在. svg文件中查找)是一系列命令,当执行时会产生图像。
对于我们的左前门,这些命令可能如下所示
它们的含义并不重要,我们需要做的是创建一个类型为
SKPath
的变量来保存这个值,使用这个变量我们可以指示Skia为我们发挥它的魔力。我将在后面解释如何从基础图像中为每个区域提取此路径,现在让我们集中讨论如何使用此路径。
在
OnPressed
方法中,我可以使用这个路径来确定用户是否单击了这个门,如果单击了,我将把代码'10'放在私有变量_region
中之后,我调用InvalidateSurface以再次触发Surface
OnCanvasViewPaintSurface
事件,在该事件中我们进行所有的绘制让我们使用额外的代码再次查看事件
OnCanvasViewPaintSurface
您需要对基础图像中的每个区域重复此操作,以使其成为
clickable
如何从基础映像中提取路径?
我的基本图像
draw_regions_car.png
是一个简单的png图像,它不是矢量图像,因此没有路径。这就是我如何从这张图片中提取出左前门的路径。
First I open it in an application that is able to do complex selection, I use the free program paint.net for this.
在那里我选择
Tools/Magic Wand
并将其放在门上,这样它就变成了选中状态,然后我单击ctrl-I
以恢复选择,然后单击删除。现在保存此文件,我将其保存为
10.png
下一步是将其转换为
svg
,为此我使用网站https://svgco.de/
现在您有了一个可以用任何文本编辑器打开的. svg文件,其内容如下所示
在那里,您将找到代码中所需的路径
结论
也许有更好的方法来做到这一点,但至少这种方法是有效的。
它甚至不是那么复杂,一旦你意识到这是如何工作的,它只是需要一些时间来设置这一切。
对于你们这些绝望地在网上寻找如何做到这一点的人来说,我希望你们都能把这作为一个起点。