fabic如何将绘图原点移到画布中心

情况说明:

fabic默认绘图原点为left:0,top:0

后端给我的内容是按照x,y返回的,需要将坐标系移到fabic画布的中心位置,找了下网上合适的砖,想一句命令直接设置,结果没有。得!得自己来了。

不得吐槽一句,他母亲canvas这点就很有好呢,用 transform 一行代码即可实现--ctx.translate(canvasWidth / 2, canvasHeight / 2)。附赠canvas将绘制的原点移动到画布中心的示例代码,感兴趣的可以看下:

const canvas = document.getElementById('yourCanvasID');  
const ctx = canvas.getContext('2d');  // 获取画布的宽度和高度  
const canvasWidth = canvas.width;  
const canvasHeight = canvas.height;  // 将绘制原点移动到画布中心  
ctx.translate(canvasWidth / 2, canvasHeight / 2);  // 在新的原点处绘制一个矩形  
ctx.fillStyle = 'red';  
ctx.fillRect(-50, -50, 100, 100);

坐标系转移:

言归正传,咱绘制一下坐标系。

据此可得:
后端给出的(x,y)坐标,我可以根据(canvas.width/2 + x ,canvas.height/2 - y)来实现。 

即为:left=canvas.width/2 +x ,top=canvas.height/2-y

同理我给后端可接受的(x,y),应该为(left-canvas.width/2 ,  canvas.height/2 - top )

反正利用我小学n年级的数学知识计算是这样,我去跟后端联调,验证完美性去了~~

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

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

相关文章

27.EI文章复现《高比例清洁能源接入下计及需求响应的配电网重构》

下载地址:高比例清洁能源接入下计及需求响应的配电网重构 1主要内容 该程序复现《高比例清洁能源接入下计及需求响应的配电网重构》,以考虑网损成本、弃风弃光成本和开关操作惩罚成本的综合成本最小为目标,针对配电网重构模型的非凸性&…

告别HR管理繁琐,免费低代码平台来帮忙

编者按:本文着重介绍了使用免费且高效的低代码平台实现的HR管理系统在一般日常人力资源管理工作中的关键作用。 关键词:低代码平台、HR管理系统 1.HR管理系统有什么作用? HR管理系统作为一款数字化工具,可为企业提供全方位的人力资…

电脑更换硬盘的时候怎么迁移系统?

为什么需要迁移系统? 在一些关于电脑DIY或Windows相关的论坛社区中,有很多人发帖询问怎么迁移系统。那么这个系统迁移,究竟是何含义呢?通俗易懂地解释一下,就是创建一个完整无缺的操作系统复制品,它与系…

vue2+three.js(入门级)

20232.9.12今天我学习了如何使用vue2three制作一个3d图形&#xff0c;效果&#xff1a; 首先安装&#xff1a; npm install three 相关代码&#xff1a; <!--3d基础版&#xff0c;实现单个3d图形--> <template><div><div id"content"/><…

水轮发电机组预测性维护的实现:基于PreMaint电气信号特征分析

在现代电力工业中&#xff0c;水轮发电机组扮演着至关重要的角色&#xff0c;为我们的生活和工业生产提供了可靠的电力供应。然而&#xff0c;这些发电机组的长期运行不可避免地伴随着各种挑战&#xff0c;最显著的是转子振动故障。这种故障可能会导致设备停机、维修成本增加以…

59从零开始学Java之StringBuilder与StringBuffer

作者&#xff1a;孙玉昌&#xff0c;昵称【一一哥】&#xff0c;另外【壹壹哥】也是我哦 千锋教育高级教研员、CSDN博客专家、万粉博主、阿里云专家博主、掘金优质作者 前言 最近的这几篇文章&#xff0c;壹哥一直在给大家讲解字符串相关的内容。其实字符串按照可变性&#xf…

rtthread下基于spi device架构MCP25625驱动

1.CAN驱动架构 由于采用了RTT的spi device架构&#xff0c;不能再随心所遇的编写CAN驱动 了&#xff0c;之前内核虽然采用了RTT内核&#xff0c;但是驱动并没有严格严格按RTT推荐的架构来做&#xff0c;这次不同了&#xff0c;上次是因为4个MCP25625挂在了4路独立的SPI总线上&…

一文讲透java弱引用以及使用场景

概念 大部分情况下我们看到是强引用&#xff0c;比如下面这一行: String str1 new String("abc");变量str1被用来存放一个string对象的强引用上。强引用在你正在使用时这个对象时&#xff0c;一般是不会被垃圾回收器回收的。当出现内存空间不足时&#xff0c;虚拟…

99%的人都不知道的免费在线制作电子画册的网站

你是否曾经想过自己制作一本精美的电子画册&#xff1f; 现在&#xff0c;小编给大家分享一款免费在线制作电子画册的工具&#xff0c;可以帮助你轻松实现。这个网站不仅提供了丰富的模板和素材&#xff0c;还让你在制作过程中可以随时预览和编辑&#xff0c;无需任何排版设计…

详解梯度下降从BGD到ADAM - [北邮鲁鹏]

文章目录 参考文章及视频导言梯度下降的原理、过程一、什么是梯度下降&#xff1f;二、梯度下降的运行过程 批量梯度下降法(BGD)随机梯度下降法(SGD)小批量梯度下降法(MBGD)梯度算法的改进梯度下降算法存在的问题动量法(Momentum)动量法还有什么效果&#xff1f; 自适应梯度(Ad…

RJ45网络信号浪涌保护器解决方案

RJ45网络信号浪涌保护器是一种用于保护网络设备免受雷击或其他高压电流干扰的装置&#xff0c;它可以有效地吸收和释放信号线路上的过电压&#xff0c;从而避免设备损坏或数据丢失。 RJ45信号浪涌保护器的应用领域和施工方案如下&#xff1a; 地凯科技RJ45网络信号浪涌保护器…

PCL 计算字符型ply文件的法向量

文章目录 ply格式计算法向量意义具体代码 ply格式 PLY&#xff08;Polygon File Format&#xff09;是一种用于存储三维模型数据的文件格式。在PLY文件中&#xff0c;法向量是指每个顶点或面片的法向量&#xff0c;用于描述表面的朝向和光照计算。 在PLY文件中&#xff0c;法…