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

能否让FFText这个Api,也支持设置宽高 #126

Open
rulaishenzhang opened this issue Oct 13, 2021 · 12 comments
Open

能否让FFText这个Api,也支持设置宽高 #126

rulaishenzhang opened this issue Oct 13, 2021 · 12 comments

Comments

@rulaishenzhang
Copy link

rulaishenzhang commented Oct 13, 2021

能否让FFText这个Api,也支持设置宽高
因为,在开发在线制作工具时,每段文字块,会需要自己的背景颜色

1634106900393

@javaswing
Copy link
Collaborator

现在在api里有这个方法吧 setWH,设置宽高:

setWH(width: number, height: number): void;

@rulaishenzhang
Copy link
Author

现在在api里有这个方法吧 setWH,设置宽高:

setWH(width: number, height: number): void;

谢谢你,不过我测试了一下,没有生效

@rulaishenzhang
Copy link
Author

WX20211013-171000

如上图,还有居右,line-height , letter-space等,希望让FFText尽可能多一些支持css的属性,这样对于可视化制作视频,会有很大的帮助,也许是我的技术还不太多,希望有大佬指点迷津

@javaswing
Copy link
Collaborator

目前对于FFText支持的style属性可以参考这个文件,且FFText在Canvas上的渲染都是在这里处理的

@rulaishenzhang
Copy link
Author

目前对于FFText支持的style属性可以参考这个文件,且FFText在Canvas上的渲染都是在这里处理的

谢谢你,我这几天认真学习一下

@drawcall
Copy link
Member

Oh, it can be supported in the future. Welcome to submit pr

@hjane
Copy link

hjane commented Nov 2, 2021

Oh, it can be supported in the future. Welcome to submit pr

预计哪个版本能支持呢?现在text就像html里的行内元素一样,比如span,无论setWH还是style都无法实现宽高设置。除非使用一些其他的方法,比如设置两个text,一个用padding和lineHeight来制作一个背景区域,上边再叠一个text显示内容。

@hjane
Copy link

hjane commented Nov 2, 2021

如果padding 上下左右的值不一样怎么设置?

@johntranz
Copy link

你计算x,y的位置吗?我这样做了

@jamesh-purr
Copy link

jamesh-purr commented Mar 14, 2024

Hello @drawcall ,

This is still an issue. using the below does in any way does not affect the width and height.
这仍然是一个问题。使用下面的内容不会以任何方式影响宽度和高度。

const text1 = new FFText({ text: 'FFText组件demo', x: json.width / 2, y: 130, width: 980, height: 200, w: 980, h: 200 });
text1.setWH(980, 200);
text1.setSize(980, 200);
text1.setColor('#ffffff');
text1.setBackgroundColor('#bc05a9');
text1.setStyle({ width: 980, height: 200, padding: [100,100,100,100] });

Screenshot 2024-03-14 at 11 07 32

@drawcall
Copy link
Member

mark

@jamesh-purr
Copy link

Hello @drawcall

Sorry mark?

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

6 participants