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

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

  •  
  •   oubenruing ·
    oubenruing · 2019-11-12 17:35:33 +08:00 · 5122 次点击
    这是一个创建于 1836 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    第 1 条附言  ·  2019-12-13 17:59:19 +08:00
    重新组织了代码,除了支持 css 生成动画的方式外,还增加了 svg SMIL 的动画方式,该模式下生成的动画可以直接复制粘贴进微信公众号的文章使用,顺便也写了个生成用的小工具。

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

    对提出意见,以及 star 的朋友们,表示感谢!
    28 条回复    2019-11-14 10:05:24 +08:00
    1O
        1
    1O  
       2019-11-12 18:02:20 +08:00
    我配给您建议吗?
    monkJay
        2
    monkJay  
       2019-11-12 18:30:50 +08:00
    666
    vtwoextb
        3
    vtwoextb  
       2019-11-12 18:34:12 +08:00
    输入中文显示乱码;可以增加背景颜色、大小、字体倾斜、下载等功能就好了,目前市场有这方面的需求,而且国外有人专门做这个卖的
    fengfuliu
        4
    fengfuliu  
       2019-11-12 18:37:06 +08:00
    文档写的很规范 老程序员了
    liuzhiyong
        5
    liuzhiyong  
       2019-11-12 18:49:00 +08:00 via Android
    我靠,威武,还有这操作。
    sologgfun
        6
    sologgfun  
       2019-11-12 19:15:19 +08:00
    我配给您建议吗?
    oneisall8955
        7
    oneisall8955  
       2019-11-12 19:47:07 +08:00 via Android
    我配给您建议吗?
    ZredoC
        8
    ZredoC  
       2019-11-12 21:02:17 +08:00
    我不配给您建议
    azh7138m
        9
    azh7138m  
       2019-11-12 21:04:14 +08:00
    这个是描边,不是按笔画
    字转 path 是 opentype 做的
    描边是个 stroke-dashoffset 做的动画
    读代码啊朋友们

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