2***@qq.com
2***@qq.com
  • 发布:2024-04-25 19:26
  • 更新:2024-07-02 22:17
  • 阅读:788

uniapp中把canvas做成组件的方式,在微信小程序不能正常显示

分类:uni-app

canvas直接放到页面中,微信小程序可以正常显示,但是做成组件,再导入组件就不行,无法显示图像,但是组件方式在H5中可以正常显示图形,请教大家可能是哪里的问题?

<template>  
  <view class="layout">  
    <view class="fill"></view>  
    <my-canvas :height="canvasHeight"></my-canvas>  
  </view>  
</template>  

<script setup>  
import { ref } from 'vue';  

const canvasHeight = ref(3200);  
</script>  

<style lang="scss" scoped>  
.layout {  
  display: flex;  
  flex-direction: column;  
  padding: 30rpx;  
  height: 100vh;  
  .fill {  
    height: 50%;  
    background: #ccc;  
  }  
}  
</style>  
<template>  
    <view class="container" :style="{ height: `${windowHeight}rpx`}">  
      <canvas  
        canvas-id="myCanvas"  
        :style="{ height: `${height}px` }"  
        @touchstart="handleTouchStart"  
        @touchmove="handleTouchMove"  
        @touchend="handleTouchEnd"  
      ></canvas>  
    </view>  
</template>  

<script setup>  
import { onLoad, onReady } from '@dcloudio/uni-app';  
import { onMounted, ref } from 'vue';  

const props = defineProps({  
  height: {  
    type: Number,  
    default: 3200,  
  },  
  windowHeight: {  
    type: Number,  
    default: 820,  
  },  
});  

const handleTouchStart = (e) => {  
  // 处理触摸开始事件  
};  

const handleTouchMove = (e) => {  
  // 处理触摸移动事件  
};  

const handleTouchEnd = (e) => {  
  // 处理触摸结束事件  
};  

onMounted(() => {  
  drawContent();  
});  

// onLoad(() => {  
//   drawContent();  
// });  
// onReady(() => {  
//   drawContent();    
//   console.log('页面渲染完成');    
// });  

const drawContent = () => {  
  // 在这里绘制你的内容  
  const ctx = uni.createCanvasContext("myCanvas");  
  const offsetY = 400;  
  // begin path  
  ctx.rect(10, offsetY + 10, 100, 30);  
  ctx.setFillStyle("yellow");  
  ctx.fill();  

  // begin another path  
  ctx.beginPath();  
  ctx.rect(10, offsetY + 40, 100, 30);  

  // only fill this rect, not in current path  
  ctx.setFillStyle("blue");  
  ctx.fillRect(10, offsetY + 70, 100, 30);  

  ctx.rect(10, offsetY + 100, 100, 30);  

  // it will fill current path  
  ctx.setFillStyle("red");  
  ctx.fill();  
  ctx.draw();  
  console.log('绘制完成');  
};  
</script>  

<style lang="scss" scoped>  
.container {  
  width: 100%;  
  overflow: auto;  
  box-shadow: inset 0 0 10px #ccc;  
  canvas {  
    width: 100%;  
    // border: 1rpx solid #ff0000;  
  }  
}  
</style>
2024-04-25 19:26 负责人:DCloud_UNI_LXH 分享
已邀请:

最佳回复

DCloud_UNI_LXH

DCloud_UNI_LXH

这不是Bug,在小程序自定义组件中使用时,需要传递当前组件实例的。文档

在 options API 中就是 this

在 composition API 是使用 getCurrentInstance() 获取到的实例

针对问题中的代码给出的伪代码是:

import { getCurrentInstance } from 'vue'  
const instance = getCurrentInstance()  
const drawContent = () => {  
    // ...  
    const ctx = uni.createCanvasContext('myCanvas', instance)  
    // ...  
}
  • 2***@qq.com (作者)

    经过测试,确实如此,这个是只有canvas在组件中使用才要这么用吗?我用别的自定义组件没有类似问题

    2024-05-15 11:47

  • 3***@qq.com

    我使用vue2的按这么做,也解决了,感谢

    2024-07-29 09:54

HRK_01

HRK_01

感谢反馈

  • 2***@qq.com (作者)

    要怎么才能实现canvas作为插件功能使用?需要等到下个版本修复才行吗

    2024-04-27 10:57

n***@techking.com

n***@techking.com

遇到同样的问题,封装成组件后,微信小程序绘图不显示,真机也不显示

n***@techking.com

n***@techking.com

遇到同样的问题,封装成组件后,微信小程序绘图不显示,真机也不显示

Joking

Joking

我也遇到相同的问题,有没有解决的方案吗

jones2000

jones2000 - https://github.com/jones2000/HQChart

小程序用canvas 2d, 老版的canvas官方都不维护了。
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

 <!-- canvas.wxml -->  
  <canvas type="2d" id="myCanvas"></canvas>  

// canvas.js  
Page({  
  onReady() {  
    const query = wx.createSelectorQuery()  
    query.select('#myCanvas')  
      .fields({ node: true, size: true })  
      .exec((res) => {  
        const canvas = res[0].node  
        const ctx = canvas.getContext('2d')  

        const dpr = wx.getSystemInfoSync().pixelRatio  
        canvas.width = res[0].width * dpr  
        canvas.height = res[0].height * dpr  
        ctx.scale(dpr, dpr)  

        ctx.fillRect(0, 0, 100, 100)  
      })  
  }  
})
2***@qq.com

2***@qq.com - 前端开发小菜鸡

  const ctx = uni.createCanvasContext("myCanvas",this);    

这个坑踩了好多次

p***@sina.com

p***@sina.com

怎么我传了this,也不行呢

要回复问题请先登录注册