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

improve RichText v-align and support img align feature

Merged
merged 2 commits into from Feb 12, 2020
Merged

improve RichText v-align and support img align feature #6017

merged 2 commits into from Feb 12, 2020

Conversation

RazgrizHsu
Copy link
Contributor

@RazgrizHsu RazgrizHsu commented Jan 1, 2020

小修正及部份改进,
代码在我的项目已经运行一段时间,没发现什么问题,
各位大神帮忙检视一下这样是否可行,谢谢

Changes:

  • 修正outline的垂直对齐误差
    fix v-align for<outline width=2>text</outline>

  • <img height=999>设定值可以设定超过行高
    add<img>ability to set size over lineHeight

  • 新增<img align=top>设定垂直对齐属性,可为top|center|bottom,未设定及预设值为bottom
    add<img>align tag like align=top|center|bottom, if not setting use default:bottom

未修改时的效果

image

修改后的效果

image

- fix v-align for <outline width=2>text</outline>
- add <img> ability to set size over lineHeight
- add <img> align tag like align=top|center|bottom, if not setting use default:bottom
@holycanvas holycanvas requested a review from caryliu1999 Jan 2, 2020
@holycanvas
Copy link
Contributor

holycanvas commented Jan 2, 2020

这位兄弟,留下你的论坛id吧

@RazgrizHsu
Copy link
Contributor Author

RazgrizHsu commented Jan 2, 2020

这位兄弟,留下你的论坛id吧

论坛Id,是这个吗 https://forum.cocos.org/users/RazgrizHsu

@holycanvas
Copy link
Contributor

holycanvas commented Jan 2, 2020

收到,给你增加个头衔

@cocos-robot cocos-robot changed the base branch from v2.3.0 to v2.3.0-release Jan 13, 2020
Copy link
Contributor

@cocos-robot cocos-robot left a comment

@RazgrizHsu, v2.3.0 branch will be deleted, so we edited the base branch to v2.3.0-release, or this PR will be killed by GitHub.
Please review the commits history to ensure that the PR does not polluted by unneeded commits from your origin branch.
If you need to merge to other branch, you can first click the Edit button on the right side of the PR title, then switch the base branch.
If necessary, welcome to resubmit a new PR. Thanks!

@holycanvas holycanvas requested a review from knoxHuang Jan 16, 2020
if( sprite ) {

let LineHeight = this.lineHeight;
let LineHeightReal = this.lineHeight * 1.26; //我也不懂为什么为什么node高是实际的x1.26, 这值是看编辑器变化算出来的
Copy link
Contributor

@knoxHuang knoxHuang Jan 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@caryliu1999 这个你知道吗?

Copy link
Contributor

@caryliu1999 caryliu1999 Jan 19, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@caryliu1999 这个你知道吗?

这里是要获取节点的contentSize,因为节点的size更新是在下一帧渲染时处理的,然后加了留白空间,这里不要写硬编码,可以使用_forceUpdateRenderData更新。

Copy link
Contributor

@holycanvas holycanvas Jan 19, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

麻烦 @RazgrizHsu 更新一下

Copy link
Contributor Author

@RazgrizHsu RazgrizHsu Jan 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这边是为了计算该行应有的y轴偏移,所以才没有取当前label的ContentSize
而且在这for-loop里取label尺寸有另一个问题,就是取得的尺寸有可能是错的
例如若这个RichText里就只有放一张图片,那取得的尺寸就不是非描边label该有的高度

我后来发现实际高度原来是透过 textUtils.BASELINE_RATIO算出来的,
例如:this._labelHeight = (this._lineCount + textUtils.BASELINE_RATIO) * this.lineHeight;
所以新的commit里改用这种写法,你们看看是否正确

Copy link
Contributor

@caryliu1999 caryliu1999 Feb 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这边是为了计算该行应有的y轴偏移,所以才没有取当前label的ContentSize
而且在这for-loop里取label尺寸有另一个问题,就是取得的尺寸有可能是错的
例如若这个RichText里就只有放一张图片,那取得的尺寸就不是非描边label该有的高度

我后来发现实际高度原来是透过 textUtils.BASELINE_RATIO算出来的,
例如:this._labelHeight = (this._lineCount + textUtils.BASELINE_RATIO) * this.lineHeight;
所以新的commit里改用这种写法,你们看看是否正确

是的,用这个参数也可以,后面我们去掉这个参数的时候也能及时同步修改这里

Copy link
Contributor Author

@RazgrizHsu RazgrizHsu Feb 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

了解,谢谢 :>

}

//adjust y for label with outline
let outline = label.getComponent( cc.LabelOutline )
Copy link
Contributor

@caryliu1999 caryliu1999 Jan 19, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

加上分号,getCompoennt(cc.LabelOutline) 括号内不需要加空格。

Copy link
Contributor Author

@RazgrizHsu RazgrizHsu Jan 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

好,新的commit里我尽量修改符合原有的代码风格了


//adjust y for label with outline
let outline = label.getComponent( cc.LabelOutline )
if( outline ) label.y = label.y - outline.width;
Copy link
Contributor

@caryliu1999 caryliu1999 Jan 19, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

有描边的情况下,Label文本的中线其实是没有变动的,图文混排是要保证文本与图片的中线位置在同一水平线上,这里做了修改之后的效果麻烦确认下是否正确。

Copy link
Contributor Author

@RazgrizHsu RazgrizHsu Jan 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

是,label本文的中线是没有变动的,
这个组件在蛮早之前我改过一次,当时的对齐跟现在不太一样,
现在改为了每个label都是anchor=0为基础,实际的y轴再透过for-loop带入行高去进行计算
所以有描边的label总是会比没描边的要高,如图:

image
我特地打了”单单”两个字来比对有无描边的高度差异
可以看到左边未改的时候,有描边的的确是高了一点点

所以这边我想应该是正确的 Ps. 我是mac原生模似器直接运行后截图的

- modify some code to follow team code style
- use textUtils.BASELINE_RATIO to get real node height same as other components
- fix when img align=top the offset of y
- add feature of <img offset=12|12,34 /> single value for y, two value for x,y
@RazgrizHsu
Copy link
Contributor Author

RazgrizHsu commented Jan 20, 2020

新的修改我补上新的测试案例对照图片,
我把图片换成方的,并边行高做了一点调整,这样比较容易看出差异

未改:
image
修改后:
image

另外,我想了一下还是将另一个常用功能<img offset />也签入让你们review下,
image
这个功能主要是在做稍为复杂的对话框或说明区的时候很好用,
因为时常会出现有些图要大、有些图要小,并且每张图的位置可能有点差异(图集时)
所以能够特别调整某一个图片的偏移位置就很重要,
你们看看是否可行,若不必要我可以再拿掉

@holycanvas
Copy link
Contributor

holycanvas commented Feb 10, 2020

这个<image offset/> 怎么设置偏移多少?

@RazgrizHsu
Copy link
Contributor Author

RazgrizHsu commented Feb 10, 2020

这个<image offset/> 怎么设置偏移多少?

@holycanvas
就是使用 <img src='IconG' align=bottom offset=-10 />
<img src='IconG' align=bottom offset=10,20 />
<img src='IconG' align=bottom offset=-10,-20 />
这样的字串,因为img的attribute在regex识别的时候,只要不带空格都识为属性值
所以就是在offset=后直接带数字,可用,号分隔x轴或y轴
基本上只带单一数字就识别为调整y轴 (因为最常用是调整y轴)

@caryliu1999
Copy link
Contributor

caryliu1999 commented Feb 11, 2020

这个<image offset/> 怎么设置偏移多少?

@holycanvas
就是使用 <img src='IconG' align=bottom offset=-10 />
<img src='IconG' align=bottom offset=10,20 />
<img src='IconG' align=bottom offset=-10,-20 />
这样的字串,因为img的attribute在regex识别的时候,只要不带空格都识为属性值
所以就是在offset=后直接带数字,可用,号分隔x轴或y轴
基本上只带单一数字就识别为调整y轴 (因为最常用是调整y轴)

如果可以的话,把这部分使用示例补充到官方文档里面,可以提交个PR到 https://github.com/cocos-creator/creator-docs ,THX!

@holycanvas holycanvas requested a review from jareguo Feb 11, 2020
@RazgrizHsu
Copy link
Contributor Author

RazgrizHsu commented Feb 11, 2020

@caryliu1999
我刚刚想加个文档,
但目前的richtext->img的部份只有一小块,
好像比较难说明,
我应该要把说明文字想办法塞进这一格里面,
image

还是在下面另开一个子subject说明?

@RazgrizHsu
Copy link
Contributor Author

RazgrizHsu commented Feb 11, 2020

我先写了一版新增了####子标题的说明,
cocos/cocos-docs#1147
如果这样可以,我再补上中文的

@holycanvas
Copy link
Contributor

holycanvas commented Feb 12, 2020

非常感谢你的贡献,这个pr如果没有什么改动的话,我打算合并了

@RazgrizHsu
Copy link
Contributor Author

RazgrizHsu commented Feb 12, 2020

@holycanvas 没问题,感谢你

@holycanvas holycanvas merged commit 97536ae into cocos:v2.3.0-release Feb 12, 2020
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants