如何使用Xamarin.Forms在屏幕任意位置绘制可交互的自定义图形？

核心结论 #

该需求完全可以实现，核心是不要依赖原生布局控件的自带点击检测逻辑，改用自定义矢量绘制+手动命中检测的方案即可解决重叠元素交互冲突、斜线矩形边界拦截点击的问题。

原有方案问题根源 #

你之前用AbsoluteLayout放独立Line控件的问题本质是：所有原生布局控件的点击检测默认基于元素的矩形布局边界，而非实际绘制的矢量路径。哪怕是斜线、透明区域，只要属于控件的LayoutBounds范围，都会拦截点击事件，导致下层元素无法响应。

通用实现步骤 #

采用自定义画布（Canvas）方案，适配所有复杂形状场景：

• 新增一个透明的Canvas控件作为唯一的绘图容器，仅占用1个布局位置，不存在多控件重叠遮挡的问题
• 把所有要绘制的图形（直线、多边形、不规则路径等）抽象为独立数据模型，每个模型存储：矢量路径数据、专属自定义属性、点击触发回调、绘制样式参数
• 重写Canvas的绘制方法，遍历所有图形模型依次绘制到画布上，天然支持透明重叠、邻近排布的需求
• 拦截Canvas的全局触摸/点击事件，获取点击坐标后倒序遍历图形模型（和视觉层级保持一致，上层图形优先响应），调用矢量路径的点包含检测逻辑判断是否命中：
  • 直线类图形：计算点击点到线段的垂直距离，小于线条宽度的1/2即可判定命中
  • 多边形/任意曲线图形：直接调用图形库自带的路径点检测方法判断
• 命中对应图形后直接触发它绑定的点击回调即可，完全不受矩形布局边界限制

针对示例场景的落地说明 #

你提到的300x300正方形四条独立边线的需求，用该方案可以完美实现：

• 定义4个线段数据模型，分别存储Line1到Line4的起止坐标、专属名称、各自的Tap Action
• 绘制阶段依次渲染4条线段，视觉上可完美拼合为正方形
• 点击检测阶段计算点击点到4条线段的距离，匹配到对应线段后直接触发绑定的动作，不会出现上层遮挡问题

简化优化方案 #

目前主流开发平台都提供了成熟的矢量绘图库，不需要自己手写路径计算逻辑：

• .NET生态可直接用SkiaSharp的SKCanvasView，自带SKPath.Contains()命中检测API
• Web前端可直接用HTML5 Canvas的isPointInPath()原生API
• Android/iOS原生开发也有对应Path类的点检测内置方法

如果你的场景图形数量少于20个，也可以给所有形状控件开启点击穿透属性（不同平台对应属性名多为InputTransparent），把所有点击事件统一传到父容器处理，本质逻辑和Canvas方案一致。

内容的提问来源于stack exchange，提问作者dima121181