微信小程序 Path2D 不支持 svg 路径的解决办法

问题

开发一个微信小程序项目的时候需要用到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://www.abcddd.xyz/posts/2024/01/31/weixin-miniapp-path2d-not-support-svg-path/

相关推荐
中云DDoS CC防护蔡蔡6 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼9 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857512 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027712 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__18 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
guanpinkeji2 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收
尘浮生2 天前
Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)
java·开发语言·数据库·学习·微信小程序·小程序·maven
十幺卜入2 天前
基于xr-frame实现微信小程序的手部、手势识别3D模型叠加和石头剪刀布游戏功能
游戏·微信小程序·xr·手势识别·人手跟踪
坠入暮云间x2 天前
Nodejs开发仿马蜂窝旅游小程序API接口,服务器端开发,商家后台 Vue3+微信小程序+koa+mongodb+node.js
微信小程序·小程序·旅游