fabric操作canvas绘图(1)共32节

对于前端而言,离不开canvas就像鱼离不开水,前端canvas神器fabric你值得拥有!接下来我们就来一步步揭开她的面纱。

一、fabric的理解

用原生的canvas来实现,代码量会比较大,而且还要处理很多细节,而Fabric就是解决这些问题。如果说有什么功能能让canvas在眼前一亮,那一定是它能够很好的支持自由绘图!由于画布只是一个2D位图, Fabric为我们提供了一张纸:可以自由绘画,而且非常自然。

只需将Fabric canvas的isDrawingMode属性设置为true即可实现自由绘制模式。这样画布上的点击和移动就会被立刻解释为铅笔或刷子。

先安排一个vue中使用的例子:

<template><div class="app"><canvas id="canvas" width="300" height="200"></canvas></div>
</template><script>
import * as fabric from "fabric"
export default {mounted(){var canvas = new fabric.Canvas("canvas",{backgroundColor:"grey"});var rect = new fabric.Rect({left:100,top:100,fill:"red",width:20,height:20,});canvas.add(rect);}
}
</script>

效果如下图:

在Fabric中,我们对对象进行操作——实例化它们,更改其属性并将其添加到画布。这些对象是直接操作canvas的语法糖。

二、Fabric.js 基础对象

基础对象:

fabric.Rect 矩形
fabric.Circle 圆形
fabric.Triangle 三角形
fabric.Ellipse 椭圆
fabric.Line 线型
fabric.Polyline 折线
fabric.Polygon 多边形

方法:

add(object)  添加
remove(object) 移除
forEachObject 循环遍历
getObjects() 获取所有对象
item(int) 获取子项
isEmpty() 判断是否空画板
size() 画板元素个数
contains(object) 查询是否包含某个元素
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() 设置坐标
三、操作对象

我们更改某些鼠标交互时的对象属性(颜色,不透明度,大小,位置)。

Fabric和vue一样,数据驱动视图,我们只要变更对应对象的属性值,就可以驱动视图发生相应的变化。这些可供修改的属性,都与定位有关——left、top;尺寸——width、height;渲染——fill、opacity、stroke、strokeWidth;缩放和旋转——scaleX、scaleY、angle;甚至与翻转相关的内容——flipX、flipY和倾斜的skewX、skewY。

//读取
obj.get('属性名')
//设置
obj.set({属性名:属性值})
polygon.set("fill", "blue").set("stroke", "red");//将上文的多边形填充和边框颜色变更
//改变层级
下移:canvas.sendBackwards(canvas.getActiveObject());
上移:canvas.bringForward(canvas.getActiveObject());
置顶:canvas.bringToFront(canvas.getActiveObject());
置底:canvas.sendToBack(canvas.getActiveObject());//自定义原型对象属性方法
fabric.Object.prototype.getWidth = function () {return this.get("width");
};//新建画布对象const canvas = new fabric.Canvas("canvas", {backgroundColor: "pink",selectionColor: "blue",selectionLineWidth: 2,});// 多边形const polygon = new fabric.Polygon([{x: 100,y: 10,},{x: 250,y: 10,},{x: 250,y: 180,},{x: 150,y: 180,},],{left: 100,top: 50,fill: "red",strokeWidth: 4,stroke: "green",perPixelTargetFind: true,});canvas.add(polygon);console.log("获取宽度", polygon.getWidth());

// 图像对象 本地和网络图片

<template><div id="app"><!-- 1、创建 canvas 元素 --><canvaswidth="800"height="800"id="canvas"style="border: 1px solid #ccc"></canvas><imgsrc="@/assets/imgs/ai1.jpeg"alt="picture"id="img"width="100"height="auto"@load="imageLoad"/></div>
</template><script>
//引入fabric
import * as fabric from "fabric";
export default {name: "App",components: {},mounted(){//   var canvas = new fabric.Canvas("canvas",{backgroundColor:"grey"});//   var rect = new fabric.Rect({//     left:100,//     top:100,//     fill:"red",//     width:20,//     height:20,//   });//   canvas.add(rect);//在画布对象上添加这个矩形// // 位移//   rect.set({left:20,top:50});//修改举行对象的位置属性//   canvas.renderAll()//修改完之后重新渲染},data() {return {};},methods: {imageLoad() {var canvas = new fabric.Canvas("canvas",{backgroundColor:"rgb(100,200,200)"});const imgElement = document.getElementById("img");const imgInstance = new fabric.Image(imgElement, {left: 100,top: 100,angle: 45,opacity: 0.6,});console.log(imgInstance);canvas.add(imgInstance);},},
};
</script><style scoped lang="scss"></style>

好,到这里我们对 Fabric 有了基本的了解,后面章节,我们进入实战,开发一个画板编辑器

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/10655.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

C++ 内存分布及 new , delete 分配问题( ~~~ 面试重要 ~~~)

文章目录 前言一、内存分布二、new 、delete 分配问题总结 前言 本篇文章笔者将会对 C 中的内存问题简单的讲解 , 同时对 new , delete 的面试题进行重点讲解. 一、内存分布 ● C语言和C 分布情况是一样的, 如下 : ● 栈 ○ 栈 的管理是由编译器自动管理 , 不需要我们人为做…

数据结构-哈夫曼树

一.什么是哈夫曼树 不同搜索树的效率是不一样的,根据不同的频率构造效率比较好或者最好的搜索树就是哈夫曼树 二.哈夫曼树的定义 将带权路径的长度降低最低 每个叶子节点到根节点的距离乘权值&#xff0c;再全都加起来就得到了WPL值 第一颗二叉树:从上到下计算 5x14x23x32x41…

双11精选网络安全书单:打造数字世界的钢铁长城!

&#x1f91f; 基于入门网络安全/黑客打造的&#xff1a;&#x1f449;黑客&网络安全入门&进阶学习资源包 &#x1f31f;双11火热来袭&#xff0c;网络安全书单推荐&#x1f680; 随着数字化浪潮的汹涌澎湃&#xff0c;网络安全已经成为了每个从业者不可回避的重要议…

WebGUI之Gradio:Gradio 5的简介、安装和使用方法、案例应用之详细攻略

WebGUI之Gradio&#xff1a;Gradio 5的简介、安装和使用方法、案例应用之详细攻略 目录 Gradio 5的简介 1、Gradio的适用场景 2、Gradio 5 的主要改进包括&#xff1a; Gradio 5的安装和使用方法 1、安装和使用方法 2、使用方法 2.1、文本内容 (1)、简单的输入/输出组件…

初始Python篇(5)—— 集合

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a; Python 目录 集合 相关概念 集合的创建与删除 集合的操作符 集合的相关操作方法 集合的遍历 集合生成式 列表、元组、字典、集合的…

探索Python的Shell力量:Plumbum库揭秘

文章目录 探索Python的Shell力量&#xff1a;Plumbum库揭秘第一部分&#xff1a;背景介绍第二部分&#xff1a;Plumbum是什么&#xff1f;第三部分&#xff1a;如何安装Plumbum&#xff1f;2. 创建管道3. 重定向4. 工作目录操作5. 前台和后台执行 第五部分&#xff1a;场景应用…

大模型时代,算法岗到底哪个最有前景?什么样的算法工程师更吃香?

毫无疑问&#xff0c;全栈型的算法工程师将更为抢手&#xff0c;如果你精通大模型从训练到应用的整个流程&#xff0c;你走到哪里都不怕。 但往往人的精力有限&#xff0c;如果从数据、预训练、微调、对齐、推理、应用几个方面来看的话&#xff0c;个人觉得 “预训练>数据&…

Linux系统之sleep命令的基本使用

Linux系统之sleep命令的基本使用 一、sleep命令介绍二、sleep的使用帮助2.1 查看帮助信息2.2 基本语法 三、sleep命令的基本使用3.1 指定暂停时间长度3.2 结合多个时间单位 四、在脚本中应用五、注意事项 一、sleep命令介绍 sleep命令是一个在Unix和类Unix操作系统中常见的命令…

《Java核心技术 卷I》Swing处理2D图形

处理2D图形 Java1.0开始&#xff0c;Graphics类就包含绘制直线、矩形和椭圆等方法&#xff0c;但是绘制图形的操作能力有限&#xff0c;我们将使用Java2D的图形库。想绘制需要获得Graphics2D类的一个对象&#xff0c;是Graphics的子类。paintCompoent方法接收一个2D类对象&…

MySQL:客户端工具创建数据库

MySQL 是一个开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;用于存储、管理和检索数据。MySQL是基于SQL语言的&#xff0c;它具有高效、可靠、易用的特点。 客户端工具 这个mysqld.exe就在计算机安装的数据可服务&#xff0c;启动之后&#xff0c;mys…

【Python】计算机视觉应用:OpenCV库图像处理入门

计算机视觉应用&#xff1a;OpenCV库图像处理入门 在当今的数字化时代&#xff0c;计算机视觉&#xff08;Computer Vision&#xff09;已经渗透到各行各业&#xff0c;比如自动驾驶、智能监控、医疗影像分析等。而 Python 的 OpenCV 库&#xff08;Open Source Computer Visi…

万字长文详解JavaScript基础语法--前端--前端样式--JavaWeb

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 今天毛毛张带来的前端教程的第三期&#xff1a;JavaScript 文章目录 4.JavaScript4.1 JS简介4.1.1 JS起源4.1.2 JS 组成部分4.1.3 JS的引入方式 4.2 JS的数据类型和运…

医学图像算法之基于Unet的视网膜血管分割

第一步&#xff1a;准备数据 视网膜血管分割数据比较少&#xff0c;但效果好&#xff0c;总共40张 第二步&#xff1a;搭建模型 UNet主要贡献是在U型结构上&#xff0c;该结构可以使它使用更少的训练图片的同时&#xff0c;且分割的准确度也不会差&#xff0c;UNet的网络结构…

深度剖析JUC中LongAdder类源码

文章目录 1.诞生背景2.LongAdder核心思想3.底层实现&#xff1a;4.额外补充 1.诞生背景 LongAdder是JDK8新增的一个原子操作类&#xff0c;和AtomicLong扮演者同样的角色&#xff0c;由于采用AtomicLong 保证多线程数据同步&#xff0c;高并发场景下会导致大量线程同时竞争更新…

Python(PySimpleGUI 库)

PySimpleGUI 是一个用于简化 GUI 编程的 Python 包&#xff0c;它封装了多种底层 GUI 框架&#xff08;如 tkinter、Qt、WxPython 等&#xff09;&#xff0c;提供了简单易用的 API。PySimpleGUI 包含了大量的控件&#xff08;也称为小部件或组件&#xff09;&#xff0c;这些控…

LangChain学习心得总结

大模型开发遇到的问题及langchain框架学习 背景&#xff1a; 1、微场景间跳转问题&#xff0c;无法实现微场景随意穿插 2、大模型幻读&#xff08;推荐不存在的产品、自己发挥&#xff09; 3、知识库检索&#xff0c;语义匹配效果较差&#xff0c;匹配出的结果和客户表述的…

Linux基础(十二)——文件与文件系统的压缩、打包和备份

文件与文件系统的压缩、打包和备份 1.压缩1.1 压缩方法及其后缀1.2 gzip1.3 bzip21.4 xz 2.打包3.XFS文件系统备份与还原4.镜像文件创建&#xff08;mkisofs&#xff09; 1.压缩 1.1 压缩方法及其后缀 我们知道在 Linux 下面的扩展名是没有什么很特殊的意义的&#xff0c; 不…

简简单单的UDP

前言 上一篇了解了TCP的三次握手过程&#xff0c;目的、以及如何保证可靠性、序列号与ACK的作用&#xff0c;最后离开的时候四次挥手的内容&#xff0c;这还只是TCP内容中的冰山一角&#xff0c;是不是觉得TCP这个协议非常复杂&#xff0c;这一篇我们来了解下传输层另外一个协…

MLMs之OmniGen:OmniGen(统一图像生成模型)的简介、安装和使用方法、案例应用之详细攻略

MLMs之OmniGen&#xff1a;OmniGen(统一图像生成模型)的简介、安装和使用方法、案例应用之详细攻略 导读&#xff1a;这篇论文介绍了OmniGen&#xff0c;一个用于统一图像生成的扩散模型。论文的核心要点可以总结如下&#xff1a; >> 背景痛点&#xff1a; ● 图像生成领…

LeetCode 143.重排链表

题目&#xff1a; 给定一个单链表 L 的头节点 head &#xff0c;单链表 L 表示为&#xff1a; L0 → L1 → … → Ln - 1 → Ln请将其重新排列后变为&#xff1a; L0 → Ln → L1 → Ln - 1 → L2 → Ln - 2 → … 不能只是单纯的改变节点内部的值&#xff0c;而是需要实际…