一个把输入文字转换成描边动画 svg 的小东西
https://oubenruing.github.io/svg-text-animate/
如果有什么想法,请给我点建议~
如果觉得不错,请给个 star~
谢谢~
1
1O 2019-11-12 18:02:20 +08:00
我配给您建议吗?
|
2
monkJay 2019-11-12 18:30:50 +08:00
666
|
3
vtwoextb 2019-11-12 18:34:12 +08:00
输入中文显示乱码;可以增加背景颜色、大小、字体倾斜、下载等功能就好了,目前市场有这方面的需求,而且国外有人专门做这个卖的
|
4
fengfuliu 2019-11-12 18:37:06 +08:00
文档写的很规范 老程序员了
|
5
liuzhiyong 2019-11-12 18:49:00 +08:00 via Android
我靠,威武,还有这操作。
|
6
sologgfun 2019-11-12 19:15:19 +08:00
我配给您建议吗?
|
7
oneisall8955 2019-11-12 19:47:07 +08:00 via Android
我配给您建议吗?
|
8
ZredoC 2019-11-12 21:02:17 +08:00
我不配给您建议
|
9
azh7138m 2019-11-12 21:04:14 +08:00
这个是描边,不是按笔画
字转 path 是 opentype 做的 描边是个 stroke-dashoffset 做的动画 读代码啊朋友们 代码里面的_this 出现的很诡异,不知道为啥要这么写。。。也没必要 |
10
lizhenda 2019-11-12 21:23:26 +08:00
厉害啊
|
11
xiaotuzi 2019-11-13 07:48:08 +08:00 via iPhone
首先,是一个不错的点子!
其次,这个 JS 不是你自己的,只能说搬过来用,跟以前一个前端写在线打开文档一样,用的是别人的 api😂 但,不可否认,感谢提供 api 的 demo |
13
genius2k 2019-11-13 12:30:02 +08:00
我不配给您建议
|
14
rabbirbot00 2019-11-13 13:47:46 +08:00
README 上的英文文档链接貌似指向的还是中文文档
|
15
meloncc 2019-11-13 14:42:04 +08:00
|
17
duanxianze 2019-11-13 18:04:31 +08:00
大佬啊 太强了 我不配提建议
|
18
oubenruing OP @vtwoextb 中文要导入中文字体才能使用
|
19
oubenruing OP @azh7138m 是的,代码写的不太仔细,回头在调整下。
|
20
oubenruing OP @xiaotuzi 因为产生这个点子的时候,也查了很多看有没有人已经做出类似东西,生成 path 这个也有别人写好的东西,就拿来用了。
|
21
oubenruing OP @meloncc 感谢,我去从新组织下代码
|
22
oubenruing OP @chengxy 被看穿了。。。
|
23
oubenruing OP @rabbirbot00 感谢~
|
24
oubenruing OP @meloncc @azh7138m
setFont 中 之前写法是 const _this = this new Promise(function (resove, reject){ console.log(this) //局部作用域 console.log(_this) } 此处的 this 是指向局部作用域 因此返回 undefined ;因此我在 Promise 外面先定义一个_this 来获得一个实例本身的引用。 现在改成 new Promise((resove, reject)=>{ console.log(this) } 使用箭头函数,箭头函数内的 this 不会指向自身。 我的理解是否有误,请见教。 |
25
oubenruing OP @vtwoextb 字体大小目前有参数可以控制。斜体与否是根据使用字体来控制的,背景默认透明,在使用中可以通过父元素来控制。下载功能后续完善。
|
26
lzuntalented 2019-11-14 00:53:45 +08:00
挺漂亮的,还可以在描边时增加特效,可以参考下这个效果 https://github.com/lzuntalented/lz-paint-text
|
27
oubenruing OP @lzuntalented 你的这个效果挺好!不过动画是用 js 控制的,我这个主要是 svg 用 css 动画,我看看能不能加上一些效果。谢谢!
|
28
ty89 2019-11-14 10:05:24 +08:00
动画效果比较单一,建议多增加一些效果
这个需求还是有的,比如做视频片头就很有用 |