当前位置: 首页 > news >正文

canvas-绘图库fabric.js简介

一般情况下简单的绘制,其实canvas原生方法也可以满足,比如画个线,绘制个圆形、正方形、加个文案。

  let canvas = document.getElementById('canvas');canvas.width = 1200;canvas.height = 600;canvas.style.width = '1200px';canvas.style.height = '600px';let ctx = canvas.getContext('2d');ctx.moveTo(400, 100);ctx.lineTo(400, 200);ctx.lineTo(500, 200);ctx.strokeStyle = "#00F";ctx.stroke();ctx.beginPath();ctx.arc(150, 150, 100, 0, 2 * Math.PI, true);ctx.fillStyle = '#ccc';ctx.fill();ctx.beginPath();let str1 = '苟利国家生死以,';let str2 = '岂因祸福避趋之!';ctx.font = '50px Microsoft Yahei';ctx.strokeStyle = 'red';ctx.textAlign = 'center';ctx.strokeText(str1, 800, 50);ctx.font = '50px SimHei';ctx.fillStyle = 'blue';ctx.textAlign = 'center';ctx.fillText(str2, 800, 100);//获取文本的宽度,以便以后能动态的使文本居中。let strWidth = ctx.measureText(str2).width;console.log(strWidth);

看效果图
在这里插入图片描述
如果真的只是这点需求,原生方法也很好,省的加载一个js库。不过现实往往还是很残酷的,怎么可能这么简单,这里都没有交互,比如在现有的图形上做位移、拖拽等等,复杂度就上来了,这时一个好的canvas js库就很有必要了。
fabric.js 算是我用到过的比较全面且好用的一个canvas js库;
先上代码:

const data = {line: ['1648.607594936709', '654.1772151898734', '2100.253164556962', '1290.126582278481'],area: ["1604.0506329113923", "607.5949367088607", "1648.607594936709", "654.1772151898734", "2100.253164556962", "1290.126582278481"
, "2211.645569620253", "1429.873417721519", "285.56962025316454" , "1429.873417721519" , "617.7215189873417" , "662.2784810126582"]
};
// 可以看出上面数据一个是画线,一个是画不规则区域,这是实际项目中用到的数据,拿到这里自有妙处,后面会说

fabric.js使用

import { fabric } from ‘fabric’;

// canvasDraw是canvas的 id
const canvasBox = new fabric.StaticCanvas('canvasDraw', {backgroundColor: "transparent"});// 这个是设置// canvas.style.width 和 canvas.width// canvas.style.height 和 canvas.height
canvasBox.setDimensions({width: 600,height: 300
});
// 下面方法等同于 setDimensions
// canvasBox.setWidth(width);
// canvasBox.setHeight(height);// 这个是设置的 canvas.style.width 和 canvas.style.height
canvasBox._setCssDimension('width', 2400);
canvasBox._setCssDimension('height', 1500);

到此fabric初始化就算完成了,这里有个很重要的点,官方文档和几乎所有写fabric教学的博客都没有讲,那就是如何将canvas.style.width 和 canvas.width 赋予不同的数值,这是个很实用的点,因为坐标点是按canvas.width来的,但是我们的canvas.style.width必须和设计保持一致
比如说:我们需要在一张图片上做绘制,那坐标点是从图片原图上标注的,而设计不可能按原图大小展示,这时就会出现坐标点和canvas.style.width不一致,有两个方法解决这个问题:
1、坐标点根据 canvas.style.width / img.width 的比率做调整
2、canvas.width 和 img.width保持一致,canvas.style.width 和 设计稿 width一致
很显然第二个方案更简单且实用
既然官网没提供方法那我们就看源码都做了什么,因为canvas.width是必然要设置的
我们发现setDimensions时调用了 _setBackstoreDimension 和 _setCssDimension
在这里插入图片描述
很明显这里是canvas.width
在这里插入图片描述
而这里是canvas.style.width
在这里插入图片描述
今天先简单点,只看画线和画不规则图形

function drawLine(arr, color, opacity) {// [x1, y1, x2, y2]const line =  new fabric.Line(arr, {strokeWidth: 10, //线宽stroke: color, //线的颜色selectable: false,opacity: opacity});this.canvasBox.add(line);
}
function drawPolygon(arr, color, opacity) {const newArr = formatData(arr);const polygon = new fabric.Polygon(newArr,{fill: color,strokeWidth: 1,stroke: "#000",opacity: opacity});this.canvasBox.add(polygon);
}
function formatData(arr) {// 将 [100,50,200,40] 坐标点转为 {x: 100, y: 50}let newArr = [];arr.forEach((val, i) => {i = i + 1;// 偶数不操作if ((i % 2) !== 0) {newArr.push({x: parseInt(val),y: parseInt(arr[i])});}});return newArr;
}

这时大家就会看到 我有个 parseInt的操作,因为当我使用原数据绘制时,线可以出来但Polygon却没有,搞得很郁闷,查了很长时间,最后当我盯着数据发呆时,看着长长的小数位 突发奇想,于是parseInt诞生了,页面也能看到区域了,真的是坑,这个点不做项目是绝无可能发现的。
也是我今天冒着延期项目也要搞这么一篇文章的原因,虽然fabric知识点不多但绝对满满的干货,更是告诉大家遇到问题后不要怕、更不能放弃,永远都能找到解题的方法,条条大路通罗马,一条不行就换一条,总会解决的!!!

相关文章:

canvas-绘图库fabric.js简介

一般情况下简单的绘制,其实canvas原生方法也可以满足,比如画个线,绘制个圆形、正方形、加个文案。 let canvas document.getElementById(canvas);canvas.width 1200;canvas.height 600;canvas.style.width 1200px;canvas.style.height 6…...

代码审计——任意文件下载详解(二)

为方便您的阅读,可点击下方蓝色字体,进行跳转↓↓↓ 01 漏洞描述02 审计要点03 漏洞特征04 漏洞案例05 修复方案 01 漏洞描述 网站可能提供文件查看或下载的功能,如果对用户查看或下载的文件不做限制,就能够查看或下载任意的文件&…...

19异常的学习笔记

异常 很重要,有利于我们平时处理问题 异常就是代表程序出现了问题 常见的异常比如说 数组越界除法除0 异常的体系是什么 java.lang.Throwable Error Exception RuntimeException 其他异常 Error 代表的是系统级别的错误,也就是一旦系统出现问题&…...

Jenkins学习笔记4

配置构建流程: Jenkins任务创建: 1)创建新任务: 把这个Accept first connection改成 No Validation。问题得到解决。 构建触发器这块暂时没有需要配置的。 传输文件到nginx-server这个web服务器中。 将文件上传到/usr/share/n…...

自学 Java 需要具备哪些基本条件或技能?

新手初学者在自己学习Java时,需要注意两个方面,一个是学习方面,一个是知识点方面! 学习方面: 1、做学习计划并保持自律 在我们学习Java的过程中,尽量减少干扰,把自己的全部注意力集中在Java上…...

[激光原理与应用-68]:如何消除50Hz工频干扰和差分信号应对工频干扰

目录 一、什么工频干扰 1.1 什么工频干扰 1.2 工频干扰的幅度 1.3 工频干扰如何进入设备 1.4 工频干扰的负面影响 二、如何消除工频干扰 2.1 要消除工频干扰,可以考虑以下方法: 2.2 要具体消除工频干扰,可以采取以下措施 2.3 使用差…...

【力扣-每日一题】LCP 06. 拿硬币

class Solution { public:int minCount(vector<int>& coins) {int res0;for(auto i:coins){resi/2;res(i%2)?1:0;}return res;} };...

【JAVA-Day32】精通Java函数:定义、调用和主函数的完整指南

精通Java函数&#xff1a;定义、调用和主函数的完整指南 精通Java函数&#xff1a;定义、调用和主函数的完整指南摘要引言1. Java函数基础什么是Java函数&#xff1f;函数的定义和命名规则参数和返回值的概念 2. 函数的定义与语法如何声明和定义函数&#xff1f;函数的参数和参…...

springboot相关操作学习汇总

IDEAMAVEN apache maven 3.6.3 的安装及配置IntelliJ IDEA 安装及配置详细教程Maven下载安装及IDEA配置Maven的超详细教程 GIT 版本控制工具 - git的安装与使用gitlab上传新项目全过程 SPRINGBOOT IDEAmavenSpringboot工程创建超详细过程示例SpingBoot&#xff1a;整合Myb…...

如何在微信上制作自己的小程序卖东西

在当今的数字化时代&#xff0c;微信小程序已成为电商行业的重要平台。本文将详细解析电商微信小程序的制作流程&#xff0c;帮助你了解从零到上线的过程。 一、前期准备 1. 确定商城定位和目标群体&#xff1a;在制作电商微信小程序前&#xff0c;你需要明确商城的定位&#x…...

24.Xaml ListView控件-----显示数据

1.运行效果 2.运行源码 a.Xaml源码 <Window x:Class="testView.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.mic…...

YoloV5改进实战:使用MPDIoU改进YoloV5

文章目录 摘要论文:揭秘精准高效的MPDIoU损失函数摘要1、简介2、相关工作2.1、目标检测和实例分割2.2. 场景文本识别2.3、边界框回归的损失函数3、点距最小的并集交点4、实验结果4.1、 实验设置4.2、数据集4.3、 评估协议4.4、 目标检测的实验结果4.5、 字符级场景文本识别的实…...

从电大搜题到上海开放大学,广播电视大学引领学习新风尚

近年来&#xff0c;随着信息技术的飞速发展&#xff0c;互联网的普及和应用成为了我们生活中不可或缺的一部分。而在大学学习领域&#xff0c;电大搜题微信公众号应运而生&#xff0c;为广大学子提供了便捷的学习资源和交流平台。在这个信息高速发展的时代&#xff0c;上海开放…...

DC/DC开关电源学习笔记(九)Buck降压拓扑原理

(九)Buck降压拓扑原理 1.概述2. Buck降压原理3. Buck电路的三种工作模式3.1 CCM:3.2 BCM3.3 DCM4. 伏秒法则1.概述 Buck电路属于非隔离的直流变换器,在开关电源中广泛应用,BUCK电路是一种基于电感储能原理的DC-DC变换器,其涉及到物理中的电磁感应和电能转换的基本原理。…...

【浏览器】主流浏览器伪元素一览

不同浏览器对于伪元素的支持程度可能会有所差异。以下是各主流浏览器对一些常见伪元素的支持情况&#xff1a; WebKit&#xff08;Chrome、Safari、新版Edge&#xff09;&#xff1a; ::-webkit-scrollbar&#xff1a;用于自定义滚动条样式的伪元素。::-webkit-outer-spin-butt…...

国内首个潮玩行业沉浸式IP主题乐园,泡泡玛特城市乐园即将开园

近年来&#xff0c;泡泡玛特以潮玩IP为核心&#xff0c;不断拓展业务版图&#xff0c;推进国际化布局同时实现集团化运营&#xff0c;而泡泡玛特首个城市乐园将于9月下旬开业。据了解&#xff0c;泡泡玛特城市乐园是由泡泡玛特精心打造的沉浸式IP主题乐园&#xff0c;占地约4万…...

编译工具:CMake(八) | cmake 常用指令

编译工具&#xff1a;CMake&#xff08;八&#xff09; | cmake 常用指令 基本指令 基本指令 ADD_DEFINITIONS向 C/C编译器添加-D 定义&#xff0c;比如:ADD_DEFINITIONS(-DENABLE_DEBUG-DABC)&#xff0c;参数之间用空格分割。 如果你的代码中定义了#ifdef ENABLE_DEBUG #end…...

什么是GPT磁盘?介绍GPT(GUID 分区表)磁盘及其优势!

GPT概述 GPT磁盘是什么意思&#xff1f;GPT是全局唯一标识符分区表&#xff08;GUID Partition Table&#xff09;的简称&#xff0c;它是硬盘分区表结构的一个标准模式。在我们深入了解GPT磁盘的特性之前须知&#xff0c;MBR磁盘的分区信息直接保存在主引导记录&#xff0…...

直播视频处理过程

视频其实就是快速播放一连串连续的图片。 每一张图片&#xff0c;我们称为一帧。只要每秒钟帧的数据足够多&#xff0c;也即播放得足够快。比如每秒 30 帧&#xff0c;以人的眼睛的敏感程度&#xff0c;是看不出这是一张张独立的图片的&#xff0c;这就是我们常说的帧率&#…...

CGI与FastCGI的区别在哪里,FastCGI的应用场景讲解

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…...

记录selenium和chrome使用socks代理打开网页以及查看selenium的版本

使用前&#xff0c;首先打开socks5全局代理。 之前我还写过一篇关于编程中使用到代理的情况&#xff1a; 记录一下python编程中需要使用代理的解决方法_python 使用全局代理_小小爬虾的博客-CSDN博客 在本文中&#xff0c;首先安装selenium和安装chrome浏览器。 参考我的文章…...

2023 年最新 Docker 容器技术基础详细教程(更新中)

Docker 基本概述 Docker 是一个开源的应用容器引擎&#xff0c;它让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中&#xff0c;然后发布到任何流行的 Linux 或 Windows 操作系统的机器上&#xff0c;也可以实现虚拟化。容器是完全使用沙箱机制&#xff0c;相互之间…...

初学phar反序列化

以下内容参考大佬博客&#xff1a;PHP Phar反序列化浅学习 - 跳跳糖 首先了解phar是什么东东 Phar是PHP的压缩文档&#xff0c;是PHP中类似于JAR的一种打包文件。它可以把多个文件存放至同一个文件中&#xff0c;无需解压&#xff0c;PHP就可以进行访问并执行内部语句。 默认开…...

嵌入式web项目框架解读

文章目录 前言一、阅读Makefile可以迅速了解整个项目框架二、项目框架中的服务器&#xff1a;boa三、接口&#xff1a;cgi四、项目文件总结 前言 项目框架敬上&#xff01;&#xff01;&#xff01; 一、阅读Makefile可以迅速了解整个项目框架 项目中的Makefile主要分为三个部…...

MySQL什么情况下会死锁,发生了死锁怎么处理呢?

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…...

数字孪生行业相关政策梳理--智慧水利领域相关政策(可下载)

自2021年国家“十四五”规划纲要提出“探索建设数字孪生城市”以来&#xff0c;国家发展和改革委员会、工业和信息化部、住房和城乡建设部、水利部、农业农村部等部门纷纷出台政策&#xff0c;大力推动数字孪生在千行百业的落地发展。这些政策不仅为数字孪生的应用提供了广阔的…...

SQL plus简单使用

查看Oracle数据库全部数据库 数据库名称 SELECT name FROM v$database;这将返回所有数据库的名称。 视图 通过SQL查询dba_registry视图&#xff1a; 另一个查看数据库的方法是查询dba_registry视图&#xff0c;该视图包含了数据库中安装的所有组件的信息。以下是示例SQL查询…...

pnpm入门教程

一、概述 1、更小 使用 npm 时&#xff0c;依赖每次被不同的项目使用&#xff0c;都会重复安装一次。 而在使用 pnpm 时&#xff0c;依赖会被存储在内容可寻址的存储中。 2、更快 依赖解析。 仓库中没有的依赖都被识别并获取到仓库。目录结构计算。 node_modules 目录结构是…...

JADE盲分离算法仿真

JADE算法原理 JADE 算法首先通过去均值预白化等预处理过程得到解相关的混合信号&#xff0c;预处理后的信号构建的协方差矩阵变为单位阵&#xff0c;为后续的联合对角化奠定基础&#xff1b;其次&#xff0c;通过建立四阶累积量矩阵&#xff0c;利用高阶累积量的统计独立性等性…...

CMake教程-第 1 步:基本起点

CMake教程-第 1 步&#xff1a;基本起点 1 CMake教程介绍2 学习步骤Step 1: A Basic Starting PointStep 2: Adding a LibraryStep 3: Adding Usage Requirements for a LibraryStep 4: Adding Generator ExpressionsStep 5: Installing and TestingStep 6: Adding Support for…...