当文字超出一定数量时,在固定区域缩放字体大小--canvas、原生js

【当文字超出一定数量时,在固定区域缩放字体大小–canvas、原生js】

很多时候项目中会遇到文字多出时候一行放不下的情况。
这时候我们可以根据文字长度来设置文字大小,文案越长文字就越小。

  1. 分别获得区域的宽度和文案的长度 ,计算出每个文字的可占用面积;
  2. 可占用面积越大字号就越大

希望大家给予宝贵的意见

这可能不是用于任何人的项目,这里只提供参考。谢谢!

可以直接运行下面的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【当文字超出一定数量时,在固定区域缩放字体大小】</title>
</head>
<body>
<div><input id="input" oninput="inputChange(event)" style="width: 500px;padding: 10px;margin: 10px;" type="text" value="这不是一个人的诗句是"></div>
<canvas id="myCanvas" width="500" height="200" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签
</canvas>
<script>

function setFontSize(value) {
	var c=document.getElementById("myCanvas");
	var canvasWidth = c.width;
	var canvasHeight = c.height;
	var ctx=c.getContext("2d");
	ctx.font="30px Arial";
	var contentFontSize = 16;
	ctx.font = contentFontSize+"px Arial";
	var txt = value;
	ctx.clearRect(0,0,canvasWidth,canvasHeight);
	ctx.fillText(txt,0,100);  
	var contentWidth = ctx.measureText(txt).width;
	if(contentWidth > canvasWidth){
		var fontsize = canvasWidth / contentWidth * contentFontSize ;  
		ctx.font=fontsize+"px Arial";
		ctx.clearRect(0,0,canvasWidth,canvasHeight);
		ctx.fillText(txt,0,100);
	}
}
setFontSize(document.getElementById("input").value);
function inputChange(e){
	setFontSize(e.target.value);
}
</script>
</body>
</html>

angular写法:


import {Component, Input, Renderer2} from '@angular/core';

@Component({
selector: 'text-fill',
templateUrl: 'text-fill.html'
})

export class TextFillComponent {
canvasText: string;
canvasWidth: number;
canvasHeight: number;
contentFontSize: number = 16;
contentFontWeight: number;
contentFontFamily: string = 'Arial';
contentColor: string = '#000';

/**
* 使用方法:
* 必传字段: data、width、height
* 
*/

/**
* 文本
* @param value
*/
@Input() set data(value) {
if (value) {
this.canvasText = value;
} else {
this.canvasText = '请设置需要显示的文本';
}
}

/**
* 显示区域宽度
* @param value
*/
@Input() set width(value) {
if (value) {
this.canvasWidth = value;
} else {
this.canvasWidth = 200;
}
}

/**
* 显示区域的高度
* @param value
*/
@Input() set height(value) {
if (value) {
this.canvasHeight = value;
} else {
this.canvasHeight = 50;
}
}

/**
* 文本颜色
* @param value
*/
@Input() set color(value) {
if (value) {
this.contentColor = value;
}
}

/**
* 文本字体大小
* @param value
*/
@Input() set fontsize(value) {
if (value) {
this.contentFontSize = value;
}
}

/**
* 文本字体粗细
* @param value
*/
@Input() set fontWeight(value) {
if (value) {
this.contentFontWeight = value;
}
}

/**
* 文本字体
* @param value
*/
@Input() set fontFamily(value) {
if (value) {
this.contentFontFamily = value;
}
}

constructor(private renderer: Renderer2,) {
}

ngOnInit() {
this.setText();
}

ngAfterViewInit() {
}

setText() {
const fontWeigfht = this.contentFontWeight + ' ';
const fontSet =  "px " + this.fontFamily;
const txt = this.canvasText;
const c = this.renderer.selectRootElement("#myCanvas");
c.width = this.canvasWidth;
c.height = this.canvasHeight;
const ctx = c.getContext("2d");
ctx.fillStyle = this.contentColor;
ctx.font = fontWeigfht ? (fontWeigfht + this.contentFontSize + fontSet) : this.contentFontSize + fontSet;
ctx.textBaseline = "middle";
ctx.fillText(txt, 0, this.canvasHeight / 2);
const contentWidth = ctx.measureText(txt).width;
if (contentWidth > this.canvasWidth) {
ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
const fontsize = (this.canvasWidth / contentWidth) * this.contentFontSize;
ctx.fillStyle = this.contentColor;
ctx.font = fontWeigfht ? (fontWeigfht + fontsize + fontSet ) : fontsize + fontSet;
ctx.textBaseline = "middle";
ctx.fillText(txt, 0, this.canvasHeight / 2);
}
}
}



您的浏览器不支持 HTML5 canvas 标签

你可能感兴趣的:(canvas)