From 51a883b9da4572b9ebb1ec5d733c3c483eef67ff Mon Sep 17 00:00:00 2001 From: xiaowuler Date: Thu, 5 May 2022 14:02:19 +0800 Subject: [PATCH] modify some codes --- .../Frontend/src/model/heat-map-drawer.ts | 61 +++++++++++-------- 1 file changed, 36 insertions(+), 25 deletions(-) diff --git a/04.系统编码/Frontend/src/model/heat-map-drawer.ts b/04.系统编码/Frontend/src/model/heat-map-drawer.ts index 338029c..1838a57 100644 --- a/04.系统编码/Frontend/src/model/heat-map-drawer.ts +++ b/04.系统编码/Frontend/src/model/heat-map-drawer.ts @@ -249,32 +249,43 @@ export class HeatMapDrawer{ //高度单位 private drawHeightText(): void { - let name =['高','度','(','m',')']; // 文本内容 - let x = 70,y = 180; // 文字开始的坐标 - let letterSpacing = 20; // 设置字间距 - for(let i = 0; i < name.length; i++) { - const str = name.slice(i, i + 1).toString(); - if (str.match(/[A-Za-z0-9-()-]/) && (y < 576)) { // 非汉字 旋转 - this.canvasContext.save(); - this.canvasContext.translate(x, y); - this.canvasContext.rotate(Math.PI / 180 * 90); - this.canvasContext.textBaseline = 'bottom'; - this.canvasContext.font = "normal 25px 微软雅黑"; - this.canvasContext.fillStyle = "#000000"; - this.canvasContext.fillText(str, 0, 0); - this.canvasContext.restore(); - y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度 - } else if (str.match(/[\u4E00-\u9FA5]/) && (y < 576)) { - this.canvasContext.save(); - this.canvasContext.textBaseline = 'top'; - this.canvasContext.font = "normal 25px 微软雅黑"; - this.canvasContext.fillStyle = "#000000"; - this.canvasContext.fillText(str, x, y); - this.canvasContext.restore(); - y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度 - } - } + // 保存原有的canvas状态,供restore方法重置 + this.canvasContext.save(); + let name = "高度(m)"; + this.canvasContext.translate(90, this.height / 2 + this.paddingTop - this.canvasContext.measureText(name).width); + this.canvasContext.rotate(Math.PI * 1.5); + this.canvasContext.font="normal 24px 微软雅黑"; + this.canvasContext.fillStyle="#000000"; + this.canvasContext.fillText(name, 0, 0); + this.canvasContext.restore(); + + // let name =['高','度','(','m',')']; // 文本内容 + // let x = 70,y = 180; // 文字开始的坐标 + // let letterSpacing = 10; // 设置字间距 + // for(let i = 0; i < name.length; i++) { + // const str = name.slice(i, i + 1).toString(); + // if (str.match(/[A-Za-z0-9-()-]/) && (y < 576)) { // 非汉字 旋转 + // this.canvasContext.save(); + // this.canvasContext.translate(x, y); + // this.canvasContext.rotate(Math.PI / 180 * 90); + // this.canvasContext.textBaseline = 'bottom'; + // this.canvasContext.font = "normal 20px 微软雅黑"; + // this.canvasContext.fillStyle = "#000000"; + // this.canvasContext.fillText(str, 0, 0); + // this.canvasContext.restore(); + // y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度 + // } else if (str.match(/[\u4E00-\u9FA5]/) && (y < 576)) { + // this.canvasContext.save(); + // this.canvasContext.textBaseline = 'top'; + // this.canvasContext.font = "normal 20px 微软雅黑"; + // this.canvasContext.fillStyle = "#000000"; + // this.canvasContext.fillText(str, x, y); + // this.canvasContext.restore(); + // y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度 + // } + // } } + //温度单位 private drawTemperatureText(unit): void { this.canvasContext.font = "normal 25px 微软雅黑";