基于 fabric.js 和 Vue 开发的插件化图片编辑器,满足轻量图片编辑场景!

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

基于 fabric.js 和 Vue 开发的插件化图片编辑器,满足轻量图片编辑场景!

特点

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

画布功能

画布属性:尺寸、预设大小、背景色。支持修改画布尺寸,也有预常用预设的画布尺寸,可以便捷设置,有背景色修改属性,同时提供常用颜色的快捷修改。基于 fabric.js 和 Vue 开发的插件化图片编辑器,满足轻量图片编辑场景!画布缩放:放大、缩小、自动适应、鼠标滚轮缩放。支持画布放大缩小操作,可按照 1:1 尺寸展示或自适应展示,页面窗口改变时会根据窗口大小自适应展示;滑动鼠标滚轮时可快捷缩放画布。基于 fabric.js 和 Vue 开发的插件化图片编辑器,满足轻量图片编辑场景!其他细节:拖拽画布、画布区域外显示控制条。画布支持拖拽操作,按住 alt 快捷键,可以拖动画布;当元素拖拽到画布外区域时,仍然展示控制条,但元素并不会被展示出来,所见即所得。基于 fabric.js 和 Vue 开发的插件化图片编辑器,满足轻量图片编辑场景!

应用场景

它适用于海报设计、封面设计、T 恤设计、奖状/工卡设计、电子价签设计、印章设计、手机壁纸、PPT 设计等场景,还有更复杂的工业软件场景,如机房拓扑拓展、设备巡检图等。基于 fabric.js 和 Vue 开发的插件化图片编辑器,满足轻量图片编辑场景!基于 fabric.js 和 Vue 开发的插件化图片编辑器,满足轻量图片编辑场景!

安装使用

需要安装 Node.js v16 及以上版本。

获取项目代码

git clone https://github.com/nihaojob/vue-fabric-editor.git

安装依赖

cd vue-fabric-editor
npm install

运行

npm run dev

打包

npm run build

传送门

开源协议:MIT

开源地址:https://github.com/nihaojob/vue-fabric-editor

项目合集:https://github.com/OpenTechCol/OpenTechCol

-END-


原文始发于微信公众号(开源技术专栏):基于 fabric.js 和 Vue 开发的插件化图片编辑器,满足轻量图片编辑场景!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/155141.html

(1)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!