You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在MAUI项目中用Skia绘制带不同描边填充色的SVG路径

解决MAUI Skia绘制SVG路径同时显示描边和填充的问题

核心问题在于你复用同一个SKPaint对象修改参数后,没有针对每种样式单独执行绘制操作。Skia的DrawPath只会使用当前SKPaint的状态进行绘制,多次修改同一个Paint的属性后,最后一次的设置会覆盖之前的,自然只能看到一种效果。要同时实现填充和描边,需要分两次调用DrawPath,分别对应两种样式的配置:

方法1:使用独立SKPaint对象(推荐,代码更清晰)

创建两个SKPaint实例,分别配置填充和描边属性,依次执行绘制:

// 假设已获取目标SVG路径skPath
using var fillPaint = new SKPaint
{
    Color = SKColors.Red,
    Style = SKPaintStyle.Fill // 设置为填充模式
};

using var strokePaint = new SKPaint
{
    Color = SKColors.Black,
    Style = SKPaintStyle.Stroke, // 设置为描边模式
    StrokeWidth = 2f // 根据需求调整描边宽度
};

// 先绘制填充,再绘制描边(描边会覆盖在填充上方,符合常规视觉逻辑)
canvas.DrawPath(skPath, fillPaint);
canvas.DrawPath(skPath, strokePaint);

方法2:复用单个SKPaint对象

如果想复用Paint对象,需要在每次配置完成后立即调用DrawPath,避免后续配置覆盖前一次的效果:

using var paint = new SKPaint();

// 配置填充并执行绘制
paint.Color = SKColors.Red;
paint.Style = SKPaintStyle.Fill;
canvas.DrawPath(skPath, paint);

// 重新配置描边并执行绘制
paint.Color = SKColors.Black;
paint.Style = SKPaintStyle.Stroke;
paint.StrokeWidth = 2f;
canvas.DrawPath(skPath, paint);

注意:

  • 绘制顺序建议先填充后描边,若反过来,填充会覆盖部分描边(当描边宽度较大时);
  • 务必用using管理SKPaint对象,Skia的原生资源需要正确释放以避免内存泄漏。

内容的提问来源于stack exchange,提问作者GuidoG

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.20 08:47:34