TypeScript chars.default函数代码示例

	private drawBodyText(
		context: CanvasRenderingContext2D,
		ratio: number,
		forceSmallerFirstLine: boolean
	): void {
		let xPos = 0;
		let yPos = 0;
		let italic = 0;
		let bold = 0;
		let lineCount = 0;
		let justLineBreak: boolean;
		// size of the description text box
		const bodyWidth = this.parent.bodyTextCoords.dWidth;
		const bodyHeight = this.parent.bodyTextCoords.dHeight;
		// center of description box (x, y)
		const centerLeft = this.parent.bodyTextCoords.dx + bodyWidth / 2;
		const centerTop = this.parent.bodyTextCoords.dy + bodyHeight / 2;

		const bodyText = this.parseBodyText(this.parent.getBodyText());
		this.sunwell.log("Body text", bodyText);

		const words: string[] = [];
		const breaker = new LineBreaker(bodyText);
		let last = 0;
		let bk;
		while ((bk = breaker.nextBreak())) {
			words.push(bodyText.slice(last, bk.position).replace("\n", ""));
			last = bk.position;
			if (bk.required) {
				words.push("\n");
			}
		}
		this.sunwell.log("Words", words);

		const bufferText = this.sunwell.getBuffer(bodyWidth, bodyHeight, true);
		const bufferTextCtx = bufferText.getContext("2d");
		bufferTextCtx.fillStyle = this.parent.bodyTextColor;

		let fontSize = this.sunwell.options.bodyFontSize;
		let lineHeight = this.sunwell.options.bodyLineHeight;
		const totalLength = bodyText.length;
		this.sunwell.log("Length of text is " + totalLength);

		const bufferRow = this.sunwell.getBuffer(bufferText.width, lineHeight, true);
		const bufferRowCtx = bufferRow.getContext("2d");
		bufferRowCtx.fillStyle = this.parent.bodyTextColor;
		// bufferRowCtx.textBaseline = this.sunwell.options.bodyBaseline;

		// XXX: manual breaks can be anywhere, not just at the beginning
		// cf. AT_132 locale ruRU
		const manualBreak = bodyText.indexOf(CTRL_MANUAL_LINEBREAKS) === 0;
		if (manualBreak) {
			let maxWidth = 0;
			bufferRowCtx.font = this.getFontMaterial(fontSize, false, false);
			bodyText.split("\n").forEach((line: string) => {
				const width = this.getLineWidth(bufferRowCtx, fontSize, line);
				if (width > maxWidth) {
					maxWidth = width;
				}
			});
			if (maxWidth > bufferText.width) {
				const r = bufferText.width / maxWidth;
				fontSize *= r;
				lineHeight *= r;
			}
		} else {
			if (totalLength >= 65) {
				fontSize = this.sunwell.options.bodyFontSize * 0.95;
				lineHeight = this.sunwell.options.bodyLineHeight * 0.95;
			}

			if (totalLength >= 80) {
				fontSize = this.sunwell.options.bodyFontSize * 0.9;
				lineHeight = this.sunwell.options.bodyLineHeight * 0.9;
			}

			if (totalLength >= 100) {
				fontSize = this.sunwell.options.bodyFontSize * 0.8;
				lineHeight = this.sunwell.options.bodyLineHeight * 0.8;
			}

			if (totalLength >= 120) {
				fontSize = this.sunwell.options.bodyFontSize * 0.62;
				lineHeight = this.sunwell.options.bodyLineHeight * 0.8;
			}
		}

		bufferRowCtx.font = this.getFontMaterial(fontSize, !!bold, !!italic);
		bufferRow.height = lineHeight;

		let smallerFirstLine = false;
		if (
			forceSmallerFirstLine ||
			(totalLength >= 75 && this.parent.cardDef.type === CardType.SPELL)
		) {
			smallerFirstLine = true;
		}

		for (const word of words) {
			const cleanWord = word.trim().replace(/<((?!>).)*>/g, "");
//.........这里部分代码省略.........

function getCharDimensions(text: string, textContext) {
	const dim = [];
	const em = textContext.measureText("M").width;
	for (const char of chars(text)) {
		textContext.save();
		const scale = {x: 1, y: 1};
		let charWidth = textContext.measureText(char).width + 0.1 * em;
		switch (char) {
			case " ":
				charWidth = 0.2 * em;
				break;
			case "'": // see "Death's Bite"
				charWidth = 0.27 * em;
				scale.x = 0.5;
				scale.y = 1;
				break;
		}
		dim.push({
			scale: scale,
			width: charWidth,
		});
		textContext.restore();
	}
	return dim;
}

	public render(context: CanvasRenderingContext2D, ratio: number) {
		if (!this.parent.raceBannerAsset || !this.parent.raceText) {
			return;
		}
		const coords = this.parent.raceBannerCoords;
		coords.ratio = ratio;
		const text = this.parent.raceText;

		// Draw the banner
		this.sunwell.drawImage(context, this.parent.raceBannerAsset, coords);

		// Draw the text
		const buffer = this.sunwell.getBuffer(300, 60, true);
		const bufferCtx = buffer.getContext("2d");
		let x = 10;
		const textSize = 40;

		bufferCtx.font = `${textSize}px "${this.sunwell.options.titleFont}"`;
		bufferCtx.lineCap = "round";
		bufferCtx.lineJoin = "round";
		bufferCtx.textBaseline = "hanging";
		bufferCtx.textAlign = "left";

		const xWidth = bufferCtx.measureText("x").width;
		for (const char of chars(text)) {
			bufferCtx.lineWidth = 7;
			bufferCtx.strokeStyle = "black";
			bufferCtx.fillStyle = "black";
			bufferCtx.fillText(char, x, 10);
			bufferCtx.strokeText(char, x, 10);

			bufferCtx.fillStyle = "white";
			bufferCtx.strokeStyle = "white";
			bufferCtx.lineWidth = 1;
			bufferCtx.fillText(char, x, 10);
			// context.strokeText(char, x, y);

			x += bufferCtx.measureText(char).width;
			x += xWidth * 0.1;
		}

		const b = contextBoundingBox(bufferCtx);
		const textCoords = this.parent.raceTextCoords;

		context.drawImage(
			buffer,
			b.x,
			b.y,
			b.w,
			b.h,
			(textCoords.dx - b.w / 2) * ratio,
			(textCoords.dy - b.h / 2) * ratio,
			b.w * ratio,
			b.h * ratio
		);

		this.sunwell.freeBuffer(buffer);
	}

	private getLineWidth(
		context: CanvasRenderingContext2D,
		fontSize: number,
		line: string
	): number {
		let width = 0;
		let bold = 0;
		let italic = 0;

		for (const word of line.split(" ")) {
			for (const char of chars(word)) {
				switch (char) {
					case CTRL_MANUAL_LINEBREAKS:
						continue;
					case CTRL_BOLD_START:
						bold += 1;
						context.font = this.getFontMaterial(fontSize, !!bold, !!italic);
						continue;
					case CTRL_BOLD_END:
						bold -= 1;
						context.font = this.getFontMaterial(fontSize, !!bold, !!italic);
						continue;
					case CTRL_ITALIC_START:
						italic += 1;
						context.font = this.getFontMaterial(fontSize, !!bold, !!italic);
						continue;
					case CTRL_ITALIC_END:
						italic -= 1;
						context.font = this.getFontMaterial(fontSize, !!bold, !!italic);
						continue;
				}

				context.fillText(
					char,
					width + this.sunwell.options.bodyFontOffset.x,
					this.sunwell.options.bodyFontOffset.y
				);

				width += context.measureText(char).width;
			}
			width += 0.275 * context.measureText("M").width;
		}

		return width;
	}

	private renderName(context: CanvasRenderingContext2D, ratio: number, name: string): void {
		// define a box to contain the curved text
		const boxDims = {width: 460, height: 160};
		const boxBottomCenter = {x: 335, y: 612};
		// create a new buffer to draw onto
		const buffer = this.sunwell.getBuffer(boxDims.width * 2, boxDims.height, true);
		const textContext = buffer.getContext("2d");
		const maxWidth = this.parent.nameTextCurve.maxWidth;
		const curve = this.parent.nameTextCurve.curve;
		textContext.save();

		textContext.lineCap = "round";
		textContext.lineJoin = "round";
		textContext.lineWidth = 10;
		textContext.strokeStyle = "black";
		textContext.textAlign = "left";
		textContext.textBaseline = "middle";

		let fontSize = 45;
		let dimensions = [];
		do {
			fontSize -= 1;
			textContext.font = `${fontSize}px "${this.sunwell.options.titleFont}"`;
		} while (
			(dimensions = getCharDimensions(name, textContext)).reduce((a, b) => a + b.width, 0) >
				maxWidth &&
			fontSize > 10
		);

		const textWidth = dimensions.reduce((a, b) => a + b.width, 0) / maxWidth;
		const begin = this.parent.nameTextCurve.pathMiddle - textWidth / 2;
		const nameChars = chars(name);
		const steps = textWidth / nameChars.length;

		// draw text
		let p: IPoint;
		let t: number;
		let leftPos = 0;

		for (let i = 0; i < nameChars.length; i++) {
			const char = nameChars[i].trim();
			const dimension = dimensions[i];
			if (leftPos === 0) {
				t = begin + steps * i;
				p = getPointOnCurve(curve, t);
				leftPos = p.x;
			} else {
				t += 0.01;
				p = getPointOnCurve(curve, t);
				while (p.x < leftPos) {
					t += 0.001;
					p = getPointOnCurve(curve, t);
				}
			}

			if (char.length) {
				textContext.save();
				textContext.translate(p.x, p.y);

				if (dimension.scale.x) {
					textContext.scale(dimension.scale.x, dimension.scale.y);
				}
				// textContext.setTransform(1.2, p.r, 0, 1, p.x, p.y);
				textContext.rotate(p.r);

				// shadow
				textContext.lineWidth = 9 * (fontSize / 50);
				textContext.strokeStyle = "black";
				textContext.fillStyle = "black";
				textContext.fillText(char, 0, 0);
				textContext.strokeText(char, 0, 0);

				// text
				textContext.fillStyle = "white";
				textContext.strokeStyle = "white";
				textContext.lineWidth = 2.5 * (fontSize / 50);
				textContext.fillText(char, 0, 0);

				textContext.restore();
			}

			leftPos += dimension.width;
		}

		const coords: ICoords = {
			sx: 0,
			sy: 0,
			sWidth: boxDims.width,
			sHeight: boxDims.height,
			dx: (boxBottomCenter.x - boxDims.width / 2) * ratio,
			dy: (boxBottomCenter.y - boxDims.height) * ratio,
			dWidth: boxDims.width * ratio,
			dHeight: boxDims.height * ratio,
		};
		context.drawImage(
			buffer,
			coords.sx,
			coords.sy,
			coords.sWidth,
			coords.sHeight,
//.........这里部分代码省略.........