首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

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

  •  
  •   oubenruing · 23 天前 · 2646 次点击

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

    28 回复  |  直到 2019-11-14 10:05:24 +08:00
        1
    1O   23 天前
    我配给您建议吗?
        2
    monkJay   23 天前
    666
        3
    vtwoextb   23 天前
    输入中文显示乱码;可以增加背景颜色、大小、字体倾斜、下载等功能就好了,目前市场有这方面的需求,而且国外有人专门做这个卖的
        4
    fengfuliu   23 天前
    文档写的很规范 老程序员了
        5
    liuzhiyong   23 天前 via Android
    我靠,威武,还有这操作。
        6
    sologgfun   23 天前
    我配给您建议吗?
        7
    oneisall8955   23 天前 via Android
    我配给您建议吗?
        8
    ZredoC   23 天前
    我不配给您建议
        9
    azh7138m   23 天前
    这个是描边,不是按笔画
    字转 path 是 opentype 做的
    描边是个 stroke-dashoffset 做的动画
    读代码啊朋友们

    代码里面的_this 出现的很诡异,不知道为啥要这么写。。。也没必要
        10
    lizhenda   23 天前
    厉害啊
        11
    xiaotuzi   23 天前 via iPhone
    首先,是一个不错的点子!
    其次,这个 JS 不是你自己的,只能说搬过来用,跟以前一个前端写在线打开文档一样,用的是别人的 api😂
    但,不可否认,感谢提供 api 的 demo
        12
    chengxy   23 天前
    @azh7138m #9 小程序写多了
        13
    genius2k   23 天前
    我不配给您建议
        14
    rabbirbot00   23 天前
    README 上的英文文档链接貌似指向的还是中文文档
        15
    meloncc   23 天前
    @azh7138m
    代码里面使用 ”_“加变量,在 JavaScript 中约定俗成的局部变量声明。不过,这样声明在 class 中好像没什么意义,setFont 中使用 async/await 应该也不需要声明_this 这个变量。
    @xiaotuzi
    能够实现新的东西,不管使用什么代码都是有价值的吧,感觉没必要重复的造轮子。
        16
    azh7138m   23 天前 via Android
    @meloncc 是我觉得代码风格割裂,所以说了诡异
        17
    duanxianze   22 天前
    大佬啊 太强了 我不配提建议
        18
    oubenruing   22 天前
    @vtwoextb 中文要导入中文字体才能使用
        19
    oubenruing   22 天前
    @azh7138m 是的,代码写的不太仔细,回头在调整下。
        20
    oubenruing   22 天前
    @xiaotuzi 因为产生这个点子的时候,也查了很多看有没有人已经做出类似东西,生成 path 这个也有别人写好的东西,就拿来用了。
        21
    oubenruing   22 天前
    @meloncc 感谢,我去从新组织下代码
        22
    oubenruing   22 天前
    @chengxy 被看穿了。。。
        23
    oubenruing   22 天前
    @rabbirbot00 感谢~
        24
    oubenruing   22 天前
    @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   22 天前
    @vtwoextb 字体大小目前有参数可以控制。斜体与否是根据使用字体来控制的,背景默认透明,在使用中可以通过父元素来控制。下载功能后续完善。
        26
    lzuntalented   22 天前
    挺漂亮的,还可以在描边时增加特效,可以参考下这个效果 https://github.com/lzuntalented/lz-paint-text
        27
    oubenruing   22 天前
    @lzuntalented 你的这个效果挺好!不过动画是用 js 控制的,我这个主要是 svg 用 css 动画,我看看能不能加上一些效果。谢谢!
        28
    ty89   22 天前
    动画效果比较单一,建议多增加一些效果
    这个需求还是有的,比如做视频片头就很有用
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3986 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 33ms · UTC 09:28 · PVG 17:28 · LAX 01:28 · JFK 04:28
    ♥ Do have faith in what you're doing.