Uni-app开发Canvas当子组件示例，点点绘制图形

前言

使用Uni-app 实现封装一个Canvas渲染的子组件，实现通过传入两点绘制一条完整的路程
具体逻辑看我发的后端和数据库设计
C# 根据两点名称，寻找两短路程的最优解，【有数据库设计，完整代码】

即使不了解具体逻辑，该文章同样可以帮助想要实现使用Canvas当子组件，以及点点绘制图形问题的疑惑

注意事项

问题一：在使用canvas开发时为什么图形没有渲染

1.注意画布的尺寸canvas 标签默认宽度300px、高度150px
2.同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作

问题二：为什么当子组件时Canvas渲染不出来

1.没有写canvas-id
2.uni.createCanvasContext方法没有传入组件实例（单独作为组件引入时,vue2为this,vue3为getCurrentInstance（））
3.canvas标签上写了type=“2d”（单独作为组件引入时）
4.没有在onReady或者onMounted生命周期里实列话canvas

Uni-app代码

子组件

<template><view class="countStyle"><scroll-view scroll-x scroll-y><view class="bgimg" :style="{ 'background-image': 'url(' + imager + ')' }"><canvas canvas-id="firstCanvas" id="firstCanvas" class="cansStyle" /></view></scroll-view></view>
</template><script setup>import { ref, onMounted, getCurrentInstance } from 'vue';import config from '@/config';import { VerifyPilot } from './canvasConfig.js';const imager = ref(config.config.baseUrl + '/wximages/menu/unloadWork.png');const points = ref([]);const instance = getCurrentInstance()const props = defineProps({PtName: "",});// 在组件加载后获取数据并绘制onMounted(() => {VerifyPilot({ PtName: props.PtName }).then((val) => {for (let i = 0; i < val.data.length; i++) {const { xAxis, yAxis } = val.data[i];points.value.push({ x: xAxis, y: yAxis });}drawPolyline();});});function drawPolyline() {const canvas = uni.createCanvasContext('firstCanvas', instance);canvas.setStrokeStyle("#ffff00");canvas.setLineWidth(5);canvas.moveTo(points.value[0].x, points.value[0].y);for (let i = 1; i < points.value.length; i++) {canvas.lineTo(points.value[i].x, points.value[i].y);}canvas.stroke();canvas.draw();}
</script><style lang="scss" scoped>.countStyle {overflow: auto;}.bgimg {height: 600px;width: 450px;background-size: cover;background-repeat: no-repeat;background-position: center;}.cansStyle {height: 600px;width: 450px;}
</style>

父组件

<template><div class="my-img-div"><dotBitmap :PtName='PtName' /></div>
</template><script setup>import dotBitmap from "@/pages/driver/dotBitmap/index"import { ref } from 'vue'const PtName = ref('GM3,K8F')
</script><style lang="scss" scoped>.my-img-div {width: 100%;}
</style>

手机尺寸兼容

上述代码，通过scroll-view,我们可以对图片进行上下滑动，但有些需求是图片要自适应手机宽度，可以参考该连接uni-app使用canvas适配手机宽高进行渲染