打包后无法获取到 CanvasContext2D

[ASharPei]

• 你当前是什么框架(必填)：vue3

• 你使用的是哪个包(必填)：@lucky-canvas/vue

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

• 当前环境是小程序还是浏览器(选填)：浏览器

• 详细描述你的bug：本地服务正常使用,打包发布后出现无法获取到 CanvasContext2D, Cannot read properties of undefined (reading 'translate')

• 问题代码(重要)：

<template>
  <LuckyWheel ref="lucky" width="300px" height="300px" :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />
</template>

<script lang="ts" setup>
import { inject, ref } from "vue";
import { LuckyWheel } from "@lucky-canvas/vue";

import Core from "@tmagic/core";
import { MComponent } from "@tmagic/schema";

import useApp from "../../useApp";

import { prizesImages } from "./data";

const props = withDefaults(
  defineProps<{
    config: MComponent;
    model: any;
  }>(),
  {
    model: () => ({}),
  }
);

const blocks = [{ padding: "13px", background: "#617df2" }];

const prizes = [
  {
    fonts: [{ text: "小米手机", top: "55%", fontSize: "12px", fontColor: "#ff5722" }],
    background: "#afc8ff",
    imgs: [prizesImages[0]],
  },
  {
    fonts: [{ text: "蓝牙耳机", top: "55%", fontSize: "12px", fontColor: "#ff5722" }],
    background: "#fff7a2",
    imgs: [prizesImages[1]],
  },
  {
    fonts: [{ text: "apple watch", top: "55%", fontSize: "12px", fontColor: "#ff5722" }],
    background: "#afc8ff",
    imgs: [prizesImages[2]],
  },
  {
    fonts: [{ text: "迪士尼苹果", top: "55%", fontSize: "12px", fontColor: "#ff5722" }],
    background: "#fff7a2",
    imgs: [prizesImages[3]],
  },
  {
    fonts: [{ text: "海鲜套餐", top: "55%", fontSize: "12px", fontColor: "#ff5722" }],
    background: "#afc8ff",
    imgs: [prizesImages[4]],
  },
  {
    fonts: [{ text: "谢谢参与", top: "55%", fontSize: "12px", fontColor: "#ff5722" }],
    background: "#fff7a2",
    imgs: [prizesImages[5]],
  },
];

const buttons = [
  {
    radius: "35%",
    imgs: [
      {
        src: "https://img11.360buyimg.com/imagetools/jfs/t1/89512/11/15244/137408/5e6f15edEf57fa3ff/cb57747119b3bf89.png",
        width: "100%",
        top: "-130%",
      },
    ],
  },
];

const app: Core | undefined = inject("app");
const node = app?.page?.getNode(props.config.id);

const lucky = ref(LuckyWheel);

const startCallback = () => {
  // 调用抽奖组件的play方法开始游戏
  lucky.value.play();
  // 模拟调用接口异步抽奖
  setTimeout(() => {
    // 假设后端返回的中奖索引是0
    const index = 2;
    // 调用stop停止旋转并传递中奖索引
    lucky.value.stop(index);
  }, 3000);
  app?.emit("wheel:start", node);
};

const endCallback = (prize) => {
  app?.emit("wheel:end", node, prize);
};

defineExpose({
  toast: {},
});

useApp({
  config: props.config,
  methods: {},
});
</script>

[buuing]

自己排查吧, 大概率是你代码逻辑有问题

[buuing]

无法获取到canvas画布, 说明抽奖组件都没渲染出来

[F1462900874]

你好朋友，你在vue3中使用，在安装依赖时会发出以下警告么？我该如何解决？期待你的回复（重度强迫症患者）功能可正常使用

[jacksion1234]

哥们，解决了吗？我也是这个问题，本地没问题，打包后就无法获取到CanvasContext2D @ASharPei

[buuing]

哥们，解决了吗？我也是这个问题，本地没问题，打包后就无法获取到CanvasContext2D @ASharPei

拆个小demo压缩发一下

[jacksion1234]

作者你好，经过排查，最后发现是因为用vite打包的时候，配置里没有打包本地的vue依赖，改为了由CDN地址访问，好像这种情况下您的组件加载的时候找不到原本的Vue路径了，显示"Miss ref owner context, ref cannot be used on hoisted vnodes"，我把那个打包的配置项取消后，就可以了，还是基本功不牢，这点问题我搞了俩天时间，打扰了哈。