nihaojob / vue-fabric-editor Goto Github PK

快图设计-基于fabric.js和Vue的开源图片编辑器，可自定义字体、素材、设计模板。fabric.js and Vue based image editor, can customize fonts, materials, design templates.

Home Page: https://ikuaitu.github.io/doc/#/

License: MIT License

JavaScript 7.57% HTML 0.27% Vue 52.45% CSS 0.70% Shell 0.03% TypeScript 37.35% Less 1.58% Dockerfile 0.05%

svg-editor fabricjs editor vue-fabric design design-editor poster canvas-editor image-editor

vue-fabric-editor's Introduction

文档 | English | 中文

快图设计 - vue-fabric-editor

基于 fabric.js 和 Vue 开发的插件化图片编辑器，可自定义字体、素材、设计模板、右键菜单、快捷键。

特点

插件化架构：可自定义素材、右键菜单、快捷键等功能，易扩展。
简洁易用：以轻量、简洁为主的图形编辑器，而非大而全的在线 PS 类的重行设计工具。
功能齐全：自定义模板、渐变、自定义字体等功能，满足轻量图片编辑场景。

已有功能

功能介绍文章文字 + 动图。

导入 JSON、PSD 文件
保存为 PNG、SVG、JSON 文件
插入 SVG、图片文件
多元素水平、垂直对齐方式
字体模板
组合/拆分组合
图层及顺序调整
撤销/重做
背景属性设置
外观属性/字体属性/描边/阴影
自定义字体
自定义模板素材
快捷键
右键菜单
辅助线
标尺
图片替换
图片滤镜
国际化

使用

启动项目

请先安装 node.js v16，及 pnpm，然后执行以下命令：

pnpm i
pnpm dev

自定义素材

可自定义字体、设计模板、标题模板，将接口、模板接口替换后即可。

开发者服务

微信交流群：我们组建了多个微信项目交流群，作者和项目维护者活跃在群内，定期解答问题。
知识星球：沉淀高质量常见问题、最佳实践文档，如跨域、部署、字体素材等问题，代码示例、长期更新围绕在开源编辑器、fabric.js 的相关资料。
付费咨询：提供 200 元/小时的咨询服务，帮你快速解决项目中遇到的问题。

付费版本

开源版本仅前端代码，付费版本提供完整的前后端服务，开箱即用，无须任何开发，支持 Docker 部署，包括功能：

素材管理后台：可对编辑器中的字体、模板、图片素材进行便捷操作管理。
批量导入：字体文件、素材、PSD 模板批量导入到后台系统。
用户管理：支持登录/注册，用户账号禁用启用。
用户素材：图片素材、用户模板。
HTTP 接口对接：微信、短信登录，API 接口登录，支持多种形式对接。
批量图片生成：可根据模板 + 内容，批量生成创意图片。
批量 AI 抠图：提供一定数量级的免费抠图服务。

我们致力于帮助企业快速、低成本构建图片编辑应用，支持定制开发，欢迎与我们联系。

贡献指南

项目致力于打造一个开箱即用的 web 图片编辑器应用，同时沉淀一个介于 web 图片编辑器应用与 fabric.js 之间的封装层，期望封装层面向开发者设计，提供更简单的接口，让开发者可以轻松的实现图片应用开发。

我们离目标还有很长的距离，如果你对这件事情感兴趣，真诚的邀请你加入，我们一起沉淀 fabric.js 的最佳实践，你会得到包括不限于以下列表的收获，你只要会简单的 Git 和 Javascript 语法就可以。

熟悉开源协作方式，成为项目贡献者。
Vue3 + TS 实践，边学边开发。
fabric.js 开发，边学边开发。
入门单元测试，边学边开发。
众多的 fabric.js 开发者交流。
图形编辑器架构经验。

目前有很多需要做的工作，比如英文文档的搭建、SDK 拆分等，欢迎与我联系，我愿意与你进行任何问题的交流，微信：13146890191。期待你的 issue 和 PR 。

这是我发表在掘金社区关于编辑器的技术笔记，会有更多的细节：

注：如果遇到技术问题，期望使用 issue 讨论，它更加开放与透明，足够多的信息会让解决问题变得更高效，参考提问的智慧。

规划

可能新增功能

第一阶段

第二阶段

第三阶段

致谢

刘明野标尺功能作者。
palxiao设计编辑器的渐变组件。

管理员

_nihaojob

_{Qiu-Jun(求职,求内推)}

_{wuchenguang1998}

贡献者

_nihaojob	_Qiu-Jun	_{wuchenguang1998}	_{AliceLanniste}	_ylx252	_liumingye
_momo2019	_ByeWord	_bigFace2019	_wohuweixiya	_zjc2233	_ijry
_makeng	_z09176141	_a847244052	_briver0825	_{skyscraperno1}	_pengzhijian
_JiangShuQ	_hudenghui	_ddshiyu	_yehan68	_luke358	_xiaozeo
_x007xyz	_wozhi-cl	_vvbear	_slarkerino	_rolitter	_moJiXiang
_macheteHot	_liuyaojun	_jooyyy	_guda-art	_nanfb	_dulltackle
_Bamzc	_Yangzongtai	_Alicehhhmm	_fuqianxi	_{icleitoncosta}	_liucity

License

Licensed under the MIT License.

vue-fabric-editor's People

Contributors

Stargazers

Watchers

Forkers

alexanderazharjan mrthinker1 itmier cellinlab zhangle-tool mengzhiai lyh0371 tomaspilar torns wang11111 tfbabi bookmarkbao imfantuan bigbigbao eat-full namekelly f2elab alexanderinum userand varnew kule2018 xujinghao user-zd chaos2022 zllugithub liupq yufengkz mr-cooler lailonghui wangytbest codeyu001 damao-code xcyn wangditxz gtiger666 ken551113 zhenhuihe 497983606 cikayo 3fu jiason flying4055 wangxiaoer5200 johnnyma zcy22606 barbara012 dolt131943 bootrestart jqk6 andygoo xinzhyu doctor-cyj vuuvv yuzhikuan jzhello jackwiy a1669579390 understanding adambear moeyc davidtina doubi235 xuess sdtm1016 jee-zh gzhidao1010 jechtliu qianmucheng benmo1602 hc0 mxlcpu jiasai kristydang sagilyu kerwinchina billydotzhang plysummer xindonglin musicsnap wenxiaoqian markbzhang yumengzhong sanyuesiyuewuyue cesiya23 luo-shishi orochigalois fys85 vockalimo microanswer cloudinskywith zzc1745 lzh15378738622 xjindf michael-f-chen zacat ripperts guxingzhe icleitoncosta wqzgh baiwusanyu-c

vue-fabric-editor's Issues

升级Vue3 + view-ui-plus

感谢 @houlonglong 大佬主动发起Vue3 + view-ui-plus升级，期待大佬PR，望知悉，请勿重复认领开发。

撤销重做

大佬，为什么点击图层会记入一次撤销呢？能否优化一下 && 是否可以恢复删除的呢？

4个角支持旋转

/**
 * 
 * 实现 fabricjs 支持在四个边角按下旋转元素
 * @author 晗萧 <[email protected]>
 * @version 1.0.0
 * 
 */

//渲染自定义图标
function renderIcon(icon) {
    return function renderIcon(ctx, left, top, styleOverride, fabricObject) {
    var size = this.cornerSize;
    ctx.save();
    ctx.translate(left, top);
    // ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));//跟随元素旋转
    ctx.drawImage(icon, -size/2, -size/2, size, size);
    ctx.restore();
    }
}

//定义旋转光标样式，根据转动角度设定光标旋转
function rotateIcon(angle){
    return `url("data:image/svg+xml,%3Csvg height='18' width='18' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'%3E%3Cg fill='none' transform='rotate(`
    + angle
    +` 16 16)'%3E%3Cpath d='M22.4484 0L32 9.57891L22.4484 19.1478V13.1032C17.6121 13.8563 13.7935 17.6618 13.0479 22.4914H19.2141L9.60201 32.01L0 22.4813H6.54912C7.36524 14.1073 14.0453 7.44023 22.4484 6.61688V0Z' fill='white'/%3E%3Cpath d='M24.0605 3.89587L29.7229 9.57896L24.0605 15.252V11.3562C17.0479 11.4365 11.3753 17.0895 11.3048 24.0879H15.3048L9.60201 29.7308L3.90932 24.0879H8.0806C8.14106 15.3223 15.2645 8.22345 24.0605 8.14313V3.89587Z' fill='black'/%3E%3C/g%3E%3C/svg%3E ") 12 12,crosshair`
}
//添加旋转控制响应区域
fabric.Object.prototype.controls.mtr = new fabric.Control({
    x: -0.5,
    y: -0.5,
    offsetY: -10,
    offsetX: -10,
    rotate: 20,
    actionName: 'rotate',
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    render: ()=>{}
});//↖左上
fabric.Object.prototype.controls.mtr2 = new fabric.Control({
    x: 0.5,
    y: -0.5,
    offsetY: -10,
    offsetX: 10,
    rotate: 20,
    actionName: 'rotate',
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    render: ()=>{}
});//↗右上
fabric.Object.prototype.controls.mtr3 = new fabric.Control({
    x: 0.5,
    y: 0.5,
    offsetY: 10,
    offsetX: 10,
    rotate: 20,
    actionName: 'rotate',
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    render: ()=>{}
});//↘右下
fabric.Object.prototype.controls.mtr4 = new fabric.Control({
    x: -0.5,
    y: 0.5,
    offsetY: 10,
    offsetX: -10,
    rotate: 20,
    actionName: 'rotate',
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    render: ()=>{}
});//↙左下

//渲染时，执行
canvas2.on('after:render', function() {
    if(canvas2.getActiveObject()){
        fabric.Object.prototype.controls.mtr.cursorStyle = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2)))
        fabric.Object.prototype.controls.mtr2.cursorStyle = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+90)
        fabric.Object.prototype.controls.mtr3.cursorStyle = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+180)
        fabric.Object.prototype.controls.mtr4.cursorStyle = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+270)
    }
});

//旋转时，实时更新旋转控制图标
canvas2.on('object:rotating', function(event) {
    var body=document.getElementById('editor').nextSibling;
    switch (event.transform.corner) {
        case "mtr":
            body.style.cursor = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2)))
            break;
        case "mtr2":
            body.style.cursor = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+90)
            break;
        case "mtr3":
            body.style.cursor = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+180)
            break;
        case "mtr4":
            body.style.cursor = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+270)
            break;
        default:
            break;
    }//设置四角旋转光标
})

Hello, I started the migration to Vue3, however, right away, I already had a problem.
The view-design library doesn't support vue3, only vue1 or vue2, do you have any suggestions of what we can use to replace it?