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

您好,如何控制在临界点防止 字体逐渐 变大或变小的时候,肉眼看上去 文字位置发生变化出现抖动呢? #1

Open
seeyou888999 opened this issue Mar 26, 2020 · 8 comments

Comments

@seeyou888999
Copy link

当绘图旋转角度在临近背面的情况下,文字变小,重新计算的情况下。文字的位置会出现发生变化。
我应该修改哪个地方呢?大部分都是算法,看的脑袋嗡嗡的。

image
大部分情况都是在临界点 ,字体变大或者变小的情况下会出现位置偏移。可能我描述的不是特别清楚。不过看你贴的效果图 也是会有这种情况。
还有一个问题想咨询一下作者,如果采用绘图将文字绘制在上面,那假如 我需要布局的控件 需要加入一些表情,或者文字动画(跑马灯效果),应该如何在您这个基础上去实现呢?能提供一些思路吗?

@al4fun
Copy link
Owner

al4fun commented Mar 28, 2020

当文字尺寸连续变化的时候,确实会有文字抖动的现象。经过观察,这是因为当文字字号均匀连续变化的时候,文字的内边距变化却不是均匀连续的,打个比方,当字号是10的时候,文字的下边距是2,而当文字字号变成9时,文字的下边距可能会突变为1,看起来就是文字突然向下抖动了一下。

之前也试过将文字height设置为1,但似乎没有效果。

@al4fun
Copy link
Owner

al4fun commented Mar 28, 2020

关于第二个问题。我这个demo其实主要就是实现一个点位置的计算。至于你要在点的位置放什么东西其实是随意的。举个例子,你完全可以写一个Stack,然后根据计算的点的位置,使用Positioned(left,top,right,bottom)将你自己的widget放到Stack中,跟demo中直接绘制文字是一样的效果。不过性能上可能会比直接绘制要低一点。

@al4fun
Copy link
Owner

al4fun commented Mar 28, 2020

关于文字抖动的问题,如果文字不是特别多的话(比如就三十几个省份名字),有个简单粗暴的解决办法,就是直接让设计师将文字做成图片,然后使用canvas.drawImageRect方法直接缩放并绘制图片。这种做法的性能应该也不差,只是几十个文字图片应该会使apk体积增大上百k。

@seeyou888999
Copy link
Author

谢谢作者的回答。我也有这样想过这个问题。第二个问题,我们这边大概要做的应该是将用户的头像 替换成 圆点, 在圆点上面绘制用户的昵称,如果用户的昵称太过长,本来是打算加入动画类似跑马灯,但是一直不知道如何 在绘制的文字上加入这种动画效果,因为这需要计算 文字的偏移位置,我尝试了大概2个小时 ,还是无功而返。只能退而求其次,使用默认作者的 通过截取字符串长度加入 ...省略号。 就是不知道作者对于第二个功能 如果要再每个绘制的圆点或者文字加入串行动画的情况下,是如何计算这个坐标位置的。没什么思路。

@seeyou888999
Copy link
Author

我之前打算采用获取 每一个圆点的坐标 x轴坐标,绘制的时候x坐标往左偏移,但是这个x的坐标是一直再变化,这个算法层面的问题,小弟实在有点汗颜。不知道如何实现

@seeyou888999
Copy link
Author

如果 是用户的头像加上昵称 。 这个应该ui 应该是没办法去做的。 用户每天增长。难道注册的时候让后台那边自动生成一个 头像加昵称的图片么? 大概首页展示的用户可能在50-60个左右吧。
如果使用绘制文字的话,那怎么解决文字抖动呢,我尝试过一些方法去解决 还是无法解决。太菜了我。

@al4fun
Copy link
Owner

al4fun commented Apr 2, 2020

初步观察,文字抖动是flutter本身文字内边距突变造成的,这个暂时没有解决办法,除非你不用flutter的文字绘制系统。至于有没有其他迂回的办法,这个我暂时没想到......

还有加入跑马灯,这个有点复杂,不光是坐标偏移,还有文字裁剪、性能之类的问题,等我空了再研究下吧,目前暂时是忙不过来......

@seeyou888999
Copy link
Author

大佬 这个问题还有在研究吗?

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

No branches or pull requests

2 participants