canvas实现画布拖拽效果 适配Uniapp和Vue (开箱即用)

news2024/11/26 12:31:00

需求:我司是做AIGC项目最近和地铁项目有关需要实现海报效果图，并且需要使用画布拖拽和修改上传删除等等功能 当时连续加班花了10个工作日搓出来 实现挺简单的但是Canvas数据处理还是挺麻烦的  大概功能如图下 

首先我们需要引入Fabric.js 这个库封装好了原生的Canvas的Api使用uniapp和vue项目

Fabric.js能做的事情
  • 在Canvas上创建、填充图形（包括图片、文字、规则图形和复杂路径组成图形）。
  • 给图形填充渐变颜色。
  • 组合图形（包括组合图形、图形文字、图片等）。
  • 设置图形动画集用户交互。
  • 生成JSON, SVG数据等。
  • 生成Canvas对象自带拖拉拽功能。

 步骤一:引入Fabric.js库

npm i fabric --save

步骤二:安装less或者sass因为需要更改canvas样式需要用到deep(使用sass注意更改style的lang)

npm i less 
npm i less-loader

步骤三:创建DOM节点 uniapp和纯vue项目的canvas创建是不一样的 (巨坑)

Uniapp的canvas外层会嵌套uniapp-canvas会阻碍到Fabric.js读取但是纯vue项目则不会

因为Canvas代码量比较多 我这边把坑就额外标记出来 建议复制到vscode查看更佳 (下列代码复制即可使用 亲测有效 一定要按照步骤来)

<template>
	<!-- 父级节点 -->
	<view id="card-canvas-content">
	</view>
</template>

<script>
import {
	fabric
} from 'fabric'; // 引入库
let canvas = null // 最好设置成全局的不要定义到data里面
export default {
	data() {
		return {
		}
	},
	mounted() {
		this.createCanvasDom('card-canvas') // 初始化节点
		this.init() //初始化画布
	},
	methods: {
		// 创建画布
		createCanvasDom(elID) {
			var cardContent = document.getElementById('card-canvas-content'); //选取父节点
			var cardCanvas = document.createElement('canvas'); // 创建canvas标签
			cardCanvas.setAttribute('id', elID); // 设置canvas的ID
			cardContent.appendChild(cardCanvas); // 插入canvas到父节点中
		},
		// 初始化画布
		init() {
			// 画布初始配置
			canvas = new fabric.Canvas('card-canvas', { // 获取画布节点传入 初始化节点ID
				width: 200, // 后续可以更改
				height: 200,
			});

		}
	}
}
</script>
<style lang="less" scoped>
/deep/ #card-canvas{
	border: 1px solid red ;
}
</style>

 步骤四:canvas基础配置(这些配置是可选的可以根据项目情况自行配置)

// 初始化画布
		init() {
			// 画布初始配置
			canvas = new fabric.Canvas('card-canvas', { // 获取画布节点传入 初始化节点ID
				width: 200, // 后续可以更改
				height: 200,
			});
			    fabric.Object.prototype.padding = 10;
				fabric.Object.prototype.controls.mtr.withConnection = false;
				// 解决动态生成文字模糊问题
				fabric.Object.prototype.objectCaching = false;
				fabric.Object.prototype.borderColor = 'dodgerblue';
				// 修改控制点的形状，默认为`rect`矩形，可选的值还有`circle`圆形
				fabric.Object.prototype.cornerStyle = 'circle';
				// 修改控制点的填充色为白色
				fabric.Object.prototype.cornerColor = 'white';
				// 修改控制点的大小为10px
				fabric.Object.prototype.cornerSize = 10;
				// 设置控制点不透明，即可以盖住其下的控制线
				fabric.Object.prototype.transparentCorners = false;
				// 修改控制点的边框颜色为`gray`灰色
				fabric.Object.prototype.cornerStrokeColor = 'gray';
				// 单独修改旋转控制点距离主体的纵向距离为-20px
				fabric.Object.prototype.controls.mtr.offsetY = -20;
				// 单独修改旋转控制点，光标移动到该点上时的样式为`pointer`，一个手的形状
				fabric.Object.prototype.controls.mtr.cursorStyle = 'pointer';

		}

第五步:初始化数据建议抽离一个方法出去避免都写在init里面过于冗杂 （在init里面调用放置末尾）

init() {
     this.initDate()
}
// 初始化数据
		initDate() {
			//更改画布后续宽高 可以根据后台的图片动态设置canvas大小
			canvas.setDimensions({
				width: this.width,
				height: this.height
			});
			// fabric内置的方法 用于重新渲染canvas 在字体以及大小更换 图片替换都需要调用此方法 否则canvas不会更新新数据
			canvas.renderAll();
			this.$nextTick(() => {
				// canvas渲染完成之后最后就会执行一般是处理loading效果的
			});
		}

步骤六:导入背景图 (巨坑 当时我研究了贼久 一直报错图片污染导致后续图片无法导出canvas)  

我们需要把远程的背景图片转成base64的格式不然导出canvas会报错 这也是跨域 网上有很多解决方案都没用

代码比较长我就抽离出去写注释 这些方法统一在initDate里面调用 

// 图片转码
			getURLBase64(url) {
				//将远程图片下载本地成为base64图片
				let _this = this;
				return new Promise((resolve, reject) => {
					var xhr = new XMLHttpRequest();
					xhr.open('get', url, true);
					xhr.responseType = 'blob';
					xhr.onload = function() {
						if (this.status === 200) {
							var blob = this.response;
							var fileReader = new FileReader();
							fileReader.onloadend = function(e) {
								var result = e.target.result;
								_this.imageUrl = result;
								resolve(result);
							};
							fileReader.readAsDataURL(blob);
						}
					};
					xhr.onerror = function() {
						reject();
					};
					xhr.send();
				});
			},

 设置Canvas背景图片

// 设置/修改画布背景图  bgUrl:转码后的背景图片 canvasDOM:canvas的实例变量名
		setBackgroundImage(bgUrl, canvasDOM) {
			canvasDOM.setBackgroundImage(bgUrl, canvasDOM.renderAll.bind(canvasDOM), { // canvas实例变量
				originX: 'left',
				originY: 'top',
				left: 0,
				top: 0,
				level: 1, // 层级
				bgUrl // 路径
			});
		},

 使用:

async initDate() {
			//更改画布后续宽高 可以根据后台的图片动态设置canvas大小
			canvas.setDimensions({
				width: this.width,
				height: this.height
			});
			// fabric内置的方法 用于重新渲染canvas 在字体以及大小更换 图片替换都需要调用此方法 否则canvas不会更新新数据
			canvas.renderAll();
			// 背景地址 自己随便填一个线上的即可
			let bgUrl = await this.getURLBase64('https://img1.baidu.com/it/u=395218774,2205974617&fm=253&app=138&size=w931&n=0&f=GIF&fmt=auto?sec=1718730000&t=15d143401501c32f552f4157563acaf4');
			// 设置背景图片
			this.setBackgroundImage(bgUrl, canvas)
		},

 此时是页面呈现的样式

 

步骤六:插入文字

// 插入文字 text:文本 canvasDOM:canvas的实例变量名
		setTextFont(text,canvasDOM) {
			const textDOM = new fabric.Textbox(text, {
				top: 0, // 位置
				left: 0,
				fontSize: 19, // 文字大小
				fill: 'red', // 颜色
				level: 0, // 层级
				fontFamily: '思源黑体 CN Heavy',
				splitByGrapheme: true
			});
			canvasDOM.add(textDOM); //添加文字
			canvasDOM.bringToFront(textDOM); //优先级
		}

使用

async initDate() {
			//更改画布后续宽高 可以根据后台的图片动态设置canvas大小
			canvas.setDimensions({
				width: this.width,
				height: this.height
			});
			// fabric内置的方法 用于重新渲染canvas 在字体以及大小更换 图片替换都需要调用此方法 否则canvas不会更新新数据
			canvas.renderAll();
			// 背景地址 自己随便填一个线上的即可
			let bgUrl = await this.getURLBase64('https://img1.baidu.com/it/u=395218774,2205974617&fm=253&app=138&size=w931&n=0&f=GIF&fmt=auto?sec=1718730000&t=15d143401501c32f552f4157563acaf4');
			// 设置背景图片
			this.setBackgroundImage(bgUrl, canvas)
			// 插入文本
			this.setTextFont('这是一行文本',canvas)
		},

 页面效果 此时页面的文字是可以进行拖拽等操作的

 

(内容有点多 先更新三分之一 后面再抽空更新)

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

如何实现element表格合并行？

如何实现element表格合并行？

前两天我一个朋友咨询我element表格合并行的问题，他研究了很久，已经开始怀疑是不是element UI出现了bug，然后跟我一阵沟通，最终解决了问题，他的问题在于他把事情想复杂了，接下来我们一起来看一下这个经典“案例”，很多人真的很有可能走入这个误区，当然老鸟就不用看了，…
阅读更多...
Pyqt QCustomPlot 简介、安装与实用代码示例（二）

Pyqt QCustomPlot 简介、安装与实用代码示例（二）

目录 前言实用代码示例彩色图演示散点像素图演示实时数据演示多轴演示对数轴演示 结语 所有文章除特别声明外&#xff0c;均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 nixgnauhcuy’s blog&#xff01; 如需转载&#xff0c;请标明出处&#xff01; 完整代码我已经上传到…
阅读更多...
【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 内存访问热度分析(100分) - 三语言AC题解(Python/Java/Cpp)

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 内存访问热度分析(100分) - 三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f…
阅读更多...
《EDA技术》十六选一数据选择器实验报告

《EDA技术》十六选一数据选择器实验报告

摘 要&#xff1a; 本实验通过Quartus软件完成对十六选一数据选择器的四种VHDL程序&#xff0c;分别为if;case;when else;when select四种方式&#xff0c;实现波形图的生成。同时&#xff0c;加深对VHDL语言的理解和使用多种方式完成任务的能力&#xff0c;提高实验操作能力。…
阅读更多...
[WTL/Win32]_[中级]_[MVP架构在实际项目中应用的地方]

[WTL/Win32]_[中级]_[MVP架构在实际项目中应用的地方]

场景 在开发Windows和macOS的界面软件时&#xff0c;Windows用的是WTL/Win32技术&#xff0c;而macOS用的是Cocoa技术。而两种技术的本地语言一个主打是C,另一个却是Object-c。界面软件的源码随着项目功能增多而增多&#xff0c;这就会给同步Windows和macOS的功能造成很大负担…
阅读更多...
vue:对三种获取更新后的dom的方式进行分析

vue:对三种获取更新后的dom的方式进行分析

一、问题分析 由于vue的异步更新机制&#xff0c;我们在同步代码中是无法获取到更新后的dom的信息的 针对这个问题&#xff0c;我们有三种解决方案获取更新后的dom: 1.nextTick() 2.setTimeout() 3.在微任务中获取 因为更新是在同步任务结束后&#xff0c;执行微任务之前…
阅读更多...
Java项目常用包的分层和作用

Java项目常用包的分层和作用

一个好的Java项目要有好的分层&#xff0c;不仅简洁明了&#xff0c;而且降低代码的耦合度&#xff0c;方便维护和升级。 web层 在Java Web应用程序中&#xff0c;Web层通常指的是处理HTTP请求和响应的层次&#xff0c;它直接与客户端&#xff08;通常是Web浏览器&#xff09…
阅读更多...
【idea】gradle多模块构建项目内存溢出终止问题解决

【idea】gradle多模块构建项目内存溢出终止问题解决

背景 idea构建多模块项目&#xff0c;构建报错 Daemon is stopping immediately JVM garbage collector thrashing and after running out of JVM memory 解决 进到下图目录下 在文件管理中进入上面目录添加gradle.properties文件&#xff0c;内容如下 org.gradle.jvmargs-…
阅读更多...
学校校园考场电子钟，同步授时，助力考场公平公正-讯鹏科技

学校校园考场电子钟，同步授时，助力考场公平公正-讯鹏科技

随着教育技术的不断发展&#xff0c;学校对于考场管理的需求也日益提高。传统的考场时钟往往存在时间误差、维护不便等问题&#xff0c;这在一定程度上影响了考试的公平性和公正性。为了解决这些问题&#xff0c;越来越多的学校开始引入考场电子钟&#xff0c;通过同步授时技术…
阅读更多...
【深度学习】GPT-2，Language Models are Unsupervised Multitask Learners，【语言建模】

【深度学习】GPT-2，Language Models are Unsupervised Multitask Learners，【语言建模】

论文&#xff1a;https://d4mucfpksywv.cloudfront.net/better-language-models/language_models_are_unsupervised_multitask_learners.pdf 文章目录 摘要引言方法2.1 训练数据集2.2 输入表示2.3 模型3. 实验3.1 语言建模3.2 Children’s Book Test3.3 LAMBADA3.4 Winograd Sc…
阅读更多...
兼容MacOS和FreeBSD软件包的开源ravynOS操作系统

兼容MacOS和FreeBSD软件包的开源ravynOS操作系统

ravynOS 是一个新型的操作系统项目&#xff0c;致力于在 x86-64&#xff08;终极目标是同时实现 ARM&#xff09;平台上提供与 macOS 类似的体验和兼容性。它基于坚若磐石的 FreeBSD、现有的开源代码和锦上添花的新代码构建。 主要设计目标&#xff1a; 与 macOS 应用程序的源…
阅读更多...
python基础语法 002 - 4 字符串

python基础语法 002 - 4 字符串

1 字符串 字符串&#xff1a;引号括起来的数据类型 # 双引号 a "yuze wang"# 单引号 a ’yuze wang‘# 三引号 a ’‘’yuze‘‘’ a """yuze"""注意&#xff1a;所有格式表示都是半角&#xff0c;全角会报错 1.1 引号表示 …
阅读更多...
C++及cmake语法介绍

C++及cmake语法介绍

c/cmake学习 文章目录 c/cmake学习1. c1.1 基本模型1.1.1 for循环1.1.2 main函数1.1.2 带参数函数编译函数 2. CMAKE2.1 相关命令2.1.1 编译基本命令2.1.2 动态库静态库编译2.1.3 消息输出2.1.4 cmake变量常见参数1. 设置构建类型2. 设置编译器标志3. 指定编译器4. 设置安装路径…
阅读更多...
【PB案例学习笔记】-22制作一个语音朗读金额小应用

【PB案例学习笔记】-22制作一个语音朗读金额小应用

写在前面 这是PB案例学习笔记系列文章的第22篇&#xff0c;该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习&#xff0c;提高编程技巧&#xff0c;以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码&#xff0c;小凡都上传到了gite…
阅读更多...
计算机网络：3数据链路层

计算机网络：3数据链路层

数据链路层 概述封装成帧和透明传输帧透明传输&#xff08;填充字节或比特&#xff09;差错检测奇偶校验循环冗余校验CRC Cyclic Redundancy Check 可靠传输停止-等待协议回退n帧协议&#xff08;滑动窗口协议&#xff09;选择重传协议 点对点协议PPP共享式以太网网络适配器&am…
阅读更多...
Spring系统学习 -Spring IOC 的XML管理Bean之P命名空间、实现引入MySQL外部链接属性文件

Spring系统学习 -Spring IOC 的XML管理Bean之P命名空间、实现引入MySQL外部链接属性文件

P命名空间 在Spring框架中&#xff0c;P命名空间是一种用于简化XML配置文件中属性注入的方式。通过引入P命名空间&#xff0c;可以使用更简洁的语法来设置bean的属性值&#xff0c;而无需显式地使用<property>子元素。这使得XML配置文件更加简洁和易于阅读。 要在Sprin…
阅读更多...
【vue3|第9期】Vue3中watch监视的深度解读

【vue3|第9期】Vue3中watch监视的深度解读

日期&#xff1a;2024年6月10日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…
阅读更多...
期末复习GGG-----查找子串

期末复习GGG-----查找子串

郭的 char *search( char *s, char *t ){int i0;while(s[i]){int j0;if(s[i]t[0]){while(s[ij]t[j]&&t[j]){j;}if(t[j]\0)return si;}i;}return NULL; } AI的 #include <stdio.h> #include <string.h> #define MAXS 30char *search(char *s, char *t);in…
阅读更多...
Matlab使用Simulink仿真实现AM和BPSK信号的解调

Matlab使用Simulink仿真实现AM和BPSK信号的解调

前言 本篇实现了基于AM和BPSK调制的通信系统&#xff0c;采用Bernoulli Binary Generator生成随机二元序列&#xff0c;码元速率为0.5秒/个。AM调制使用Sine Wave模块生成载波&#xff0c;频率40Hz&#xff0c;相位π/2。BPSK调制通过Switch模块切换相位0和π的载波。信号传输…
阅读更多...
红利之外的A股底仓选择：A50

红利之外的A股底仓选择：A50

内容提要 华泰证券指出&#xff0c;当前指数层面下行风险不大&#xff0c;市场再入震荡期下&#xff0c;可关注三条配置线索&#xff1a;1&#xff09;A50为代表的产业巨头&#xff1b;2&#xff09;以家电/食饮/物流/出版为代表的稳健消费龙头&#xff0c;3&#xff09;消费电…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023