js 写了个小东西，大佬们有点什么建议？

[oubenruing]

一个把输入文字转换成描边动画 svg 的小东西 https://oubenruing.github.io/svg-text-animate/
如果有什么想法，请给我点建议~
如果觉得不错，请给个 star~
谢谢~

重新组织了代码，除了支持 css 生成动画的方式外，还增加了 svg SMIL 的动画方式，该模式下生成的动画可以直接复制粘贴进微信公众号的文章使用，顺便也写了个生成用的小工具。

注：生成 path 的功能来自于 opentype.js

对提出意见，以及 star 的朋友们，表示感谢！

[1O]

我配给您建议吗？

[monkJay]

666

[vtwoextb]

输入中文显示乱码；可以增加背景颜色、大小、字体倾斜、下载等功能就好了，目前市场有这方面的需求，而且国外有人专门做这个卖的

[fengfuliu]

文档写的很规范 老程序员了

[liuzhiyong]

我靠，威武，还有这操作。

[sologgfun]

我配给您建议吗？

[oneisall8955]

我配给您建议吗？

[ZredoC]

我不配给您建议

[azh7138m]

这个是描边，不是按笔画
字转 path 是 opentype 做的
描边是个 stroke-dashoffset 做的动画
读代码啊朋友们

代码里面的_this 出现的很诡异，不知道为啥要这么写。。。也没必要

[lizhenda]

厉害啊

[xiaotuzi]

首先，是一个不错的点子！
其次，这个 JS 不是你自己的，只能说搬过来用，跟以前一个前端写在线打开文档一样，用的是别人的 api😂
但，不可否认，感谢提供 api 的 demo

[chengxy]

@azh7138m #9 小程序写多了

[genius2k]

我不配给您建议

[rabbirbot00]

README 上的英文文档链接貌似指向的还是中文文档

[meloncc]

@azh7138m
代码里面使用 ”_“加变量，在 JavaScript 中约定俗成的局部变量声明。不过，这样声明在 class 中好像没什么意义，setFont 中使用 async/await 应该也不需要声明_this 这个变量。
@xiaotuzi
能够实现新的东西，不管使用什么代码都是有价值的吧，感觉没必要重复的造轮子。

[azh7138m]

@meloncc 是我觉得代码风格割裂，所以说了诡异

[duanxianze]

大佬啊 太强了 我不配提建议

[oubenruing]

@vtwoextb 中文要导入中文字体才能使用

[oubenruing]

@azh7138m 是的，代码写的不太仔细，回头在调整下。

[oubenruing]

@xiaotuzi 因为产生这个点子的时候，也查了很多看有没有人已经做出类似东西，生成 path 这个也有别人写好的东西，就拿来用了。

[oubenruing]

@meloncc 感谢，我去从新组织下代码

[oubenruing]

@chengxy 被看穿了。。。

[oubenruing]

@rabbirbot00 感谢~

[oubenruing]

@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 不会指向自身。

我的理解是否有误，请见教。

[oubenruing]

@vtwoextb 字体大小目前有参数可以控制。斜体与否是根据使用字体来控制的，背景默认透明，在使用中可以通过父元素来控制。下载功能后续完善。

[lzuntalented]

挺漂亮的，还可以在描边时增加特效，可以参考下这个效果 https://github.com/lzuntalented/lz-paint-text

[oubenruing]

@lzuntalented 你的这个效果挺好！不过动画是用 js 控制的，我这个主要是 svg 用 css 动画，我看看能不能加上一些效果。谢谢！

[ty89]

动画效果比较单一，建议多增加一些效果
这个需求还是有的，比如做视频片头就很有用