问题
开发一个微信小程序项目的时候需要用到Path2D这个对象,但是发现小程序的Path2D对象不支持实例化的时候直接传入'svg path',导致下面的代码运行的时候报错(浏览器中可运行)
js
#其它代码(省略)
...
//核心代码
let p = new Path2D("M10 10 h 80 v 80 h -80 Z"); //微信小程序中会报错
ctx.fill(p);
而小程序的Path2D对象只支持用命令式编程的方式去构建Path2D路径,代码如下:
js
#其它代码(省略)
...
//核心代码
let p = new Path2D();
p.moveTo(10, 10);
p.lineTo(90, 10);
p.lineTo(90, 90);
p.lineTo(10, 90);
p.closePath();
ctx.fill(p);
这种方式有两个问题:
- 路径比较复杂这样的绘制代码就会很多(不优雅)
- 不能使用现有svg path(主要问题)
解决办法
查了相关的开发文档之后决定写一个工具函数svgPathStringToCanvas
来解析svg path
并且生成这样的绘制命令,这样就完美解决了上面两个问题
js
function svgPathStringToCanvas(svgPathData) {
console.log(svgPathData);
// 使用正则表达式拆分 SVG 路径字符串
const pathParts = svgPathData
.split(/(^|\s+)(?=[A-Z])/)
.filter((part) => part !== " ");
// 存储 Canvas 绘图命令的数组
const canvasCommands = [];
// 遍历 SVG 路径的各个部分
for (const part of pathParts) {
// 将部分拆分为命令符(如 M、L、C、Q、Z)和对应的参数
const [cmd, ...rawParams] = part.split(/\s+/);
// 将参数转换为浮点数数组
const params = rawParams.map((param) => parseFloat(param));
// 根据命令符生成对应的 Canvas 绘图命令并存储到数组中
if (cmd === "M") {
canvasCommands.push((ctx) => ctx.moveTo(...params));
} else if (cmd === "L") {
canvasCommands.push((ctx) => ctx.lineTo(...params));
} else if (cmd === "C") {
canvasCommands.push((ctx) => ctx.bezierCurveTo(...params));
} else if (cmd === "Q") {
canvasCommands.push((ctx) => ctx.quadraticCurveTo(...params));
} else if (cmd === "Z") {
canvasCommands.push((ctx) => ctx.closePath());
}
}
// 返回一个函数,该函数接受 Canvas 上下文对象并执行存储的绘图命令
return (ctx) => canvasCommands.forEach((cmd) => cmd(ctx));
}
有了这个函数就可以不使用Path2D相关api了,兼容性也更好了。
使用方式
js
#其它代码(省略)
...
//核心代码
var canvasPathFun = svgPathStringToCanvas("M10 10 h 80 v 80 h -80 Z");
canvasPathFun(ctx)
ctx.fill()
参考文档
- https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D/Path2D
- https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Path2D.html
原文地址:https://www.abcddd.xyz/posts/2024/01/31/weixin-miniapp-path2d-not-support-svg-path/