TrackOffical/utils/map/mapCanvas.js

// 已弃用

let ctx = null
let systemInfo = null
let canvasW = 0	// 画布宽度 px
let canvasH = 0 // 画布高度 px
let scale = 1.0	// 地图缩放比例
export default {
	async initCanvas(canvasId, instance) {
		ctx = uni.createCanvasContext(canvasId, instance)
		// 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
		let [err, systemInfo]  = await uni.getSystemInfo()
		// systemInfo = await this.getSystemInfo()
		console.log("[initCanvas] systemInfo", systemInfo)
		canvasW = systemInfo.windowWidth; // 画布宽度
		canvasH = systemInfo.windowHeight - 60; // 画布高度
		console.log("[initCanvas] ", canvasW, canvasH)
	},
	async handleDrawMap(mapUrl) {
		this.drawMapBg(mapUrl)
		// await this.draw(false)
		let posArr = [
			{
				x: canvasW / 2,
				y: canvasH / 2,
				color: 'red'
			}, {
				x: 100,
				y: 100,
				color: 'green'
			}, {
				x: 300,
				y: 300,
				color: ''
			}
		]
		let radius = 20
		this.drawPosArr(posArr, radius)
		this.drawPosArr(posArr, 30)
		ctx.strokeRect(100, 10, 150, 100)
		
		// 以原点为中心，原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。
		// rotate	Number	旋转角度，以弧度计(degrees * Math.PI/180；degrees范围为0~360)
		ctx.rotate(20 * Math.PI / 180)
		
		// 在调用scale方法后，之后创建的路径其横纵坐标会被缩放。多次调用scale，倍数会相乘。
		ctx.scale(2, 2)
		ctx.strokeRect(100, 10, 150, 100)
		
		
		ctx.rotate(-20 * Math.PI / 180)
		
		ctx.setLineDash([20, 30], 20)
		ctx.beginPath()
		ctx.moveTo(0,100)
		ctx.lineTo(600, 100)
		ctx.stroke()
		
		await this.draw()
	},
	drawMapBg(mapUrl) {
		// 填充背景色，白色
		// ctx.setFillStyle('#fff'); // 默认白色
		// ctx.fillRect(0, 0, canvasW, canvasH) // fillRect(x,y,宽度,高度)
		console.log("[drawMapBg] ", canvasW, canvasH)
		// ctx.drawImage(mapUrl, 0, 0, 1180, 666) // drawImage(图片路径,x,y,绘制图像的宽度,绘制图像的高度)
		ctx.drawImage(mapUrl, 0, 0, canvasW, canvasH) // drawImage(图片路径,x,y,绘制图像的宽度,绘制图像的高度)
	},
	// x	Number  圆的x坐标
	// y	Number	圆的y坐标
	// r	Number	圆的半径
	drawPos(x, y, r, color = 'blue') {
		// ctx.setFillStyle('#ff0000'); // 默认白色
		// ctx.fillRect(0, 0, 100, 200) // fillRect(x,y,宽度,高度)
		ctx.beginPath()
		ctx.setLineWidth(3)
		ctx.arc(x, y, r, 0, 2 * Math.PI)
		ctx.setStrokeStyle(color)
		ctx.stroke()
	},
	drawPosArr(posArr, radius, defaultColor = 'blue') {
		for (var i = 0; i < posArr.length; i++) {
			let color = (posArr[i].color != '') ? posArr[i].color : defaultColor
			this.drawPos(posArr[i].x, posArr[i].y, radius, color)
		}
	},
	async draw(reserve = true) {
		// draw方法 把以上内容画到 canvas 中
		ctx.draw(reserve, (ret) => {
			console.log("[draw] 绘制完成")
			// uni.showToast({
			// 	icon: 'success',
			// 	mask: true,
			// 	title: '绘制完成',
			// });
		});
	},
	// 获取图片信息
	getImageInfo(image) {
		return new Promise((req, rej) => {
			uni.getImageInfo({
				src: image,
				success: function(res) {
					req(res)
				},
			});
		})
	},

	// 获取设备信息
	getSystemInfo() {
		return new Promise((req, rej) => {
			uni.getSystemInfo({
				success: function(res) {
					req(res)
				}
			});
		})
	},
}