From 7442c9ea5e907c69597d7aa1da0fc4942c2480a0 Mon Sep 17 00:00:00 2001 From: xiaowuler Date: Wed, 19 Jan 2022 17:51:41 +0800 Subject: [PATCH] modify some codes --- .../Frontend/src/uilts/box-drawer.ts | 55 +++++++++++++++++-- 1 file changed, 50 insertions(+), 5 deletions(-) diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts index 531f029..c5235e8 100644 --- a/04.系统编码/Frontend/src/uilts/box-drawer.ts +++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts @@ -28,6 +28,9 @@ export class BoxDrawer{ private verticalScaleIntervalLength: number = 0; private horizontalScaleIntervalLength: number = 0; + private paddingColorLeft: number = 50; + private defaultColorWidth: number = 30; + constructor(width: number, height: number, colorChart: ColorChart, values: any) { this.width = width; this.height = height; @@ -36,15 +39,57 @@ export class BoxDrawer{ this.init(); this.drawCoordinate(); + this.drawColorChart(); this.draw(); this.base64Image = this.canvas.toDataURL(); } + private drawColorChart(): void { + let startX = this.paddingLeft + this.horizontalScaleLine + this.borderWidth + this.paddingColorLeft; + let heightInterval = 0; + let startY = this.paddingTop + this.verticalScaleLine + heightInterval; + let interval = (this.borderHeight - heightInterval) / (this.colorChart.colors.length) + + this.canvasContext.font = "normal 18px Verdana"; + this.canvasContext.fillStyle = "#000000"; + + for(let lastLen = this.colorChart.colors.length - 1, index = lastLen; index >= 0; index --){ + const targetIndex = lastLen - index; + const _y = startY + index * interval; + + this.canvasContext.fillStyle = this.colorChart.colors[targetIndex]; + this.canvasContext.fillRect(startX, _y, this.defaultColorWidth, interval); + + this.canvasContext.fillStyle = "#000000"; + if (index == 0){ + if (this.colorChart.showStartValue){ + const text = this.colorChart.values[targetIndex + 1]; + this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + 9); + } + + const text = this.colorChart.values[targetIndex]; + this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + interval + 9); + }else if (index == lastLen){ + if (this.colorChart.showEndValue){ + console.log("sss") + const text = this.colorChart.values[targetIndex]; + this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + interval + 9); + } + + const text = this.colorChart.values[targetIndex + 1]; + this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + 9); + }else{ + const text = this.colorChart.values[targetIndex]; + this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + interval + 9); + } + } + } + private draw(): void{ let startX = this.paddingLeft + this.horizontalScaleLine - this.verticalScaleIntervalLength / 2; let startY = this.paddingTop + this.verticalScaleLine - this.horizontalScaleIntervalLength / 2; for(let dataIndex = 0, len = this.values.radar_data.length, lastDataLen = len - 1; dataIndex < len; dataIndex++){ - // if (dataIndex > 0) return; + let value = this.values.radar_data[dataIndex]; for(let lastInfoLen = this.values.radar_info.length - 1, infoIndex = lastInfoLen; infoIndex >= 0; infoIndex--){ let x = startX + dataIndex * this.verticalScaleIntervalLength; let y = startY + (this.borderHeight - infoIndex * this.horizontalScaleIntervalLength); @@ -65,7 +110,7 @@ export class BoxDrawer{ height = height / 2; } - let color = this.colorChart.getColor(this.values.radar_data[dataIndex][this.values.radar_info[infoIndex].col_name]); + let color = this.colorChart.getColor(value[this.values.radar_info[infoIndex].col_name]); if (color == null) continue; this.canvasContext.fillStyle = color; this.canvasContext.fillRect(x, y, width, height); @@ -133,7 +178,7 @@ export class BoxDrawer{ private drawHorizontalScale(): void{ let scaleCount = this.values.radar_info.length; this.horizontalScaleIntervalLength = this.borderHeight / (scaleCount - 1); - let scaleSpecial = parseInt((scaleCount * 1.0 / this.verticalScaleSpecialCount).toString()); + let scaleSpecial = parseInt((scaleCount * 1.0 / this.horizontalScaleSpecialCount).toString()); let startX = this.paddingLeft + this.horizontalScaleLine; let startY = this.paddingTop + this.verticalScaleLine; const lastLen = scaleCount - 1; @@ -189,8 +234,8 @@ export class BoxDrawer{ export class ColorChart{ - private colors: any = null; - private values: any = null; + public colors: any = null; + public values: any = null; public showStartValue: boolean = false; public showEndValue: boolean = false;