fabric.js

ops/2024/12/19 7:34:33/

目录

一、在canvas上画简单的图形

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

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

四、让元素动起来(animate)

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

fabric.js%E7%9A%84%E9%A2%9C%E8%89%B2%E6%A8%A1%E5%BC%8F%E5%92%8C%E7%9B%B8%E4%BA%92%E8%BD%AC%E6%8D%A2-toc" style="margin-left:0px;">六、颜色模式(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 }));

fabric.js%E7%9A%84%E9%A2%9C%E8%89%B2%E6%A8%A1%E5%BC%8F%E5%92%8C%E7%9B%B8%E4%BA%92%E8%BD%AC%E6%8D%A2">六、颜色模式(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.ppmy.cn/ops/143126.html

相关文章

常用的es操作

常用的es操作

前言 我们前面写过ES基础操作和ES高级查询 写的都很细&#xff0c;但是很多时候我们仅仅是忘记具体的某个语法&#xff0c;去那两篇博客查找就很麻烦了&#xff0c;这篇博客就把常用的ES操作进行总结。 常用操作 建索引&#xff08;建表&#xff0c;不过并没有指定字段名和类…
阅读更多...
【Qt】信号、槽

【Qt】信号、槽

目录 一、信号和槽的基本概念 二、connect函数&#xff1a;关联信号和槽 例子&#xff1a; 三、自定义信号和槽 1.自定义槽函数 2.自定义信号函数 例子&#xff1a; 四、带参的信号和槽 例子&#xff1a; 五、Q_OBJECT宏 六、断开信号和槽的连接 例子&#xff1a; …
阅读更多...
Java匿名类和lambda

Java匿名类和lambda

匿名类 匿名类就是一个语法糖&#xff0c;可以帮我们省略定义类名这一步&#xff0c;直接创建对象&#xff0c;简化代码 匿名类规则&#xff1a; 匿名类必须继承一个父类或实现一个接口&#xff0c;并且最多继承一个父类或实现一个接口。匿名类可以继承父类的方法&#xff0c…
阅读更多...
基于python绘制数据表（上）

基于python绘制数据表（上）

利用python绘制各种数据图表 绘制柱形图-源码 from openpyxl import Workbook from openpyxl.chart import BarChart, Reference# 创建工作薄 wb Workbook(write_onlyTrue) # 创建工作表 ws wb.create_sheet(月收入)# 准备数据 rows [(月份, 销售额),(1, 23),(2, 43),(3, …
阅读更多...
第十章 多表查询

第十章 多表查询

一、概述 我们在前面几个章节讲解SQL语句的时候&#xff0c;涉及到了DQL语句即数据查询语句&#xff0c;但是之前讲解的查询都是单表查询&#xff0c;而本章节我们要学习的则是多表查询操作。多表查询‌是指在数据库查询中涉及多个表的操作&#xff0c;通过连接运算来获取多个…
阅读更多...
（5）YOLOv3和yolov1、yolov2之间的差异

（5）YOLOv3和yolov1、yolov2之间的差异

一、YOLOv3的技术原理和改进 ​ YOLOv3算法是在YOLOv1和YOLOv2的基础上进一步改进和发展的&#xff0c;它在目标检测领域取得了显著的性能提升。YOLOv3成为了一个强大的目标检测工具&#xff0c;广泛应用于各种计算机视觉任务中&#xff0c;包括但不限于图像中的目标检测、视频…
阅读更多...
AIDD-人工智能药物设计-ChemDraw Mac版pojie安装

AIDD-人工智能药物设计-ChemDraw Mac版pojie安装

AIDD-人工智能药物设计-ChemDraw Mac版pojie安装 Mac系统12.X版本需要安装chemdraw v20及以上。 https://github.com/Z-H-Sun/CS_CCME_Posts/blob/hidden/cos/cdm2.md 一、准备工作 软件下载地址&#xff1a;https://pan.baidu.com/s/1SDZCriXsxPZvcHMoA7WzUA 提取码&#…
阅读更多...
ASP.NET Core - 依赖注入 自动批量注入

ASP.NET Core - 依赖注入 自动批量注入

依赖注入配置变形 随着业务的增长&#xff0c;我们项目工作中的类型、服务越来越多&#xff0c;而每一个服务的依赖注入关系都需要在入口文件通过Service.Add{}方法去进行注册&#xff0c;这将是非常麻烦的&#xff0c;入口文件需要频繁改动&#xff0c;而且代码组织管理也会变…
阅读更多...
最新文章

Copyright @ 2022~2023