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

一个可以通过 json 绘制 canvas 的库.支持 web&小程序

  •  
  •   willnewii · 2019-06-14 10:55:07 +08:00 · 2431 次点击
    这是一个创建于 1749 天前的主题,其中的信息可能已经有所发展或是发生改变。

    说明

    小程序的项目中有动态生成海报的需求,于是就找到了mp_canvas_drawer这个项目. 但是发现不支持图片的圆角,也不支持圆形(头像加边框). 就自己造了个轮子.和 mp_canvas_drawer 原理相同,小程序部分组件部分也直接用了 mp_canvas_drawer 的代码.

    功能

    支持图片(圆角),圆,矩形,文字(长文折行). 如果你用过 cax,还有一个很好玩的概念 group,这里也支持. 因为 canvas 的绘制部分是基于 dntzhang 大神的cax.所以你的一份 json,可以同时在小程序和 web 中使用

    然后就有了这个项目: json2canvas.

    预览

    demo:修改左边的 json 数据,就可以直接看到变化.

    目前支持的元素还不多,仅仅完成了自己需求,如果有需要,欢迎 star & issue

    https://github.com/willnewii/json2canvas

    3 条回复    2019-06-14 16:16:13 +08:00
    coolzjy
        1
    coolzjy  
       2019-06-14 11:30:43 +08:00   ❤️ 1
    文字折行算法太暴力了,很多地方是不能换行的(包括单词中、标点之前)。正好在写相关的东西,沉淀了一个匹配文本中可以换行位置的正则,可以用来加强一下换行的算法 https://regexr.com/4f12l
    ericls
        2
    ericls  
       2019-06-14 12:11:09 +08:00 via iPhone
    svg?
    willnewii
        3
    willnewii  
    OP
       2019-06-14 16:16:13 +08:00
    @coolzjy 多谢 多谢~ 已经换上啦~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1591 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:54 · PVG 00:54 · LAX 09:54 · JFK 12:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.