<template>
<view class="app-container">
<view v-for="item in 20" :key="item" class="warp-item" @click="open">
占位元素
</view>
<uni-popup ref="popup" type="bottom" background-color="#FFFFFF">
<canvas canvas-id="my-canvas" class="my-canvas"></canvas>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
const context = uni.createCanvasContext("my-canvas", this)
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
context.draw()
},
methods: {
open() {
this.$refs.popup.open()
}
}
}
</script>
<style scoped lang="scss">
.app-container {
height: 100vh;
background-color: #CCCCCC;
overflow-y: auto;
.warp-item {
height: 100rpx;
background-color: #FFFFFF;
margin-bottom: 10rpx;
display: flex;
justify-content: center;
align-items: center;
}
.my-canvas {
width: 100%;
height: 500rpx;
}
}
</style>
- 发布:2024-01-09 19:03
- 更新:2024-01-10 19:58
- 阅读:289
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: windows 11
HBuilderX类型: 正式
HBuilderX版本号: 3.8.7
第三方开发者工具版本号: 1.06.2308310
基础库版本号: 3.3.1
项目创建方式: HBuilderX
示例代码:
操作步骤:
滑动列表,滚动到中间或底部,然后点击占位元素,弹窗中的canvas绘制出现偏移,只在真机中存在问题,修改.app-container的高度为height: calc(100vh - 1px);即可解决问题,不知道是否属于bug
滑动列表,滚动到中间或底部,然后点击占位元素,弹窗中的canvas绘制出现偏移,只在真机中存在问题,修改.app-container的高度为height: calc(100vh - 1px);即可解决问题,不知道是否属于bug
预期结果:
滑动列表,滚动到中间或底部,然后点击占位元素,弹窗中的canvas绘制出现偏移,只在真机中存在问题,修改.app-container的高度为height: calc(100vh - 1px);即可解决问题,不知道是否属于bug
滑动列表,滚动到中间或底部,然后点击占位元素,弹窗中的canvas绘制出现偏移,只在真机中存在问题,修改.app-container的高度为height: calc(100vh - 1px);即可解决问题,不知道是否属于bug
实际结果:
滑动列表,滚动到中间或底部,然后点击占位元素,弹窗中的canvas绘制出现偏移,只在真机中存在问题,修改.app-container的高度为height: calc(100vh - 1px);即可解决问题,不知道是否属于bug
滑动列表,滚动到中间或底部,然后点击占位元素,弹窗中的canvas绘制出现偏移,只在真机中存在问题,修改.app-container的高度为height: calc(100vh - 1px);即可解决问题,不知道是否属于bug
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信
我测试了你提供的代码,的确有这个 canvas 漂移的问题,真机调试发现 canvas 元素本身的位置是正确的,但实际回执的位置不对。
使用新版本的 canvas 写法,弹窗后重新绘制,位置是正常的,怀疑是微信旧版的 canvas 处理不当。
Miss丶盟 (作者)
好的,感谢反馈,我这边试一下新版写法看看
2024-01-17 09:26