fabric.js

目录

一、在canvas上画简单的图形

二、在canvas上用路径(Path)画不规则图形

三、在canvas上插入图片并设置旋转属性(angle)

四、让元素动起来(animate)

五、图像过滤器(filters)让图片多姿多彩

六、颜色模式(Color)和相互转换(toRgb、toHex)

七、对图形的渐变填充(Gradient)

八、文本(Text/Textbox)编辑和属性编辑

九、事件监听

十、方法

文档：https://fabricjs.com/

GitHub下载地址：https://github.com/fabricjs/fabric.js

将下载的文件夹里dist包的fabric.js或index.min.js文件拿过来,或者直接引入链接也可以使用，框架则需要用npm下载。

一、在canvas上画简单的图形

画出来的图形或者对象默认就可以进行拖拽拉伸和旋转操作。

<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 引入方法 二选一 --><script src="./index.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script></head><body><canvas id="main" width="800" height="800"></canvas><script type="text/javascript">var canvas = new fabric.Canvas("main");var rect = new fabric.Rect({left: 10,top: 100,fill: "red",width: 100,height: 100,});var circle = new fabric.Circle({radius: 50,fill: "green",left: 160,top: 50,height: 200,});var triangle = new fabric.Triangle({width: 100,height: 100,fill: "blue",left: 300,top: 100,});canvas.add(rect); //添加一个正方形canvas.add(circle); //添加一个圆形canvas.add(triangle);//添加一个三角形</script></body>
</html>

二、在canvas上用路径(Path)画不规则图形

    <script type="text/javascript">var canvas = new fabric.Canvas("main");// 三角形的顶点坐标由 SVG 路径数据定义var path = new fabric.Path("M 0 0 L 200 100 L 170 200 z");path.set({left: 220,top: 120,fill: "yellow",});// 定义心形的 SVG 路径数据var heartPath ="M 100,150 " +"C 75,100 25,100 0,150 " +"C 25,200 75,200 100,250 " +"C 125,200 175,200 200,150 " +"C 175,100 125,100 100,150 z";var heart = new fabric.Path(heartPath, {left: 50,top: 25,fill: "red",stroke: "gold",strokeWidth: 2,});canvas.add(path);canvas.add(heart);</script>

svg数据举例：

    <!-- svg 圆 --><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg><!-- svg 矩形 --><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><rect x="50" y="20" width="100" height="60" stroke="black" stroke-width="2" fill="blue" /></svg>

M是起点，L是绘制直线，Z是闭合路径，C是创建一个三次贝塞尔曲线，A是绘制大型弧形，a是绘制小型弧形。

矩形：x 和 y 是起点坐标，w 是宽度，h 是高度

圆形：cx和cy是圆心坐标，rx和ry是半径

三、在canvas上插入图片并设置旋转属性(angle)

  <body><canvas id="main" width="800" height="800"></canvas><img src="./paper.png" alt="" id="paper-img" /><script type="text/javascript">var canvas = new fabric.Canvas("main");var imgRlement = document.getElementById("paper-img");var imgInstance = new fabric.Image(imgRlement, {left: 100,top: 100,width: 500,height: 500,angle: 30,});canvas.add(imgInstance);// 第二种:直接导入路径fabric.Image.fromURL("./paper.png",function (oImg) {oImg.scale(0.1);canvas.add(oImg);},{ crossOrigin: "anonymous" });</script></body>

四、让元素动起来(animate)

  <body><canvas id="main" width="800" height="800"></canvas><script type="text/javascript">var canvas = new fabric.Canvas("main");var rect = new fabric.Rect({left: 100,top: 100,fill: "red",width: 100,height: 100,});// 设置初始角度为45度rect.set("angle", 45);// 将矩形添加到 canvascanvas.add(rect);// 执行旋转动画rect.animate("angle", 360, {duration: 2000, // 动画持续时间 2 秒easing: fabric.util.ease.easeOutBounce, // 缓动效果onChange: canvas.renderAll.bind(canvas), // 每帧渲染一次});</script></body>

五、图像过滤器(filters)让图片多姿多彩

下面展示常见的六种滤镜，可以单独使用，也可以混合使用(可加对比度【Contrast】)：

  <body><canvas id="main" width="800" height="800"></canvas><script type="text/javascript">var canvas = new fabric.Canvas("main");fabric.Image.fromURL("redhat.png", function (img) {// 1、给图片添加灰度滤镜img.filters.push(new fabric.Image.filters.Grayscale());// 2、老照片的棕色调效果img.filters.push(new fabric.Image.filters.Sepia());// 3、反转图像的颜色：负片效果img.filters.push(new fabric.Image.filters.Invert());// 4、给图片添加马赛克img.filters.push(new fabric.Image.filters.Pixelate({blocksize: 10, // 像素块大小，值越大像素化效果越明显}));// 5、模糊图像img.filters.push(new fabric.Image.filters.Blur({blur: 0.5, // 控制模糊的程度}));// 6、调整图像的亮度img.filters.push(new fabric.Image.filters.Brightness({brightness: -0.5, // 亮度值，值范围：-1到1，负值降低亮度，正值提高亮度}));// 应用滤镜并刷新画布// img.applyFilters(canvas.renderAll.bind(canvas));旧版本img.applyFilters();canvas.add(img);});</script></body>

补充：fabric.Image.filters.Contrast可以调整图像的对比度

        img.filters.push(new fabric.Image.filters.Sepia(), // 怀旧照片new fabric.Image.filters.Brightness({brightness: -0.5,}), // 亮度滤镜//对比度值范围：-1到1，负值降低对比度，正值提高对比度new fabric.Image.filters.Contrast({ contrast: 0.3 }));

六、颜色模式(Color)和相互转换(toRgb、toHex)

    <script type="text/javascript">var canvas = new fabric.Canvas("main");var color1 = new fabric.Color("#f11");//红色var color2 = new fabric.Color("#4168FF");//蓝色var color3 = new fabric.Color("rgb(10,20,30,0.5)");var color6 = color1.toRgb();var color7 = color3.toHex();// 用color2覆盖color1，并转为rgb格式var color8 = color1.overlayWith(color2).toRgb();//紫色console.log(color6); //rgb(255,17,17)console.log(color7); //0A141Evar rect = new fabric.Rect({left: 100,top: 100,width: 300,height: 300,fill: color8,});canvas.add(rect)</script>

七、对图形的渐变填充(Gradient)

    <script type="text/javascript">var canvas = new fabric.Canvas("main");var circle = new fabric.Circle({left: 100,top: 100,radius: 150,strokeWidth: 2,stroke: "red",fill: new fabric.Gradient({type: "linear", // 线性渐变x1: 0, // 渐变起点 (x)y1: 0, // 渐变起点 (y)x2: 1, // 渐变终点 (x)y2: 1, // 渐变终点 (y)colorStops: [{ offset: 0, color: "#ff0000" }, // 起始颜色：红色{ offset: 1, color: "#0000ff" }, // 结束颜色：蓝色],}),});console.log(circle.fill);canvas.add(circle);</script>

八、文本(Text/Textbox)编辑和属性编辑

  <body><canvas id="main" width="800" height="800"></canvas><script type="text/javascript">var canvas = new fabric.Canvas("main");// 单行文本// var text = new fabric.Text("Hello Everyone", {// 多行文本var text = new fabric.Textbox("Hello\nEveryone\nThis is a multiline text.", {left: 100,top: 100,fontFamily: "Arial",fontSize: 70,fill: "green",textAlign: "left",width: 600,lineHeight: 1.5,textDecoration: "underline", // 设置下划线:overline | line-through 【版本问题可能显示不出来】});canvas.add(text);</script></body>

九、事件监听

      canvas.on("mouse:down", function (options) {console.log(options.e.clientX, options.e.clientY);});rect.on("selected", function () {console.log("selected a rect");});circle.on("selected", function () {console.log("selected a circle");});

十、方法

示例：

    bindEvents() {// 监听对象修改事件（包括旋转、缩放、位置变化等）this.canvas.on('object:modified', (e) => {const modifiedObject = e.target// 如果需要获取对象的任何属性（例如，位置、大小、旋转角度等）console.log('当前尺寸：', modifiedObject.width, modifiedObject.height)console.log('当前旋转角度：', modifiedObject.angle)console.log('当前缩放比例：',modifiedObject.scaleX,modifiedObject.scaleY)console.log('当前位置：', modifiedObject.left, modifiedObject.top)const boundingRect = modifiedObject.getBoundingRect()// 输出旋转后的宽高console.log('旋转后的宽度:', boundingRect.width)console.log('旋转后的高度:', boundingRect.height)})},

这个写的不错，可以当中文参考，英语不错的可以直接看原文档

Fabric.js 中文文档_fabricjs中文文档-CSDN博客

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

23. 合并 K 个升序链表(java)

23. 合并 K 个升序链表(java)

题目描述&#xff1a; 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中&#xff0c;返回合并后的链表。 示例 1&#xff1a; 输入&#xff1a;lists [[1,4,5],[1,3,4],[2,6]] 输出&#xff1a;[1,1,2,3,4,4,5,6] 解释&#xff…
阅读更多...
爬取Q房二手房房源信息

爬取Q房二手房房源信息

文章目录 1. 实战概述2. 网站页面分析3. 编写代码爬取Q房二手房房源信息3.1 创建项目与程序3.2 运行程序&#xff0c;查看结果 4. 实战小结 1. 实战概述 本次实战项目旨在通过编写Python爬虫程序&#xff0c;抓取深圳Q房网上的二手房房源信息。我们将分析网页结构&#xff0c;…
阅读更多...
【蓝桥杯】43699-四平方和

【蓝桥杯】43699-四平方和

四平方和 题目描述 四平方和定理&#xff0c;又称为拉格朗日定理&#xff1a; 每个正整数都可以表示为至多 4 个正整数的平方和。如果把 0 包括进去&#xff0c;就正好可以表示为 4 个数的平方和。 比如&#xff1a; 502021222 712121222; 对于一个给定的正整数&#xff0c;可…
阅读更多...
Kerberos身份验证

Kerberos身份验证

Kerberos是更现代化的身份验证协议&#xff0c;它比 NTLM 认证更安全&#xff0c;但域内某些服务仍支持 NTLM 认证。Kerberos 和 NTLM 认证一样&#xff0c;都是通过在 SSPI 接口实现的功能&#xff0c;这使得使用第三方协议&#xff08;如&#xff1a;HTTP、SMB、LDAP&#xf…
阅读更多...
达梦8-达梦数据的示例用户和表

达梦8-达梦数据的示例用户和表

1、示例库说明&#xff1a; 创建达梦数据的示例用户和表&#xff0c;导入测试数据。 在完成达梦数据库的安装之后&#xff0c;在/opt/dmdbms/samples/instance_script目录下有用于创建示例用户的SQL文件。samples目录前的路径根据实际安装情况进行修改&#xff0c;本文将达梦…
阅读更多...
认识javascript中的模块化

认识javascript中的模块化

什么是模块化&#xff1f; 将程序⽂件依据⼀定规则拆分成多个文件&#xff0c;拆分出来每个⽂件就是⼀个模块&#xff0c;模块中的数据都是私有的&#xff0c;模块之间互相隔离。如果不进行隔离&#xff0c;可能会造成模块间的变量定义有冲突&#xff0c;导致程序崩溃 为啥要使…
阅读更多...
EasyExcel 动态设置表格的背景颜色和排列

EasyExcel 动态设置表格的背景颜色和排列

项目中使用EasyExcel把数据以excel格式导出&#xff0c;其中设置某一行、某一列单元格的背景颜色、排列方式十分常用&#xff0c;记录下来方便以后查阅。 1. 导入maven依赖&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>easy…
阅读更多...
AccessClient在苹果电脑闪退，解决方法

AccessClient在苹果电脑闪退，解决方法

AccessClient 2 年前突然闪退了&#xff0c;一直没管&#xff0c;最近弄一个 electron打包&#xff0c;一直提示找不到 python&#xff0c;解决了 python 解释器后&#xff0c;顺手把AccessClient闪退解决了&#xff0c;解决思路如下&#xff1a; 1.在AccessClient点击鼠标右…
阅读更多...
NVM：安装配置使用（详细教程）

NVM：安装配置使用（详细教程）

文章目录 一、简介二、安装 nvm三、配置 nvm 镜像四、配置环境变量五、使用教程5.1 常用命令5.2 具体案例 六、结语 一、简介 在实际的开发和学习中可能会遇到不同项目的 node 版本不同&#xff0c;而出现的兼容性问题。 而 nvm 就可以很好的解决这个问题&#xff0c;它可以在…
阅读更多...
ActiveMQ 反序列化漏洞CVE-2015-5254复现

ActiveMQ 反序列化漏洞CVE-2015-5254复现

文章目录 一、产生原因二、利用条件三、利用过程四、PoC&#xff08;概念验证&#xff09;五、poc环境验证使用find搜索vulhub已安装目录打开activeMQ组件查看配置文件端口启动镜像-文件配置好后对于Docker 镜像下载问题及解决办法设置好镜像源地址&#xff0c;进行重启docker查…
阅读更多...
【Python】【数据分析】深入探索 Python 数据可视化：Seaborn 可视化库详解

【Python】【数据分析】深入探索 Python 数据可视化：Seaborn 可视化库详解

目录 引言一、Seaborn 简介二、安装 Seaborn三、Seaborn 的基本图形3.1 散点图&#xff08;Scatter Plot&#xff09;3.2 线图&#xff08;Line Plot&#xff09;3.3 条形图&#xff08;Bar Plot&#xff09;3.4 箱型图&#xff08;Box Plot&#xff09;3.5 小提琴图&#xff0…
阅读更多...
某药业数据中心与重工集团灾备中心SAP监测实战应用

某药业数据中心与重工集团灾备中心SAP监测实战应用

在当今数字化转型的浪潮中&#xff0c;企业的IT系统承载着前所未有的业务压力。作为业务运营的核心支撑&#xff0c;SAP系统的稳定性和性能优化成为运维团队关注的重点。本文将结合两个实际案例——某药业集团数据中心&#xff08;以下简称“药业数据中心”&#xff09;与某重工…
阅读更多...
Qt编译MySQL数据库驱动

Qt编译MySQL数据库驱动

目录 Qt编译MySQL数据库驱动 测试程序 Qt编译MySQL数据库驱动 &#xff08;1&#xff09;先找到MySQL安装路径以及Qt安装路径 C:\Program Files\MySQL\MySQL Server 8.0 D:\qt\5.12.12 &#xff08;2&#xff09;在D:\qt\5.12.12\Src\qtbase\src\plugins\sqldrivers\mysql下…
阅读更多...
开发布局总结

开发布局总结

线性布局 (Row/Column) 概述&#xff1a; 线性容器Row和Column构建。线性布局是其他布局的基础&#xff0c;其子元素在线性方向上&#xff08;水平方向和垂直方向&#xff09;依次排列。线性布局的排列方向由所选容器组件决定&#xff0c;Column容器内子元素按照垂直方向排列…
阅读更多...
网络数据包分析

网络数据包分析

Target 实践内容&#xff1a;使用 Wireshark 捕获和分析网络流量。 涉及知识点&#xff1a;Wireshark 基本使用、数据包结构、理解网络协议分析、网络流量分析。 Trial Wireshark使用WinPCAP作为接口&#xff0c;直接与网卡进行数据报文交换。 Wireshark基本使用 勾选 WLA…
阅读更多...
游戏引擎学习第45天

游戏引擎学习第45天

仓库: https://gitee.com/mrxiao_com/2d_game 回顾 我们刚刚开始研究运动方程&#xff0c;展示了如何处理当人物遇到障碍物时的情况。有一种版本是角色会从障碍物上反弹&#xff0c;而另一版本是角色会完全停下来。这种方式感觉不太自然&#xff0c;因为在游戏中&#xff0c;…
阅读更多...
微知-C语言如何指定弱符号？(#define WEAK __attribute__((weak))； WEAK int foo(void))

微知-C语言如何指定弱符号？(#define WEAK __attribute__((weak))； WEAK int foo(void))

背景 在C语言中&#xff0c;弱符号是一种特殊的符号&#xff0c;它可以被重定义&#xff0c;但在链接时&#xff0c;只会使用被重定义的符号。 在某些情况下&#xff0c;我们需要在多个文件中定义相同的函数&#xff0c;但只使用其中一个函数。本文将介绍如何在C语言中实现弱符…
阅读更多...
windos系统安装-mysql 5.7 zip压缩包教程

windos系统安装-mysql 5.7 zip压缩包教程

一, 安装包下载 在mysql官网上下载mysql5.7版本的压缩包 官方网址: https://dev.mysql.com/downloads/mysql/5.7.html#downloads选择历史版本 选择系统和数据库版本下载 下载完成后解压到安装的目录 二, 新增数据目录,配置文件, 配置环境变量 新建data文件夹用于存放数据库…
阅读更多...
Tengine 搭建手册

Tengine 搭建手册

简介 官网&#xff1a; tengine.taobao.org/ Tengine是由[淘宝](http://en.wikipedia.org/wiki/Taobao)发起的Web服务器项目。它在[Nginx](https://nginx.org/)的基础上&#xff0c;针对大访问量网站的需求&#xff0c;添加了很多高级功能和特性。Tengine的性能和稳定性已经在…
阅读更多...
MybatisPlus-配置加密

MybatisPlus-配置加密

配置加密 目前配置文件中的很多参数都是明文&#xff0c;如果开发人员发生流动&#xff0c;很容易导致敏感信息的泄露。所以MybatisPlus支持配置文件的加密和解密功能。 我们以数据库的用户名和密码为例。 生成秘钥 首先&#xff0c;我们利用AES工具生成一个随机秘钥&#…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023