光伏功能逻辑代码及BUG修改

components/new-canvas/index.vue

@@ -50,12 +50,18 @@
 		watch: {
 			canvasData: {
 				handler(val) {
-					if (val && val.length) {
-						this.getSystemInfo()
+					// 等待 windowWidth 初始化完成后再绘制
+					if (this.windowWidth) {
+					  this.draw(null); // 直接绘制
+					} else {
+					  // 若 windowWidth 未获取，先获取再绘制
+					  this.getSystemInfo().then(() => {
+						this.draw(null);
+					  });
 					}
 				},
 				deep: true,
-				immediate: true
+				immediate: false
 			}
 		},
 		mounted() {
@@ -216,58 +222,73 @@
 				})
 
 			},
-			countChineseAndEnglishCharacters(str, x) {
-				var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ?
-					str.match(/[\u4e00-\u9fa5]/g).length :
-					0;
-				var englishCount = str.match(/[a-zA-Z]/g) ?
-					str.match(/[a-zA-Z]/g).length :
-					0;
-				var otherCount = str.length - chineseCount - englishCount;
-				const obj = {
-					otherCount: otherCount,
-					chineseCount: chineseCount,
-					englishCount: englishCount,
-				};
-				return (
-					obj.englishCount * 6 + obj.chineseCount * 12 + obj.otherCount * 7.5 + x
-				);
-			},
+			// countChineseAndEnglishCharacters(str, x) {
+			// 	var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ?
+			// 		str.match(/[\u4e00-\u9fa5]/g).length :
+			// 		0;
+			// 	var englishCount = str.match(/[a-zA-Z]/g) ?
+			// 		str.match(/[a-zA-Z]/g).length :
+			// 		0;
+			// 	var otherCount = str.length - chineseCount - englishCount;
+			// 	const obj = {
+			// 		otherCount: otherCount,
+			// 		chineseCount: chineseCount,
+			// 		englishCount: englishCount,
+			// 	};
+			// 	return (
+			// 		obj.englishCount * 6 + obj.chineseCount * 12 + obj.otherCount * 7.5 + x
+			// 	);
+			// },
 
 			drawText(draw) {
-				draw.forEach((item, index) => {
-					if (item.font.length) {
-						if (item.font.length > 1) {
-							item.font.forEach((item2, index2) => {
-								if (this.type === 'app') {
-									this.ctx.setFontSize(item2.size)
-								} else {
-									this.ctx.fontSize = item2.size
-								}
-								this.ctx.fillStyle = item2.color
-								const x = this.countChineseAndEnglishCharacters(item.font[0].text, item
-									.coord[0][0])
-								this.ctx.fillText(item2.text, this.fitSize(index2 === 1 ? x : item.coord[0]
-									[0]), this.fitSize(item.coord[0][1]))
-								this.ctx.closePath()
-							})
-						} else {
-							if (this.type === 'app') {
-								this.ctx.setFontSize(item.font[0].size)
-							} else {
-								this.ctx.fontSize = item.font[0].size
-							}
-							this.ctx.fillStyle = item.font[0].color
-							this.ctx.fillText(item.font[0].text, this.fitSize(item.coord[0][0]), this.fitSize(item
-								.coord[0][1]))
-							this.ctx.closePath()
-						}
-
-
-					}
-				})
-
-
+			  draw.forEach((item, index) => {
+			    if (item.font.length) {
+			      // 记录前一个文本的结束位置（用于后续文本偏移）
+			      let prevTextEndX = this.fitSize(item.coord[0][0]);
+			      
+			      item.font.forEach((item2, index2) => {
+			        // 设置字体大小和颜色
+			        if (this.type === 'app') {
+			          this.ctx.setFontSize(item2.size);
+			        } else {
+			          this.ctx.font = `${item2.size}px sans-serif`; // 小程序端补全font属性
+			        }
+			        this.ctx.fillStyle = item2.color;
+			
+			        // 计算当前文本的绘制X坐标
+			        let currentX = prevTextEndX;
+			        // 非第一个文本，加上配置的偏移量（默认8px）
+			        if (index2 > 0) {
+			          const offsetX = item2.offsetX || 6;
+			          currentX += this.fitSize(offsetX); // 适配设备尺寸的偏移量
+			        }
+			
+			        // 绘制文本
+			        this.ctx.fillText(
+			          item2.text,
+			          currentX,
+			          this.fitSize(item.coord[0][1])
+			        );
+			
+			        // 更新前一个文本的结束位置（当前文本的X + 文本宽度）
+			        const textWidth = this.getTextWidth(item2.text, item2.size);
+			        prevTextEndX = currentX + textWidth;
+			
+			        this.ctx.closePath();
+			      });
+			    }
+			  });
+			},
+			// 新增：计算文本的实际绘制宽度（适配app/小程序）
+			getTextWidth(text, fontSize) {
+			  if (this.type === 'app') {
+			    // App端通过measureText计算
+			    return this.ctx.measureText(text).width;
+			  } else {
+			    // 小程序端手动计算（更稳定）
+			    this.ctx.font = `${fontSize}px sans-serif`;
+			    return this.ctx.measureText(text).width;
+			  }
 			},
 			drawImages(draw, canvas) {
 				let x,
@@ -350,9 +371,12 @@
 				})
 			},
 			fitSize(coordinate) {
-				let newWindowWidth = this.windowWidth //这个windowWidth指的是该设备宽度，可以onLoad监听页面加载中获取
-				let v = 375 / newWindowWidth //375是设计稿的大小，得到的v值是：设计稿和设备宽度的比例关系，也可理解成在设计稿的大小基础上放大或缩小的倍数
-				return coordinate / v //返回的是当前坐标值或者大小与v的比例
+			  let newWindowWidth = this.windowWidth;
+			  const designWidth = 375; // 设计稿宽度
+			  // 修正比例计算：设备宽度 / 设计稿宽度 = 缩放比例
+			  const scale = newWindowWidth / designWidth;
+			  // 设计稿的坐标 * 缩放比例 = 设备实际坐标
+			  return coordinate * scale;
 			}
 
 		},