无锡网站优化哪家快,防城港网站制作,制作图片库,小米手机网站架构在 Uni-app 中绘制多边形可以通过使用 Canvas API 来实现。Uni-app 是一个使用 Vue.js 开发所有前端应用的框架#xff0c;同时支持编译为 H5、小程序等多个平台。由于 Canvas 是 H5 和小程序中都支持的 API#xff0c;所以通过 Canvas 绘制多边形是一个比较通用的方法。
1.…在 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)所以需要一些方法进行处理。如你没有转换需求可自行删除。
templateview classlayout-wrapview classdraw-wrapview classcamera-wrapimg:style{ width: ${canvasWidth}px, height: ${canvasHeight}px }:srccameraUrlmodeaspectFillclasspopup-img/canvasidmyCanvascanvas-idmyCanvastouchstartonTouchStarttouchendonTouchEnd:style{ width: ${canvasWidth}px, height: ${canvasHeight}px }/canvas/view/viewview classbtn-wrapview classbtn reset-btn clickhandleClear清 除/viewview classbtn clickhandleSubmit确 定/view/view/view
/templatescript
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 langscss 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方法需要加延时。
