组件中使用，setCanvas 走不通

[chenzp1996]

canvas定义在组件中使用，按照给的例子，在 setCanvas() 传入了当前实例，只能打印出“11111”，没有“222222”，有没有知道在组件中怎么使用的呢？

async loadAnimation() {
        const parser = new Parser();
        const player = new Player();
        console.log(11111);
        await player.setCanvas("#demoCanvas", this);
        console.log(22222);
        const videoItem = await parser.load(
            "https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga"
        );
        await player.setVideoItem(videoItem);
        player.startAnimation();
    }

[SvSylvie]

我也遇到了同样的问题

[PonyCui]

有问题要给 demo，代码片段或者zip包都可以，没有 demo 是不会解问题的。

[simononline]

我的解决办法是在外面加上一个Timer
作者的代码，在这里执行setCanvas可能存在没法设置，会存在找不到canvas组件的情况。

解决办法如下：

//方案1  神戳戳的异步 (早期写的，突然醒悟看了源码不推荐这样写 )
 let timer=setTimeout(() => {
      clearTimeout(timer);
       (async () => {
                  let parser = new Parser();
                  let player = new Player();
                  let mySvga = await parser.load(`forTest.svga`);  //让他先下载再加载canvas 减小错误的概率
                  await player.setCanvas(`#canvas`);
                  await player.setVideoItem(mySvga);
                  player.loops = 1;
                  player.clearsAfterStop = false;
                  player.startAnimation();
                  player.onFinished(()=>{
                  console.log("动画播放完成");
            });
      })();
}, 1000);   //定时器时间随意，和手机性能有关系


//方案2 完美解决setCanvas失败的问题，需要优先渲染出<canvas/>组件
let parser = new Parser();
let mySvga = await parser.load(`forTest.svga`);
let player = new Player();
player.setCanvas(`#${canvas}`)
  .then(res => {
      if (loopTimes) player.loops = loopTimes;
      player.setVideoItem(mySvga);
      player.clearsAfterStop = false;
      player.startAnimation();
  });

---

↓↓↓20220803 一劳永逸最终解决版本
出现问题的原因是：因为在进行渲染的时候，Canvas组件在图形层还未加载渲染完成，代码中就开始执行设置渲染，此时就报错了。

页面

<Canvas type='2d' id='festivalSvgaCanvas' />

代码

 showSvga('festivalSvgaCanvas', 'svgaName', 1)

执行方法

/**
 * 预下载Svga图片
 * @param {*} svgaName
 */
export async function preLoadSvga(svgaName = '', callback = undefined) {
    let parser = new Parser();
    let localSvga = svgaCollection[svgaName];

    if (!localSvga) {
        localSvga = await parser.load(`https://cdn.baidu.com/${svgaName}.svga`);
        svgaCollection[svgaName] = localSvga;
    }

    if (callback) callback(localSvga);
}


/**
 * 显示Svga到指定的canvas组件上
 * @param {*} canvasName
 * @param {*} svgaName
 * @param {*} loopTimes
 * @param {*} succback  成功回调
 * @param {*} failback  失败回调
 */
export function showSvga(canvasName, svgaName, loopTimes, succback, failback, clearsAfterStop = false) {
    let interval = setInterval(() => {

        let query = wx.createSelectorQuery();
        query.select(`#${canvasName}`).boundingClientRect()
        query.exec(function (res) { // exec 返回 NodesRef 对象

            //判断组件存在
            if (res && res[0]) {
                clearInterval(interval);

                preLoadSvga(svgaName, async (mySvga) => {
                    let player = new Player();
                    try {
                        player.setCanvas(`#${canvasName}`)
                            .then(res => {
                                try {
                                    if (loopTimes) player.loops = loopTimes;
                                    player.clearsAfterStop = clearsAfterStop;
                                    player.setVideoItem(mySvga);
                                    player.startAnimation();
                                    player.onFinished(() => {
                                        console.log("动画播放完成");
                                        if (succback) succback();
                                    });
                                } catch (error) {
                                    if (failback) failback();
                                }
                            });
                    } catch (error) {
                        if (failback) failback();
                    }
                });
            } else {
                console.log('没有找到canvas')
            }

        })

    }, 200);

    
}```