lucky-canvas icon indicating copy to clipboard operation
lucky-canvas copied to clipboard

打包后无法获取到 CanvasContext2D

Open ASharPei opened this issue 1 year ago • 6 comments

  • 你当前是什么框架(必填):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>

ASharPei avatar Jun 30 '23 07:06 ASharPei