@cataract6545/tmui/components/tm-render/tmCv/shape/text.ts

tm-vuetify是一个新势力由主题驱动的UI组件库,相比其它优势大,组件全,设计趋势紧跟未来。具有主题生成，主题实时切换，暗黑实时切换,lottie动画,图表等新颖功能,tmui TMUI

import { Shape } from "../shape";

export class tmTextLabel extends Shape {
	textHeight: number = 0
	private drawText(text: string, x: number, y: number, maxWidth: number, lineHeight: number) {
		if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
			return;
		}

		var context = this.canvas.ctx;

		// 字符分隔为数组
		var arrText = text.split('');
		var line = '';
		const _x = x;
		let _x_t = _x
		let lines = 1;
		for (var n = 0; n < arrText.length; n++) {
			var testLine = line + arrText[n];
			var metrics = context?.measureText(testLine) ?? 14;
			var testWidth = metrics.width;
			if (this.textAlign == 'center') {
				_x_t = x + (maxWidth - testWidth / 2) / 2 + this.fontSize
			}
			if (this.textAlign == 'right') {
				_x_t = maxWidth - x
			}
			if (testWidth > maxWidth && n > 0) {
				context?.fillText(line, _x_t, y);
				line = arrText[n];
				y += lineHeight;
				lines++
			} else {
				line = testLine;

			}
		}
		this.textHeight = lines * lineHeight
		context?.fillText(line, _x_t, y);
	}
	draw(): this {
		if (!this.canvas.ctx) return this;
		let ctx = this.canvas.ctx;
		const x = this.x;
		const y = this.y;
		const width = this.width;
		const height = this.height;
		const fillStyle = this.fillStyle;
		const strokeStyle = this.strokeStyle;
		const lineWidth = this.lineWidth

		const maxWidth = this.textMaxWidth || this.canvas.opts.width
		const text = this.text
		const letterSpace = this.letterSpace;
		const fontSize = this.fontSize;
		const lineHeight = fontSize * 1.5

		ctx.beginPath();

		if (ctx.setFillStyle) {
			ctx.setFillStyle(fillStyle)
			ctx.setLineWidth(lineWidth)
			ctx.setStrokeStyle(strokeStyle)
			ctx.setLineJoin(this.lineJoin)
			ctx.setLineDash(this.lineDash, this.lineDashOffset)
			ctx.setTextBaseline('top')
			ctx.setFontSize(fontSize)
			ctx.setTextAlign(this.textAlign)
		} else {
			ctx.fillStyle = fillStyle;
			ctx.lineWidth = lineWidth;
			ctx.strokeStyle = strokeStyle;
			ctx.lineJoin = this.lineJoin
			ctx.setLineDash(this.lineDash, this.lineDashOffset)
			ctx.textBaseline = 'top'
			ctx.font = fontSize + "px sans-serif"
			ctx.textAlign = this.textAlign
		}

		this.drawText(text, x, y, maxWidth, lineHeight)
		ctx.fill()
		ctx.stroke()

		return this;
	}
}