如何在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
相关产品推荐
相关产品推荐

