xuhuihui 3 years ago
parent
commit
fedf0470ba
  1. 61
      04.系统编码/Frontend/src/model/heat-map-drawer.ts

61
04.系统编码/Frontend/src/model/heat-map-drawer.ts

@ -249,32 +249,43 @@ export class HeatMapDrawer{
//高度单位 //高度单位
private drawHeightText(): void { private drawHeightText(): void {
let name =['高','度','(','m',')']; // 文本内容 // 保存原有的canvas状态,供restore方法重置
let x = 70,y = 180; // 文字开始的坐标 this.canvasContext.save();
let letterSpacing = 20; // 设置字间距 let name = "高度(m)";
for(let i = 0; i < name.length; i++) { this.canvasContext.translate(90, this.height / 2 + this.paddingTop - this.canvasContext.measureText(name).width);
const str = name.slice(i, i + 1).toString(); this.canvasContext.rotate(Math.PI * 1.5);
if (str.match(/[A-Za-z0-9-()-]/) && (y < 576)) { // 非汉字 旋转 this.canvasContext.font="normal 24px 微软雅黑";
this.canvasContext.save(); this.canvasContext.fillStyle="#000000";
this.canvasContext.translate(x, y); this.canvasContext.fillText(name, 0, 0);
this.canvasContext.rotate(Math.PI / 180 * 90); this.canvasContext.restore();
this.canvasContext.textBaseline = 'bottom';
this.canvasContext.font = "normal 25px 微软雅黑"; // let name =['高','度','(','m',')']; // 文本内容
this.canvasContext.fillStyle = "#000000"; // let x = 70,y = 180; // 文字开始的坐标
this.canvasContext.fillText(str, 0, 0); // let letterSpacing = 10; // 设置字间距
this.canvasContext.restore(); // for(let i = 0; i < name.length; i++) {
y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度 // const str = name.slice(i, i + 1).toString();
} else if (str.match(/[\u4E00-\u9FA5]/) && (y < 576)) { // if (str.match(/[A-Za-z0-9-()-]/) && (y < 576)) { // 非汉字 旋转
this.canvasContext.save(); // this.canvasContext.save();
this.canvasContext.textBaseline = 'top'; // this.canvasContext.translate(x, y);
this.canvasContext.font = "normal 25px 微软雅黑"; // this.canvasContext.rotate(Math.PI / 180 * 90);
this.canvasContext.fillStyle = "#000000"; // this.canvasContext.textBaseline = 'bottom';
this.canvasContext.fillText(str, x, y); // this.canvasContext.font = "normal 20px 微软雅黑";
this.canvasContext.restore(); // this.canvasContext.fillStyle = "#000000";
y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度 // 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 { private drawTemperatureText(unit): void {
this.canvasContext.font = "normal 25px 微软雅黑"; this.canvasContext.font = "normal 25px 微软雅黑";

Loading…
Cancel
Save