字体控制

在公司大神森指导下 完成了字体控制 即在一个区域内最大限度的去显示字体的尺寸 简称要大!

实现思路

textCtr(num,width,height)//接收当前字体个数 父层宽 父层高

使用矩阵+动态规划的方法

遍历所有情况下 每一个字体所占的面积 

选取最优的那一种情况

并检查最优情况下  按行计算出来的字体高度*按行计算出来的竖方向的字体个数后的总高度 是否超过父元素的高度

如果超过 抛弃最优方案 

回调检查 继续往下查找次优方案

最后找到最合适的方法 返回一个fontsize

function textCtr(num,width,height){
var viewW = width;//父层的宽
var viewH = height;//父层的高
var ViewS = viewW*viewH;//父层的面积
var F_num = num;//字数
var F_w ;//字宽 = 字体大小
var F_h ;//字高
var S_arr = [];//面积数组
var data_arr = [];//面积数组
var S
var MaxS
var MinS
var data ={
fw:'',
fh:'',
S:'',
Ynum:'',
Xnum:''
}
for(var i=1;i<F_num+1;i++){
var y_num = Math.ceil(F_num/i);
var ctr = F_num/i;
var y_list = F_num/ctr;
if(i<y_num){
F_h = viewH/y_num;
F_w = F_h-2;
}
if(i>y_num){
F_w = viewW/i;
F_h = F_w+2;
}
if(i == y_num){
if(viewW>=viewH){
F_h = viewH/y_num;
F_w = F_h-2;
}else{
F_w = viewW/i;
F_h = F_w+2;
}
}
//遍历
S = Math.round(F_w*F_h);
S_arr.push(S);
data = {
fw:Math.round(F_w)-5,
fh:Math.round(F_h)-5,
S:S,
Ynum:y_num,
Xnum:i
}
data_arr.push(data);


}
//这个时候我们应该考虑父层元素的宽高比例过大的时候 造成字体溢出的可能
//从最大面积开始排除
var MaxS = Math.max.apply(this,S_arr);
var MaxSindex = S_arr.indexOf(MaxS);
check(MaxS,MaxSindex,S_arr,data_arr,viewW,viewH);
}


function check(MaxS,MaxSindex,S_arr,data_arr,viewW,viewH){
var S_arr = S_arr;
var data_arr = data_arr;
var H =viewH
var W = viewW
if(data_arr[MaxSindex].fh*data_arr[MaxSindex].Ynum >= H){
console.log("准备回调")
S_arr.splice(MaxSindex,1,null);
MaxS = Math.max.apply(this,S_arr);
MaxSindex = S_arr.indexOf(MaxS);
check(MaxS,MaxSindex,S_arr,data_arr,W,H)
}else{
console.log("一次命中")
$(".content").css("fontSize",data_arr[MaxSindex].fw+'px');
}
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值