特殊情况下编辑和预览模式下文本位置有差别

编辑器版本3.10.7
 
复现方法:新建一个文本框,字号10,高度30,自动大小:无,上下居中,里面随便打一行字,然后把字号拉到26,然后预览
 
结果如图:
 

QQ截图20191031120713.png

 
感觉在调字号的时候,文本框的高度应该也相应作变化才对;
或者谷主你看下预览和编辑时的排版算法是不是不一样?
 
另外,请问谷主你能不能开放下文字排版的算法?我现在用laya,他的垂直方向的对齐和fairy编辑器里的实现似乎不一样,但是看fairy的代码里直接调用laya的text组件,对齐也是直接用laya的,结果文本位置这块出入挺大的
已邀请:

谷主

赞同来自:

没有自动大小,高度是不会随字号大小调整的。 laya里排版是laya排的,我哪有算法。这和字体有关系,编辑器字体你要和laya的选一致,而且要保证手机上有这种字体,才能一致。即使全做了,不一致也不奇怪。这是H5的特性造成的,你不能依赖这个。你去laya、egret、cocos论坛里搜,一大堆反映字体位置不一样的。

lattyCase

赞同来自:

然后说说那个排版啊,
我不知道fairy编辑器里你是不是直接用现成文本控件的,H5里文本其实是两个问题,
一个是,fairy编辑器里的文本排版和laya的Text控件排版算法不一致,这个你开laya的ide,摆个原生文本框搞个居中很容易看出来问题的,
如图:

QQ截图20191031140832.png


QQ截图20191031140823.png

 
 
视觉上的确是fairy编辑器里的更加居中,但是laya模拟器上就是和laya原生文本框一样的显示,当然这个问题laya和H5本身都有锅,H5里大概率没法取得文本高度,所以laya很猥琐地直接用字号表示文本高度,这是其一,
其次看下laya里相关排版的代码吧:
if (this._height > 0){
var tempVAlign=(this._textHeight > this._height)? "top" :this.valign;
if (tempVAlign==="middle")
startY=(this._height-visibleLineCount *lineHeight)*0.5+padding[0]-padding[2];
else if (tempVAlign==="bottom")
startY=this._height-visibleLineCount *lineHeight-padding[2];
};
其中lineHeight就是文字高度+行距,文字高度基本就是字号(起码模拟器里measureText拿不到高度,会返回字号)。。。
错误的文字高度导致错误的显示内容高度,所以居中。。。
并且在显示内容超过文本框高度时,laya会把居中切换为上对齐,然而在编辑器里明显不是
 
所以后来以编辑器的视觉效果为准,我这里是把这段代码改了一下,当然,位置怎么算的基本就是连蒙带猜,大概这样子:
if (this._height > 0){
// var tempVAlign=(this._textHeight > this._height)? "top" :this.valign;
var tempVAlign = this.valign;
if (tempVAlign==="middle")
{
// 第一行计算全高度,后面的只计算中高度
// 算内容高度的时候要加上第一行top+bottom部分的空隙,但是在真正把文本贴上去的时候,需要再往上偏移top的位置
startY=(this._height - (Math.min(visibleLineCount, 1) * (fullHeight) + (Math.max(visibleLineCount - 1, 0) * (middleHeight + this.leading))))*0.5+padding[0]-padding[2] - (fullHeight - middleHeight)*0.5 + this.measureOffset(this.fontSize, this.bold);
}
else if (tempVAlign==="bottom")
{
startY=this._height-(Math.min(visibleLineCount, 1) * (fullHeight) + (Math.max(visibleLineCount - 1, 0) * (middleHeight + this.leading)))-padding[2] - (fullHeight - middleHeight)*0.5 + this.measureOffset(this.fontSize, this.bold);
}
else
{
startY -= (fullHeight - middleHeight)*0.5 - this.measureOffset(this.fontSize, this.bold);
}
};
其中(为了便于理解我瞎定的,类似text metric的概念)文字全高度fullHeight = topHeight + middleHeight + bottomHeight,假定topHeight = bottomHeight,这两块基本都是空隙
fullHeight和middleHeight怎么来的,基本就是手工在编辑器里采样(主流字号采样,其他通过线性回归方程计算)。。。
 

measureOffset部分则是另外个问题,各个H5运行时的差异,导致canvas上渲染出的文本可能topHeight不一样,再贴回界面上的话,会导致有偏移
 
问题拉回来,谷主能否告知你在编辑器里使用什么牌子的文本控件吗?肉眼测算太感人惹

要回复问题请先登录注册