专栏首页王磊的博客fabric.js和高级画板

fabric.js和高级画板

本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序.

高级画板功能介绍

  • 全局绘制颜色选择
  • 护眼模式、网格模式切换
  • 自由绘制
  • 画箭头
  • 画直线
  • 画虚线
  • 画圆/椭圆/矩形/直角三角形/普通三角形/等边三角形
  • 文字输入
  • 图片展示及相关移动、缩放等操作
  • 删除功能

(文末附:画板GitHub地址&fabric.js使用秘籍)

功能截图如下:

动态效果图:

fabric.js介绍

fabric.js是什么 fabric.js是可以简化canvas编写的js库,提供canvas缺少的对象模型,包含动画、数据序列号和反序列化的等高级功能的js库,开源项目,在GitHub有很多人贡献。

fabric.js优缺点 优点:fabric提供超好的画布能力. 缺点:api超级烂,没有相应的demo代码,上手难度较大.

fabric.js使用笔记

对象

fabric.Circle 圆 fabric.Ellipse 椭圆 fabric.Line 直线 fabric.Polygon fabric.Polyline fabric.Rect 矩形 fabric.Triangle 三角形

方法

add(object) 添加 insertAt(object,index) 添加 remove(object) 移除 forEachObject 循环遍历 getObjects() 获取所有对象 item(int) 获取子项 isEmpty() 判断是否空画板 size() 画板元素个数 contains(object) 查询是否包含某个元素 fabric.util.cos fabric.util.sin fabric.util.drawDashedLine 绘制虚线 getWidth() setWidth() getHeight() clear() 清空 renderAll() 重绘 requestRenderAll() 请求重新渲染 rendercanvas() 重绘画板 getCenter().top/left 获取中心坐标 toDatalessJSON() 画板信息序列化成最小的json toJSON() 画板信息序列化成json moveTo(object,index) 移动 dispose() 释放 setCursor() 设置手势图标 getSelectionContext()获取选中的context getSelectionElement()获取选中的元素 getActiveObject() 获取选中的对象 getActiveObjects() 获取选中的多个对象 discardActiveObject()取消当前选中对象 isType() 图片的类型 setColor(color) = canvas.set("full",""); rotate() 设置旋转角度 setCoords() 设置坐标

事件

object:added object:removed object:modified object:rotating object:scaling object:moving object:selected 这个方法v2已经废弃,使用selection:created替代,多选不会触发 before:selection:cleared selection:cleared selection:updated selection:created path:created mouse:down mouse:move mouse:up mouse:over mouse:out mouse:dblclick

常用属性

canvas.isDrawingMode = true; 可以自由绘制 canvas.selectable = false; 控件不能被选择,不会被操作 canvas.selection = true; 画板显示选中 canvas.skipTargetFind = true; 整个画板元素不能被选中 canvas.freeDrawingBrush.color = "#E34F51" 设置自由绘画笔的颜色 freeDrawingBrush.width 自由绘笔触宽度

IText的方法

selectAll() 选择全部 getSelectedText() 获取选中的文本 exitEditing() 退出编辑模式

绘制直线

var line = new fabric.Line([10, 10, 100, 100], {
  fill: 'green',
  stroke: 'green',    //笔触颜色
  strokeWidth: 2,//笔触宽度
});
canvas.add(line);

绘制虚线

在绘制直线的基础上添加属性strokeDashArray:Array example:

var line = new fabric.Line([10, 10, 100, 100], {
fill: 'green',
stroke: 'green',
strokeDashArray:[3,1] 
});
canvas.add(line);

strokeDashArray[a,b] =》 每隔a个像素空b个像素。

图片去掉选中边框和旋转,且只能移动,不可操作

oImg.hasControls = false; 只能移动不能(编辑)操作 oImg.hasBorders = false; 去掉边框,可以正常操作 hasRotatingPoint = false; 不能被旋转 hasRotatingPoint 控制旋转点不可见

fabric.Image.fromURL("300.jpg", function (oImg) {
  canvas.add(oImg);
  oImg.hasControls = oImg.hasBorders = false;
});

福利环节

简易画板程序GitHub地址:https://github.com/vipstone/drawingboard

fabric.js使用秘籍:https://github.com/vipstone/drawingboard/blob/master/fabricjs%E4%BD%BF%E7%94%A8%E7%AC%94%E8%AE%B0.md

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • fabric.js和高级画板

    本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择 护眼模式、网格模式切换 自由绘制 画箭头...

    Java中文社群_老王
  • React Native App设置&Android版发布

    React Native系列 《逻辑性最强的React Native环境搭建与调试》 《ReactNative开发工具有这一篇足矣》 《解决React N...

    Java中文社群_老王
  • RabbitMQ交换器Exchange介绍与实践

    有了Rabbit的基础知识之后(基础知识详见:深入解读RabbitMQ工作原理及简单使用),本章我们重点学习一下Rabbit里面的exchange(交换器)的知...

    Java中文社群_老王
  • fabric.js和高级画板

    本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择 护眼模式、网格模式切换 自由绘制 画箭头...

    Java中文社群_老王
  • Python中send()和sendal

    通信术语 最大传输单元(Maximum Transmission Unit,MTU)是指一种通信协议的某一层上面所能通过的最大数据包大小(以字节为单位)

    py3study
  • 推荐:微服务入坑详细指南

    概念:微服务就是一些可独立运行、可协同工作的小的服务。微服务是现在特别流行的服务,微服务的字面意思是大家都很好理解,就是将系统拆分成很多小的独立系统,每个系统我...

    技术zhai
  • Spinnaker 介绍 – Netflix 的持续交付平台

    Spinnaker 是 Netflix 在2015年开源的一款持续交付平台,它继承了 Netflix 上一代集群和部署管理工具 Asgard:Web-based...

    Debian社区
  • pytorch学习笔记(七):pytorch hook 和 关于pytorch backward过程的理解

    pytorch 的 hook 机制 在看pytorch官方文档的时候,发现在nn.Module部分和Variable部分均有hook的身影。感到很神奇,因为在使...

    ke1th
  • 数据清洗、合并、转化和重构

    1、数据清洗是数据分析关键的一步,直接影响之后的处理工作 2、数据需要修改吗?有什么需要修改的吗?数据应该怎么调整才能适用于接下来的分析和挖掘? 3、是一个迭代...

    用户1332428
  • 洛谷P1067 多项式输出(模拟)

    题目描述 一元 n 次多项式可用如下的表达式表示: ? 其中,aixi称为 i 次项,ai 称为 i 次项的系数。给出一个一元多项式各项的次数和系数,请按照如下...

    attack

扫码关注云+社区

领取腾讯云代金券