CanvasRenderingContext2D异常报错

[JieHaoCai]

• 你当前是什么框架(必填)：
• 使用vue2

• 你使用的是哪个包(必填)：
• 最新版

• 你当前插件的版本(必填)：
• 0.1.11

• 当前环境是小程序还是浏览器(选填)：
• 环境是手机app里面的webview环境，并且是横屏打开的

• 详细描述你的bug：
• 在webview运行之后立刻出现报错

• 问题代码(重要)：

// 代码开始, 别再放歪了行吗
就是直接使用官方示例，只是环境是在游戏app内打开的这个webview中使用，他是横屏展示的

      <div class="luckgrid">
        <lucky-grid ref="myLucky" width="10rem" height="10rem" :prizes="prizes" @start="startCallback"
          @end="endCallback" :row="row" :cols="cols" :defaultStyle="defaultStyle" :defaultConfig="defaultConfig"
          :activeStyle="activeStyle" />
      </div>


mouted(){
//这里的奖励数据是在mouted中写入的，初步怀疑是否有可能是因为没有等奖励数据完全渲染出来
      for (const [key, value] of roleMap) {
        this.prizes.push({
          x: value.x,
          y: value.y,
          imgs: [{
            width: '82px',
            height: '82px',
            activeSrc: `http://static.${this.rootHost}/static-m/hz-active/zhuanpan/${key}_now.png`,
            src: `http://static.${this.rootHost}/static-m/hz-active/zhuanpan/${key}.png`
          }]
        })
      }

}



 data() {
      return {
        //行
        row: '3',
        cols: '3',
        //列
        //宽度
        width: '10rem',
        //高度
        height: '10rem',
        //奖品相关
        prizes: [],
        // 默认配置
        defaultConfig: {
          gutter: 5,
          speed: 20,
          accelerationTime: 2000,
          decelerationTime: 3000,
        },
        // 默认样式
        defaultStyle: {
          borderRadius: '4px',
          fontSize: '0.49rem'
        },
        activeStyle: {
          background: 'rgba(0, 0, 0, 0)'
        }
      }
    },

.luckgrid {
        width: 11.9rem;
        height: 12.8rem;
        box-sizing: border-box;
        background-size: cover;
        background-image: url('../../assets/img/zhuanpan/zhuanpanbg.png');
        border-radius: 10px;
        padding: 0.64rem 0.99rem;
        margin-top: 0.49rem;

        .getPrice {
          box-sizing: border-box;
          width: 100%;
          margin-top: 0.08rem;
          padding: 0.2rem 0.79rem;
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          .getNum {
            width: 44%;
            height: 1.09rem;
          }

          .getNum:active {
            @include btnActive();
          }

          .getDraw {
            position: relative;
            width: 44%;
            height: 1.09rem;

          }

          .getDraw:active {
            @include btnActive();
          }

          .Num {
            position: absolute;
            font-size: 0.39rem;
            color: #FFFFFF;
            top: 48.5%;
            right: 10%;
            @include flexCenter();
            width: 1.62rem;
            height: 0.66rem;
            border-radius: 372px;
            opacity: 1;
            /* Text/Secondary */
            background: #11c118;
          }


        }


      }

// 代码结束

[JieHaoCai]

不影响正常使用，用户是可以正常使用的，但是报错会被上报

[buuing]

不知道, 有点奇怪, hbx的版本更新一下?

[JieHaoCai]

不知道, 有点奇怪, hbx的版本更新一下?

hbx已经是最新版的

[buuing]

我有个疑问, 你都用webview了, 我理解的是跟uniapp没关系了, 为啥还用uniapp的包, 直接用lucky-canvas源码包?

[JieHaoCai]

我有个疑问, 你都用webview了, 我理解的是跟uniapp没关系了, 为啥还用uniapp的包, 直接用lucky-canvas源码包?

作者大大，不好意思，我写错了，不是uniapp环境的，是vue2，并没有用uniapp框架

[JieHaoCai]

我有个疑问, 你都用webview了, 我理解的是跟uniapp没关系了, 为啥还用uniapp的包, 直接用lucky-canvas源码包?

刚刚尝试了把奖励去除掉了，虽然还是有报错，但是同样的报错少了很多，作者大大可以尝试把奖励不写死，而是弄成跟我一样，用线上资源做引入，看看是否可以复现一样的问题，我在浏览器没有出现这个报错，再次重申，这个项目是运行在app内打开的一个webview中

[buuing]

报错我看看

[JieHaoCai]

报错我看看

{message=Uncaught (in promise) IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-1.66667) is negative., lineNumber=54}

[JieHaoCai]

报错我看看

我看issue上也有类似的问题，但是场景跟我的完全不一样，并且我根据他的回复去尝试解决，也没有解决

[buuing]

半径绘制有问题, 这种问题一般是宽度设置的不对, 导致绘制arc圆的时候, 出问题了

[buuing]

要不先把borderRadius都去掉试试

[JieHaoCai]

要不先把borderRadius都去掉试试

去除后仍未解决，并且有了一个新的错误，在最初的时候报了一次，无法获取宽度或高度

[buuing]

你用的什么版本

[JieHaoCai]

你用的什么版本

"dependencies": { "@lucky-canvas/vue": "^0.1.11", "fastclick": "^1.0.6", "qrcodejs2": "0.0.2", "qs": "^6.10.1", "vant": "^2.12.23", "vconsole": "^3.8.1", "vue": "^2.6.11", "vue-clipboard2": "^0.3.3", "vue-router": "^3.2.0", "vuex": "^3.4.0" },

[JieHaoCai]

你用的什么版本

hbx为3.8.7

[buuing]

无法获取宽度或高度是以前的一个报错提醒, 后面好像是去掉了, 我记得可能是抽奖组件本身没有传递宽高

[buuing]

你这样试试呢, 给抽奖组件一个v-if, 等prizes处理完毕, 再设置true显示抽奖组件, 走一次完整的渲染流程

[JieHaoCai]

你这样试试呢, 给抽奖组件一个v-if, 等prizes处理完毕, 再设置true显示抽奖组件, 走一次完整的渲染流程

作者大大在prizes的路径上貌似没有写的很清楚，所以我一开始使用本地路径不知道怎么写才能够正常显示图片，现在用线上的地址是异步的，在浏览器端等待加载完毕可以显示图片，但是在手机app的webview中图片已经无法正常显示了

[JieHaoCai]

你这样试试呢, 给抽奖组件一个v-if, 等prizes处理完毕, 再设置true显示抽奖组件, 走一次完整的渲染流程 路径是相对于src的吗

[buuing]

那个src我没办法写的很清楚, 因为不同项目打包的路径不一样, 这个得自己尝试一下, 在vue2中我更习惯于require+相对路径的方式去引入图片

[JieHaoCai]

那个src我没办法写的很清楚, 因为不同项目打包的路径不一样, 这个得自己尝试一下, 在vue2中我更习惯于require+相对路径的方式去引入图片

好的，谢谢作者，目前尝试许多方式都没办法解决，决定就过滤掉这个错误了

[xdliyushen]

你好，请问这个问题有其他解法吗？我碰到了一模一样的报错。

• 使用技术栈：React
• 使用版本：@lucky-canvas/react 0.1.13
• 环境：webview
• 复现路径：在安卓端上可复现，但并非必现

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { LuckyGrid } from '@lucky-canvas/react';


export default function () {
    const luckyGridRef = useRef<any>(null);

    const px2vw = useMemo(() => {
        return v => v;
    }, []);

    const [prizes, setPrizes] = useState([]);

    // 九宫格配置
    const luckyGridProps = useMemo(() => {
        const posArr = [
            { x: 0, y: 0 },
            { x: 1, y: 0 },
            { x: 2, y: 0 },
            { x: 2, y: 1 },
            { x: 2, y: 2 },
            { x: 1, y: 2 },
            { x: 0, y: 2 },
            { x: 0, y: 1 },
        ];

        return {
            prizes: new Array(8).fill(0).map((_, index) => {
                const item = (prizes?.[index] || {}) as any;

                return {
                    fonts: [{
                        text: item.rewardName || '',
                        top: (item?.rewardName || '').length > 9 ? px2vw('62px') : px2vw('59px'),
                        fontSize: (item?.rewardName || '').length > 9 ? px2vw('12px') : px2vw('16px'),
                        fontWeight: 700,
                        fontColor: 'rgba(28, 124, 70, 1)',
                    }],
                    imgs: item.rewardIcon ? [{
                        src: item.rewardIcon || '',
                        width: px2vw('83px'),
                        height: px2vw('83px'),
                    }] : [],
                    borderRadius: px2vw('8.5px'),
                    ...posArr[index],
                };
            }),
            width: px2vw('265px'),
            height: px2vw('265px'),
            defaultStyle: {
                background: 'rgba(255, 253, 237, 1)',
            },
            activeStyle: {
                background: 'rgba(255, 223, 87, 1)',
            },
        };
    }, [prizes, px2vw]);

    // 抽奖动画结束
    const onLuckyGridEnd = useCallback(() => {
        // ...
    }, []);

    return (
        <LuckyGrid
            ref={luckyGridRef}
            {...luckyGridProps}
            onEnd={onLuckyGridEnd}
        />
    );
}

报错信息如下：

Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-1.66667) is negative.

是否是某个特殊数字或尺寸渲染时导致的错误？具体应该如何定位呢？