uni-app中const canvas = this.$refs.firstCanvas; 设置宽高无效, 使用 ctx.scale(dpr, dpr); 会导致图片不显示

uni-app中const canvas = this.$refs.firstCanvas; 设置宽高无效, 使用 ctx.scale(dpr, dpr); 会导致图片不显示

代码示例

methods: {  
    handleGetCanvasFields() {  
        return new Promise((resolve, reject) => {  
            const query = uni.createSelectorQuery().in(this);  
            query.select(`#firstCanvas`).fields({  
                size: true,  
            }, (res) => {  
                const width = res.width  
                const height = res.height  
                this.canvas = {  
                    width,  
                    height  
                }  
                resolve()  
            }).exec()  
        })  
    },  
    handleGetCanvasNode() {  
        const ctx = uni.createCanvasContext("firstCanvas", this);  
        const canvas = this.$refs.firstCanvas; // 获取 canvas 元素  

        // 确保 canvas 元素的物理尺寸设置正确  
        const dpr = uni.getSystemInfoSync().pixelRatio;  
        const width = this.canvas.width * dpr;  
        const height = this.canvas.height * dpr;  

        // 设置 canvas 元素的宽高  
        canvas.width = width;  
        canvas.height = height;  

        // 确保上下文缩放与设备分辨率匹配  
        ctx.setStrokeStyle("#ff0000");  
        ctx.setLineWidth(2);  
        ctx.scale(dpr, dpr); // 缩放使其适配高分辨率设备  

        // 开始绘制图形  
        ctx.beginPath();  
        ctx.moveTo(100, 100);  
        ctx.lineTo(130, 100);  
        ctx.lineTo(140, 70);  
        ctx.stroke();  
        ctx.draw(); // 确保绘制完成  
    }  
}

项目信息

信息 值
创建方式 uni-app
版本号 未提及
开发环境 未提及

更多关于uni-app中const canvas = this.$refs.firstCanvas; 设置宽高无效, 使用 ctx.scale(dpr, dpr); 会导致图片不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中const canvas = this.$refs.firstCanvas; 设置宽高无效, 使用 ctx.scale(dpr, dpr); 会导致图片不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，设置canvas的宽高无效的问题通常是由于canvas元素的样式与画布逻辑分辨率不一致导致的。此外，使用ctx.scale(dpr, dpr)来调整画布的逻辑分辨率时，如果处理不当，确实可能导致图像不显示。这里，我们提供一种方法来正确设置canvas的宽高，并使用缩放因子dpr来确保图像显示正确。

首先，确保在组件的<template>中正确引用canvas元素，并设置ref属性：

<template>
  <view>
    <canvas canvas-id="firstCanvas" ref="firstCanvas" style="width: 300px; height: 300px;"></canvas>
  </view>
</template>

在<style>中，你可以设置canvas的样式宽高，但这只是影响canvas元素在页面上的显示大小，并不改变其内部的逻辑分辨率。

接下来，在<script>部分，我们需要获取canvas的上下文，并设置其逻辑分辨率：

<script>
export default {
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const canvas = this.$refs.firstCanvas;
      const ctx = canvas.getContext('2d');
      
      // 获取设备的像素比
      const dpr = window.devicePixelRatio || 1;
      
      // 设置canvas的实际宽高（物理像素）
      canvas.width = 300 * dpr;
      canvas.height = 300 * dpr;
      
      // 设置canvas的样式宽高（CSS像素），保持显示大小不变
      canvas.style.width = '300px';
      canvas.style.height = '300px';
      
      // 缩放画布，使得逻辑分辨率与物理分辨率一致
      ctx.scale(dpr, dpr);
      
      // 绘制图像示例
      const img = new Image();
      img.src = 'path/to/your/image.png'; // 替换为你的图片路径
      img.onload = () => {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      };
    }
  }
};
</script>

在这个例子中，我们首先获取了canvas的上下文，然后根据设备的像素比dpr来设置canvas的物理宽高（即canvas.width和canvas.height），这决定了canvas内部逻辑分辨率的大小。接着，我们设置canvas的CSS样式宽高，以确保其在页面上的显示大小。最后，通过ctx.scale(dpr, dpr)来缩放画布，使得逻辑像素与物理像素一致，从而确保图像能够正确显示。

请注意，这里的图片路径path/to/your/image.png需要替换为实际可用的图片路径。如果图片未能正确显示，请检查图片路径是否正确，以及图片是否已经成功加载。

回到顶部