V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
nihaojob
V2EX  ›  程序员

Canvas 库 fabric.js 可以实现哪些功能? 动图介绍

  •  
  •   nihaojob · 277 天前 · 1802 次点击
    这是一个创建于 277 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我是开源图形编辑器vue-fabric-editor的作者,它是基于 fabric.js 和 Vue 开发的插件化图片编辑器,可自定义字体、素材、设计模板、右键菜单、快捷键。可以非常方便的二次开发,帮助开发者快速构建图片编辑应用。

    fabric.js 是一个 canvas 库,今天整理了一下 fabric.js 可以实现的功能,用动图的形式分享给大家,方便快速了解 fabric.js 。

    源码见链接

    辅助线

    辅助线

    辅助线

    曲线文字

    曲线文字

    垂直文字

    垂直文字

    3D 结合

    3D 2D 结合

    自定义文字条

    文字工具条

    缩略图

    缩略图

    白板

    白板实现

    自定义控制条

    自定义控制条

    Gif 展示

    gif 展示

    gif 展示

    图表展示

    图表展示

    多边形绘制

    多边形绘制

    多边形调整

    拼图

    拼图

    拼图实现

    图片区域调整

    笔刷

    笔刷

    多图生成

    自动多图

    导入 PDF

    导入 PDF

    流动线条

    流动线条

    流动线条

    拖入元素

    元素拖入

    服装手机壳设计

    开源应用

    视频编辑器

    移动端拼图

    原型工具

    白板

    移动端

    画板

    物联网组态

    8 条回复    2024-02-19 17:42:25 +08:00
    yuuko
        1
    yuuko  
       277 天前
    有些图挂了
    nihaojob
        2
    nihaojob  
    OP
       277 天前
    @yuuko 可能图片比较大 可以在 github 上看 https://github.com/nihaojob/vue-fabric-editor
    caixiaomao
        3
    caixiaomao  
       277 天前
    学习了
    Geekerstar
        4
    Geekerstar  
       277 天前
    牛逼
    EspoirBao
        5
    EspoirBao  
       276 天前
    有没有 fabric 坐标转 dom 坐标的 demo ? fabric 里面绘制完对象之后在 dom 上面用 canvas 再覆盖一层带材质的贴图,这个功能做了几个月了没做好,始终有个偏移量,覆盖不完整
    nihaojob
        6
    nihaojob  
    OP
       276 天前
    @EspoirBao 为啥这么蹩脚的实现呢? 直接用不行吗? 这种还涉及画笔的缩放和拖拽,视口变化后,就不好映射到 DOM 的坐标了
    EspoirBao
        7
    EspoirBao  
       276 天前
    @nihaojob 程序嘛,是这个样子的,老板提的需求,要求在绘制了线之后可以改成动态的材质,类似 webgl 那样可以随便将线的材质贴上去,现在材质也能贴了,覆盖的 webgl 层也没问题了,就是这个坐标很麻烦
    Yjhenan
        8
    Yjhenan  
       276 天前
    看着功能挺强的,我写了个打印编辑器,用来给客户自定义标签用,dom 实现的,挺费劲的😓
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   999 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 20:12 · PVG 04:12 · LAX 12:12 · JFK 15:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.