浏览器上字体实际显示位置与FairyGUI中字体位置不一致,位置会偏上

具体表现如图所示。
CCC在不设置ttf字体的情况下默认使用Arial字体,所以这里文本字体设置成Arial消除字体的影响。
问题产生的原因在于CCC的字体渲染是通过canvas画布画出来的,先预留一行行高的空间,然后顶着画一行字体,再预留一行再画一行
_updateTexture: function() {
_context.clearRect(0, 0, _canvas.width, _canvas.height);
_context.font = _fontDesc;
var startPosition = this._calculateFillTextStartPosition();
var lineHeight = this._getLineHeight();
_context.lineJoin = "round";
_context.fillStyle = "rgba(" + _color.r + ", " + _color.g + ", " + _color.b + ", " + _color.a / 255 + ")";
var underlineStartPosition = void 0;
for (var i = 0; i < _splitedStrings.length; ++i) {
if (_isOutlined) {
var strokeColor = _outlineColor || WHITE;
_context.strokeStyle = "rgba(" + strokeColor.r + ", " + strokeColor.g + ", " + strokeColor.b + ", " + strokeColor.a / 255 + ")";
_context.lineWidth = 2 * _outlineWidth;
_context.strokeText(_splitedStrings[i], startPosition.x, startPosition.y + i * lineHeight);
}
//这里以lineHeight来定位画笔的起始位置
_context.fillText(_splitedStrings[i], startPosition.x, startPosition.y + i * lineHeight);
if (_isUnderline) {
underlineStartPosition = this._calculateUnderlineStartPosition();
_context.save();
_context.beginPath();
_context.lineWidth = _fontSize / 8;
_context.strokeStyle = "rgba(" + _color.r + ", " + _color.g + ", " + _color.b + ", " + _color.a / 255 + ")";
_context.moveTo(underlineStartPosition.x, underlineStartPosition.y + i * lineHeight - 1);
_context.lineTo(underlineStartPosition.x + _canvas.width, underlineStartPosition.y + i * lineHeight - 1);
_context.stroke();
_context.restore();
}
}
_texture.handleLoadedTexture();
}[/i][/i]

[i]fgui给ccc label设定的行高是[/i]
[i][i]this._label.lineHeight = fontSize + this._leading;[/i][/i]
[i]然后在FairyGUI编辑器里面,文本显示时是有默认的上下留白的,即使留白设置为0也有,导致编辑器显示和浏览器显示不一致
这个问题有没有什么解决方案啊
[/i]
文本4.png
已邀请:

谷主

赞同来自:

我在demo里好像没发现什么问题? http://www.fairygui.com/cocos-demo/

谷主

赞同来自:

TIM截图20190423165558.png

 

canghai

赞同来自:

编辑器里面是这样定位的吗

canghai

赞同来自:

我的编辑器里面,文本的高度默认会比字体的字号大几个像素。这个是有哪里设置错了吗?

谷主

赞同来自:

我就直接打开demo,放个图形在下面。其他都不改。

要回复问题请先登录注册