收藏
回答

真机上用SVG路径方式创建Path2D报错,模拟器没问题,什么问题?

真机上用SVG path方式创建Path2D报错,模拟器没问题,为什么?

const p0 = new Path2D('M0,17.9322971 C5.61532453,24.4437317 10.3525062,28.1893917 14.2115451,29.169277 C16.8867392,29.848561 20.1217384,24.1110756 28.904537,14.2758908 C30.9285487,12.0093548 33.9603697,9.32524387 38,6.22355807');

错误:

MiniProgramError

"illegal param to init BindingPath2D"

String


回答关注问题邀请回答
收藏

2 个回答

  • 流连水
    流连水
    2023-03-04

    var pathStringToCanvas = function pathStringToCanvas(pathString) {

      var pathParts = pathString.split(/(^|\s+)(?=[A-Z])/).filter(function (part) {

        return part !== ' ';

      });

      var commands = [function (ctx) {

        return ctx.beginPath();

      }];

      pathParts.forEach(function (part) {

        var _part$split = part.split(/\s+/),

            _part$split2 = _toArray(_part$split),

            cmd = _part$split2[0],

            rawParams = _part$split2.slice(1);


        var params = rawParams.map(function (param) {

          return parseFloat(param);

        });

        if (cmd === 'M') {

          commands.push(function (ctx) {

            return ctx.moveTo.apply(ctx, params);

          });

        } else if (cmd === 'L') {

          commands.push(function (ctx) {

            return ctx.lineTo.apply(ctx, params);

          });

        } else if (cmd === 'C') {

          commands.push(function (ctx) {

            return ctx.bezierCurveTo.apply(ctx, params);

          });

        } else if (cmd === 'Q') {

          commands.push(function (ctx) {

            return ctx.quadraticCurveTo.apply(ctx, params);

          });

        } else if (cmd === 'Z') {

          // commands.push((ctx) => ctx.closePath());

        }

      });

      return function (ctx) {

        return commands.forEach(function (cmd) {

          return cmd(ctx);

        });

      };

    };



    const p0 = pathStringToCanvas('M0,17.9322971 C5.61532453,24.4437317 10.3525062,28.1893917 14.2115451,29.169277 C16.8867392,29.848561 20.1217384,24.1110756 28.904537,14.2758908 C30.9285487,12.0093548 33.9603697,9.32524387 38,6.22355807');


    试试

    2023-03-04
    有用
    回复
  • 没事抖抖腿
    没事抖抖腿
    2021-01-15

    好吧,换了种方式暂时解决了;

    2021-01-15
    有用
    回复 5
    • 爱博卡鲁
      爱博卡鲁
      2021-04-08
      大佬方便说下解决办法吗,我也遇到了
      2021-04-08
      回复
    • 何健
      何健
      2021-07-26
      同问,这个问题是怎么解决的?换了什么方式?
      2021-07-26
      1
      回复
    • 锋
      2022-01-18
      老哥 这个如何解决啊
      2022-01-18
      回复
    • 没事抖抖腿
      没事抖抖腿
      2023-07-17
      抱歉,一直没上社区,两年后才看到这个问题。当时找了MDN,研究了下 path 这个东西,明白了 M、C 等等这些特殊字符的含义,然后按下边的方式就OK了
      2023-07-17
      回复
    • 没事抖抖腿
      没事抖抖腿
      2023-07-17
      path 介绍 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths
      2023-07-17
      回复
登录 后发表内容
问题标签