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>
2***@qq.com (作者)
经过测试,确实如此,这个是只有canvas在组件中使用才要这么用吗?我用别的自定义组件没有类似问题
2024-05-15 11:47
3***@qq.com
我使用vue2的按这么做,也解决了,感谢
2024-07-29 09:54