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 条评论
登录 后参与评论

相关文章

来自专栏向治洪

android的Drawable详解

Drawable简介 Drawable有很多种,用来表示一种图像的概念,但他们又不完全是图像,他们是用过颜色构建出来的各种图像的表现形式。Drawable一般都...

2085
来自专栏Python小屋

Python编写抽奖式随机提问程序

本文主要思路:使用tkinter编写界面,使用3个Label组件和多线程技术实现学生名单的滚动显示。 import tkinter import tkinter...

47613
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

从navigator到react-navigation进阶教程

2693
来自专栏偏前端工程师的驿站

HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案

一、前言                               本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML...

25910
来自专栏前端儿

Flex 布局相关用法

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中 就不容易...

1301
来自专栏happyJared

IDEA快捷键拆解系列(三):Edit篇

  以下是关于Edit导航项及其每一子项的拆解,其中,加粗部分的选项是博主认为比较重要的。

1052
来自专栏Android干货

Android项目实战(二十三):仿QQ设置App全局字体大小

8687
来自专栏林德熙的博客

win10 uwp 简单MasterDetail UWP 导航List点击后退按钮页面更改大小修改显示修改我代码源码左右的列表和内容的相互操作

本文主要讲实现一个简单的界面,可以在窗口比较大显示列表和内容,窗口比较小时候显示列表或内容。也就是在窗口比较小的时候,点击列表会显示内容,点击返回会显示列表。

790
来自专栏阮一峰的网络日志

CSS动画简介

现在,我很少写介绍CSS的文章,因为感觉网站开发的关键还是在服务器端。 但是,CSS动画除外,它实在太有用了。 ? 本文介绍CSS动画的两大组成部分:trans...

3628
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(3)---行列操作

开发人员可以定义用户与行和列的交互,如是否可以更改行或列的大小、是否可以移动行或列、冻结指定的行或列、在行或列中查找数据等。 更改行或列的大小 你可以允许用户重...

2816

扫码关注云+社区

领取腾讯云代金券