Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix the effect of label with outline in CHAR mode. #4550

Merged
merged 2 commits into from Jun 11, 2019
Merged

Fix the effect of label with outline in CHAR mode. #4550

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1321c20
Fix the effect of label with outline in CHAR mode.
caryliu1999 Jun 4, 2019
d92619e
fix edge cropping.
caryliu1999 Jun 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
30 changes: 16 additions & 14 deletions cocos2d/core/renderer/utils/label/letter-font.js
View file
Open in desktop
Expand Up @@ -55,7 +55,7 @@ let FontLetterDefinition = function() {
this.xAdvance = 0;
};

let _backgroundStyle = 'rgba(255, 255, 255, 0.005)';
const _invisibleAlpha = (1 / 255).toFixed(3);

function LetterTexture(char, labelInfo) {
this._texture = null;
Expand Down Expand Up @@ -84,7 +84,7 @@ LetterTexture.prototype = {
this._context = this._data.context;
this._context.font = this._labelInfo.fontDesc;
let width = textUtils.safeMeasureText(this._context, this._char);
this._width = parseFloat(width.toFixed(2));
this._width = parseFloat(width.toFixed(2)) + this._labelInfo.margin * 2;
this._height = this._labelInfo.fontSize;

if (this._canvas.width !== this._width || CC_QQPLAY) {
Expand All @@ -103,20 +103,21 @@ LetterTexture.prototype = {
width = this._canvas.width,
height = this._canvas.height;

let startX = width / 2;
let startY = height / 2;
let color = labelInfo.color;

context.textAlign = 'center';
context.textBaseline = 'middle';
context.clearRect(0, 0, width, height);
//Add a white background to avoid black edges.
context.fillStyle = _backgroundStyle;
context.fillStyle = `rgba(${color.r}, ${color.g}, ${color.b}, ${_invisibleAlpha})`;
context.fillRect(0, 0, width, height);
context.font = labelInfo.fontDesc;

let startX = width / 2;
let startY = height / 2;
let color = labelInfo.color;
//use round for line join to avoid sharp intersect point
context.lineJoin = 'round';
context.fillStyle = `rgba(${color.r}, ${color.g}, ${color.b}, ${1})`;
context.fillStyle = `rgba(${color.r}, ${color.g}, ${color.b}, 1)`;
if (labelInfo.isOutlined) {
let strokeColor = labelInfo.out || WHITE;
context.strokeStyle = `rgba(${strokeColor.r}, ${strokeColor.g}, ${strokeColor.b}, ${strokeColor.a / 255})`;
Expand Down Expand Up @@ -369,8 +370,6 @@ module.exports = {
_string = _comp.string.toString();
_fontSize = _comp.fontSize;
_originFontSize = _fontSize;
_contentSize.width = _comp.node._contentSize.width;
_contentSize.height = _comp.node._contentSize.height;
_hAlign = _comp.horizontalAlign;
_vAlign = _comp.verticalAlign;
_spacingX = _comp.spacingX;
Expand Down Expand Up @@ -402,6 +401,9 @@ module.exports = {
_labelInfo.margin = 0;
}

_contentSize.width = _comp.node._contentSize.width + _labelInfo.margin * 2;
_contentSize.height = _comp.node._contentSize.height;

_labelInfo.lineHeight = _lineHeight;
_labelInfo.fontSize = _fontSize;
_labelInfo.fontFamily = _fontFamily;
Expand Down Expand Up @@ -443,7 +445,7 @@ module.exports = {
let color = labelInfo.color.toHEX("#rrggbb");
let out = '';
if (labelInfo.isOutlined) {
out = labelInfo.out.toHEX("#rrggbb");
out = out + labelInfo.margin + labelInfo.out.toHEX("#rrggbb");
};

return hashData + labelInfo.fontSize + labelInfo.fontFamily + color + out;
Expand Down Expand Up @@ -538,7 +540,7 @@ module.exports = {
continue;
}

let letterX = nextLetterX + letterDef.offsetX * _bmfontScale;
let letterX = nextLetterX + letterDef.offsetX * _bmfontScale - _labelInfo.margin;

if (_isWrapText
&& _maxLineWidth > 0
Expand All @@ -563,9 +565,9 @@ module.exports = {
nextLetterX += _horizontalKernings[letterIndex + 1];
}

nextLetterX += letterDef.xAdvance * _bmfontScale + _spacingX;
nextLetterX += letterDef.xAdvance * _bmfontScale + _spacingX - _labelInfo.margin * 2;

tokenRight = letterPosition.x + letterDef.w * _bmfontScale;
tokenRight = letterPosition.x + letterDef.w * _bmfontScale - _labelInfo.margin;

if (tokenHighestY < letterPosition.y) {
tokenHighestY = letterPosition.y;
Expand Down Expand Up @@ -606,7 +608,7 @@ module.exports = {
_contentSize.width = _labelWidth;
_contentSize.height = _labelHeight;
if (_labelWidth <= 0) {
_contentSize.width = parseFloat(longestLine.toFixed(2));
_contentSize.width = parseFloat(longestLine.toFixed(2)) + _labelInfo.margin * 2;
}
if (_labelHeight <= 0) {
_contentSize.height = parseFloat(_textDesiredHeight.toFixed(2));
Expand Down