【实战篇】使用fabric.js 快速开发一个图片编辑器
大厂技术 高级前端 Node进阶
点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群
本文由作者@愚坤(秦少卫)投稿授权分享,项目源码已开源,感兴趣的可以点击源码地址学习下
最近自己开发了一个图片编辑器,把源码也放在了GitHub上,顺便也总结下使用fabric.js开发一个编辑器需要用到哪些知识点。
预览地址:https://nihaojob.github.io/vue-fabric-editor/
GitHub地址:https://github.com/nihaojob/vue-fabric-editor
架构设计
选型: fabric.js 和 konva.js都是强大的canvas库,功能上类似,konva.js比较新中文文档也多一些,因为比较熟悉fabric就没有采用konva。
要点: 因为框架用的vue,主要解决如何把fabric的实例对象共享给各个功能组件,区分出是未选中、单选、多选状态,然后将选中、取消选中事件暴露给各个功能组件,子组件根据状态进行独立的功能开发。
我的方法是在入口文件中初始化实例,然后与mixins结合,在mixins中定义了选择类型(多选、单选、未选中)、选中元素类型、选中id等属性,以及选中、取消选中的事件,子组件通过引入mixins来开发对应功能;如子组件需要对fabric对象进行操作,则可以通过inject获得原始对象。
入口文件:https://github.com/nihaojob/vue-fabric-editor/blob/161faae7b0adcf6f55d9efaa38cb6d7c6d2c01b5/src/views/HomeView.vue#L113
mixins文件:https://github.com/nihaojob/vue-fabric-editor/blob/main/src/mixins/select.js
初始化
初始化比较简单,fabric.js创建对象,用EventEmitter创建事件发射器,可订阅单选、多选、取消选择事件。通过vue的provide语法把fabric对象、EventEmitter对象向下传递,在mixins中保存选中的元素和选中状态。
初始化:https://github.com/nihaojob/vue-fabric-editor/blob/161faae7b0adcf6f55d9efaa38cb6d7c6d2c01b5/src/views/HomeView.vue#L111
事件发射器:
import EventEmitter from 'events'class EventHandle extends EventEmitter {init(handler){this.handler = handlerthis.handler.on("selection:created", (e) => this._selected(e));this.handler.on("selection:updated", (e) => this._selected(e));this.handler.on("selection:cleared", (e) => this._selected(e));}// 暴露单选多选事件_selected(e) {const actives = this.handler.getActiveObjects()if(actives && actives.length === 1) {this.emit('selectOne', actives)}else if(actives && actives.length > 1){this.mSelectMode = 'multiple'this.emit('selectMultiple', actives)}else{this.emit('selectCancel')}}
}export default EventHandle
mixins:
export default {inject: ['canvas', 'fabric', 'event'],data() {return {mSelectMode: '', // one | multiplemSelectOneType: '', // i-text | group ...mSelectId: '', // 选择idmSelectIds: [], // 选择id}},created(){this.event.on('selectOne', (e) => {this.mSelectMode = 'one'this.mSelectId = e[0].idthis.mSelectOneType = e[0].typethis.mSelectIds = e.map(item => item.id)})this.event.on('selectMultiple', (e) => {this.mSelectMode = 'multiple'this.mSelectId = ''this.mSelectIds = e.map(item => item.id)})this.event.on('selectCancel', () => {this.mSelectId = ''this.mSelectIds = []this.mSelectMode = ''this.mSelectOneType = ''})},methods: {/*** @description: 保存data数据* @param {Object} data 房间详情数据*/_mixinSelected({ event, selected }) {if(selected.length === 1) {const selectItem = selected[0]this.mSelectMode = 'one'this.mSelectOneType = selectItem.typethis.mSelectId = [selectItem.id]this.mSelectActive = [selectItem]}else if(selected.length > 1){this.mSelectMode = 'multiple'this.mSelectActive = selectedthis.mSelectId = selected.map(item => item.id)}else{this._mixinCancel()}},/*** @description: 保存data数据* @param {Object} data 房间详情数据*/_mixinCancel(data) {this.mSelectMode =''this.mSelectId= []this.mSelectActive =[]this.mSelectOneType = ''},}
}
背景设置
主要包括设置画布大小、设置背景颜色、设置背景图片,也可以设置背景重复方向。代码:
// 设置大小
setSize() {this.canvas.c.setWidth(this.width);this.canvas.c.setHeight(this.height);this.canvas.c.renderAll()
},
// 设置背景图片
setBgImg(target) {const imgEl = target.cloneNode(true);imgEl.onload = () => {// 可跨域设置const imgInstance = new this.fabric.Image(imgEl, { crossOrigin: 'anonymous' });// 渲染背景this.canvas.c.setBackgroundImage(imgInstance, this.canvas.c.renderAll.bind(this.canvas.c), {scaleX: this.canvas.c.width / imgInstance.width,scaleY: this.canvas.c.width / imgInstance.width,});this.canvas.c.renderAll()this.canvas.c.requestRenderAll();}
},
// 背景颜色设置
setColor(color) {this.canvas.c.setBackgroundColor(color, this.canvas.c.renderAll.bind(this.canvas.c))this.canvas.c.backgroundImage = ''this.canvas.c.renderAll()
}
插入元素
主要包括插入基础元素文字、正方形、圆形、三角形、SVG元素,详见代码:
addText() {const text = new this.fabric.IText('万事大吉', {...defaultPosition,fontSize: 40, id: uuid(),});this.canvas.c.add(text)this.canvas.c.setActiveObject(text);
},
addTriangle() {const triangle = new this.fabric.Triangle({top: 100,left: 100,width: 100,height: 100,fill: '#92706B'})this.canvas.c.add(triangle)this.canvas.c.setActiveObject(triangle);
},
导入SVG元素时,可以导入SVG文件或者字符串进行导入,调用fabric的loadSVGFromURL、loadSVGFromString方法进行导入,详见代码。
属性调整
不同元素的属性会有差异,但通用属性是一致的,如填充颜色、坐标、旋转角度、透明度等,也有很多特定元素的特定属性,如文字的字体属性、图片的滤镜属性等,详见代码。字体属性可以自定义字体,需要先下载字体后再进行设置,可以通过fontfaceobserver工具库下载指定字体,成功后再设置字体名称。
// 字体加载
var font = new FontFaceObserver(fontName);
font.load(null, 150000).then(() => {const activeObject = this.canvas.c.getActiveObjects()[0]activeObject && activeObject.set('fontFamily', fontName);this.canvas.c.renderAll()this.$Spin.hide();
}).catch((err) => {this.$Spin.hide();
})
元素对齐
元素对齐区分单选元素与多选元素,单选元素时只支持相对于画布水平、垂直、水平垂直对齐。
// name为 centerH | centerV | center
position(name){const activeObject = this.canvas.c.getActiveObject()if(activeObject){activeObject[name]()this.canvas.c.renderAll()}
}
多元素对齐有上下左右对齐、水平、垂直对齐,主要是通过获得最边缘元素的坐标,然后进行计算排序,如顶部对齐代码:
const activeObject = this.canvas.c.getActiveObject();if (activeObject && activeObject.type === 'activeSelection') {const activeSelection = activeObject;console.log(activeSelection)const activeObjectTop = -(activeObject.height / 2);activeSelection.forEachObject(item => {item.set({top: activeObjectTop,});item.setCoords();this.canvas.c.renderAll();});}
}
平均分配会复杂一些,需要计算出边缘与元素间距,再进行设置,详见代码。
其他用法
编辑器经常需要给元素进行分组/拆分组合、调整层级、回退、快捷键、画布放大/缩小、导入/导出文件等功能,不再一一罗列,这个小编辑器都已经支持,大家感兴趣的可以看源码。
组合
层级调整
快捷键实现
画布放大缩小
导入/导出
总结
fabric.js的功能很强大,可以很轻松的开发出一个简版的图片编辑器,自定义素材、模板、字体文件;还可以结合数据接口拼接模板生成图片,很轻松的实现定制模板 + 生成图片的功能,比如我的朋友借助我的功能 + 成语接口生成成语图片,在小红书上斩获了八千多的粉丝。
最后希望大家能够通过这个项目学习到fabric.js的基础用法,感兴趣的话可以一起维护这款小编辑器,欢迎star。
https://github.com/nihaojob/vue-fabric-editor
Node 社群我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。如果你觉得这篇内容对你有帮助,我想请你帮我2个小忙:1. 点个「在看」,让更多人也能看到这篇文章2. 订阅官方博客 www.inode.club 让我们一起成长点赞和在看就是最大的支持❤️
【实战篇】使用fabric.js 快速开发一个图片编辑器相关推荐
- 使用nw.js快速开发一个基于浏览器的小型桌面端(适用于高校学生完成可视化实验小作业)
首先讲下退坑事项,节约读者时间 虽然入门较为简单,能快速产出在本地的一个桌面端应用,但是 生成的exe会依赖SDK文件夹下的一些dll,所以不能简单的交付这个exe,需要使用额外的软件进行打包,如En ...
- Flutter完整开发实战详解(二、 快速开发实战篇) | 掘金技术征文
作为系列文章的第二篇,继<Flutter完整开发实战详解(一.Dart语言和Flutter基础)>之后,本篇将为你着重展示:如何搭建一个通用的Flutter App 常用功能脚手架,快速 ...
- Serverless 实战 —— 前端也可以快速开发一个 Puppeteer 网页截图服务
Serverless 实战 -- 前端也可以快速开发一个 Puppeteer 网页截图服务 更多云原生技术资讯可关注阿里巴巴云原生技术圈. Puppeteer 是什么? puppeteer 官网的介绍 ...
- 视频教程-基础篇:Spring MVC快速开发-Java
基础篇:Spring MVC快速开发 毕业于清华大学软件学院软件工程专业,曾在Accenture.IBM等知名外企任管理及架构职位,近15年的JavaEE经验,近8年的Spring经验,一直致力于架构 ...
- 面试官问:如何快速开发一个类似微信的聊天系统?
去年我们公司要我去面试一位候选人,当时刚好我接手了公司的 IM 系统,借这个机会,就问了候选人这个问题:如何快速开发一个类似微信的聊天系统? 这个问题的确让候选人回答起来很吃力: 从分析 PC 端微信 ...
- go html vue,用Go+Vue.js快速搭建一个Web应用(初级demo)
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开 ...
- 有了 serverless,前端也可以快速开发一个 Puppeteer 网页截图服务
更多云原生技术资讯可关注阿里巴巴云原生技术圈. Puppeteer 是什么? puppeteer 官网的介绍如下: Puppeteer is a Node library which provides ...
- FastAPI:快速开发一个文本转语音的接口
这段音频就是本文的接口生成的. Python Web 开发方面有一个很重要的环节就是开发接口,开发接口性能最好的工具就是闪电侠 FastAPI[1],正如它的名字一样,是非常快的 API.当然,还有一 ...
- 如何快速开发一个App手机应用
随着智能手机的不断普及,Adroid.IOS APP应用越来越多,不仅方便和丰富了我们的生活,同时也让许多企业都想在移动端分得一杯羹或者为自己的企业开发一个手机应用,但通常这些企业可能没有自己的技术团 ...
最新文章
- Junit指定测试执行顺序
- 电脑html按键侧滑广告,HTML5侧滑聊天面板
- 给Tomcat打开远程debug端口
- 曹大带我学 Go(10)—— 如何给 Go 提性能优化的 pr
- How is navigation target url request handled by backend
- HtmlGenericControl
- MAC版 的最新Docker 2.2版本配置国内代理的解决办法
- c++基础语句代码(循环语句)
- 中南大学oj:1352: New Sorting Algorithm
- Bug Algorithms
- NEC协议红外遥控器
- ajax读取文件的小总结
- Datawhale-深入浅出pytorch简介安装和基础知识
- 国内计算机类三大中文学报投稿体会(转载)
- 计算机二级msoffice设计,2017计算机二级MSoffice攻关必做题
- 自学考试-“运筹学基础”
- 从简单的数据表中学习oracle的窗口函数使用
- 工作中常用的oracle数据库sql
- 近在身边的神秘卫士——月球
- python matplotlib坐标轴设置的方法
热门文章
- 数据体系和专题分析实战。
- 进击的企业服务赛道,2020年有哪些增长新思路?
- 微信的秘密-python可视化微信好友信息
- python分隔符是干啥_python文件路径分隔符的详细分析
- c++中除号/ 的用法
- 关于Oracle函数INSTR使用的问题
- 捷波朗storm蓝牙耳机_Jabra 捷波朗 storm3 弦月3 蓝牙耳机
- 利用勒索软件Locky的漏洞来免疫系统
- 绝地求生服务器维护5.27,绝地求生1月27日更新内容 绝地求生2021年1月27日正式服维护公告...
- 我与学霸的距离计算机,我与学霸的差距作文500字