在不同分辨率下显示不一致问题，canvas获取的宽高不同

[[e-mail]]

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

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

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

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

• chrome浏览器 版本 125.0.6422.113 前面几个版本也会有这个问题

• 详细描述你的bug：
  运行后在同一浏览器，不同的分辨率下显示的效果不一致问题

1. mac15.4英寸(2880 × 1800) 下canvas 变形问题

2. 外接显示器27英寸(2560 × 1440)屏幕下则显示正常
   
   

• 问题代码(重要)：

 <LuckyGrid
            class="Jiugongge_body"
            width="300"
            height="300"
            :prizes="prizes"
            :buttons="buttons"
            :blocks="blocks"
            :default-config="defaultConfig"
            :active-style="activeStyle"
          />

部分代码如下

/**
 * @var axis 奖项位置
 */
const axis = [
  [0, 0],
  [1, 0],
  [2, 0],
  [2, 1],
  [2, 2],
  [1, 2],
  [0, 2],
  [0, 1],
];

  // 背景
  const blocks = computed(() => [
    { padding: "15px", background: "transparent", borderRadius: 28 },
    { padding: "4px", background: "transparent", borderRadius: 23 },
    { padding: "4px", background: "transparent", borderRadius: 20 },
  ]);

  // 抽奖按钮
  const buttons = computed(() => [
    {
      x: 1,
      y: 1,
      background: "transparent",
      shadow: "0 5 1 #e89b4f",
      imgs: [
        { src: startBtnImg.value, width: "100%", top: "0" },
      ],
    },
  ]);


 // 奖项
  const prizes = computed(() => {
    let list = pageConfig.value.prizeList || [];
    list = list.map((item, i) => {
      const fonts = [];
      const imgs = [];

      if (!item.showName || item.showName == 2) {
        imgs.push({ src: item.appLink, width: '100%', height: '100%' });
      } else {
        fonts.push({ text: item.prizeName, top: "70%", fontSize: "14px" });
        imgs.push({ src: item.appLink, width: "55%", top: "8%" });
      }

      return {
        x: axis[i][0],
        y: axis[i][1],
        id: item.id,
        index: i,
        item: item,
        fonts,
        imgs,
      };
    });

    if (list.length < 8) {
      list.push(lastItem.value);
    }

    return list;
  })

 // 转盘图片信息
  const { image: startBtnImg } = useStartBtnImg()
  const { image: defaultPrizeImg, isDefault } = useDefaultPrizeImg()
  const { image: luckBackgroundImg } = useLuckBackgroundImg()
  const { image: brightFlashImg } = useBrightFlushImg()
  const { image: darkFlashImg } = useDarkFlushImg()
  const { style: bgStyle } = usePrizeBackgroundStyle()

  // 谢谢参与奖项设置
  const lastItem = computed(() => ({
    x: 0,
    y: 1,
    id: {},
    index: 8,
    item: {},
    // fonts: [{ text: "谢谢参与", top: "70%" }],
    imgs: [
      isDefault.value ?
        { src: defaultPrizeImg.value, width: "90%", height: "90%", top: "8%" }
        : { src: defaultPrizeImg.value, width: "100%", height: "100%" }
    ],
  }));

 // 默认配置
  const defaultConfig = {
    gutter: 5,
  };

  // 默认样式
  const defaultStyle = {
    borderRadius: 15,
    fontColor: "#e8414a",
    fontSize: "12px",
    textAlign: "center",
    background: bgStyle.value.background,
    shadow: bgStyle.value.boxShadow,
  };

  // 中奖标记样式
  const activeStyle = {
    shadow: "",
  };

[ChanJee]

请问一下这个问题解决了吗，怎么解决的，我也出现这个问题了o(╥﹏╥)o

[D_Q]

这个是正常的啊, canvas画布需要根据dpr调整清晰度, 如果你的抽奖变形了, 那说明你们有css样式干扰了我的画布

[D_Q]

检查一下你们的全局css样式里, 有没有针对canvas的

[ChanJee]

大佬，我检查了一下全局的css样式里没有针对canvas的，但是canvas的位置偏移了，请问这会是什么原因呢o(╥﹏╥)o

[D_Q]

新建一个项目试试, 排除一下外部因素, 只引入抽奖组件这一个插件, 看看还会出现偏移吗

[D_Q]

你这个看上去, canvas没有偏移, 倒像是js代码把canvas的原点重置了

[D_Q]

还有, 看一下官网的示例呢, 你在两个屏幕上, 也会出现这个问题吗

[ChanJee]

感谢大佬，已排查是最外层div的css导致了偏移，已经解决了(^▽^ )

[[e-mail]]

我的也是css干扰导致的，看了半天没啥头绪，然后猛然间的就有感觉了 排查了下css 然后就发现问题了 感谢作者