uni-app在image上绘制点位并回显

在 Uni-app 中绘制多边形可以通过使用 Canvas API 来实现。Uni-app 是一个使用 Vue.js 开发所有前端应用的框架，同时支持编译为 H5、小程序等多个平台。由于 Canvas 是 H5 和小程序中都支持的 API，所以通过 Canvas 绘制多边形是一个比较通用的方法。

1. 创建一个新的 Uni-app 项目（如果还没有的话）

vue create -p dcloudio/uni-preset-vue my-uni-app
cd my-uni-app

2. 开始绘制

背景：在image上绘制多边形，并将点位回传。回传后的数据格式'(1,2),(3,4)'，所以需要一些方法进行处理。如你没有转换需求，可自行删除。

<template><view class="layout-wrap"><view class="draw-wrap"><view class="camera-wrap"><img:style="{ width: `${canvasWidth}px`, height: `${canvasHeight}px` }":src="cameraUrl"mode="aspectFill"class="popup-img"/><canvasid="myCanvas"canvas-id="myCanvas"@touchstart="onTouchStart"@touchend="onTouchEnd":style="{ width: `${canvasWidth}px`, height: `${canvasHeight}px` }"></canvas></view></view><view class="btn-wrap"><view class="btn reset-btn" @click="handleClear">清 除</view><view class="btn" @click="handleSubmit">确 定</view></view></view>
</template><script>
import { addCameraRegion, getCameraId } from "@/api/cabinet";
import config from "@/config";
const baseUrl = config.baseUrl;
export default {name: "draw",data() {return {points: [], // 存储触摸点canvasWidth: "",canvasHeight: "",ctx: "",cameraUrl: "",rate: "",touchNum: 0,};},onShow() {this.init();},methods: {init() {// 获取配置及绘制图形getCameraId(config.hostInfoId).then((res) => {const data = res.data;this.monitorPoints = data.monitorPoints;this.rate =  data.monitorWidth / data.monitorHeight;this.canvasWidth = 1000this.canvasHeight = this.canvasWidth / this.rate;this.cameraUrl =baseUrl +"/api/monitor/player?cameraId=" +data.monitorCameraId +"&time=" +new Date().getTime();const ctx = uni.createCanvasContext("myCanvas");this.ctx = ctx;this.touchNum = 0this.setRect();});},onTouchStart(e) {if (this.touchNum === 0) {this.handleClear()}this.touchNum++;const touch = e.touches[0];this.points.push({ x: touch.x, y: touch.y });},onTouchEnd(e) {this.drawPolygon();this.ctx.draw();},drawPolygon() {const ctx = this.ctx;ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清除画布ctx.setStrokeStyle("#00ff00"); // 设置多边形边框颜色// 设置填充样式和透明度ctx.setLineWidth(10); // 设置多边形边框宽度ctx.beginPath();this.points.forEach((point, index) => {if (index === 0) {ctx.moveTo(point.x, point.y);} else {ctx.lineTo(point.x, point.y);}});// 如果需要闭合多边形，取消注释以下行ctx.closePath();ctx.stroke();// 绘制填充ctx.setFillStyle("rgba(0, 255, 0, 0.4)");ctx.fill();},// 根据之前的数据回显多边形（如果有的话）setRect() {try {const pointsArr = this.monitorPoints.slice(1, -1).split("),(");if (pointsArr && pointsArr.length > 1) {pointsArr.map((p) => {this.points.push({x: Math.round(p.split(",")[0] / this.rate),y: Math.round(p.split(",")[1] / this.rate),});});console.log(this.canvasWidth, this.canvasHeight);console.log(this.points);this.drawPolygon();setTimeout(() => {//必须延迟执行 不然H5不显示this.ctx.draw(); //必须加上  uniapp 没这儿玩意儿 显示不出来不比原生  不加可以显示}, 200);}} catch (error) {console.error("绘制多边形时出错：", error);}},// 提交    handleSubmit() {if (this.points.length > 1) {// 转换并发送多边形的顶点坐标const scaledPoints = [];this.points.map((point) => {scaledPoints.push(`(${Math.round(point.x * this.rate)},${Math.round(point.y * this.rate)})`);});// 提交请求} else {uni.showToast({title: "请绘制",icon: "none",});}},// 清除handleClear() {this.points = [];this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 清除画布this.ctx.draw();},},
};
</script>
<style lang="scss" scoped>
.draw-wrap {position: relative;margin-top: 2vh;left: 7vw;
}
.camera-wrap {height: 76vh;
}
.popup-img {position: absolute;top: 0;left: 0;object-fit: contain;border: 6rpx solid #093763;box-sizing: border-box;
}#myCanvas {position: absolute;top: 0;left: 0;
}
</style>

3. 效果图

4. 解释

• uni.createCanvasContext('myCanvas') 用于获取 Canvas 的绘图上下文。
• ctx.setStrokeStyle('red') 和 ctx.setLineWidth(10) 用于设置描边颜色和宽度。
• ctx.beginPath() 开始一个新的路径。
• ctx.moveTo(points[0].x, points[0].y) 和 ctx.lineTo(points[i].x, points[i].y) 用于绘制线段。
• ctx.closePath() 闭合路径，使之成为一个多边形。
• ctx.stroke() 描边。
• ctx.setFillStyle('rgba(30, 144, 255,0.5)') 和 ctx.fill() 用于填充多边形。
• ctx.draw() 将所有绘图操作提交到 Canvas 上。

5. 坑

回显的时候，苦恼了很久，为什么点位已经传入，不能回显。后来发现，是draw方法需要加延时。