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.rhkb.cn/news/133744.html

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

相关文章

C++QT day7

仿照vector手动实现自己的myVector&#xff0c;最主要实现二倍扩容功能 #include <iostream>using namespace std;template<typename T> class my_vector {int size;//可存储的容量大小int num;//当前存储的元素个数T* data;//存储数据的空间地址public://无参构造…

zabbix 钉钉微信企微告警(动作操作消息内容模板)

一、环境配置 1、配置zabbix服务端 2、配置监控主机&监控项&监控模板 zabbix配置安装_this page is used to test the proper operation of _疯飙的蜗牛的博客-CSDN博客 二、触发器 触发器的本质就是一个条件判断&#xff0c;对于不同的监控数据来说&#xff0c;我…

uniapp H5生成画布,插入网络图片。下载画布

因为网络图片不能直接使用ctx.drawImage(&#xff09;插入。得使用uni.getImageInfo()方法下载后插入。 但是当画布中存在多张网络图片时&#xff0c;必须等待uni.getImageInfo()下载完成后才行。这样得下载套下载。太过于繁琐。所以定义了一个递归下载方法。同时避免下载图片异…

k8s集群使用ingress转发grafana服务

文章目录 前言一、思路二、grafana准备1. grafana-configmap.yaml2. grafana.yaml 三、ingress准备1. ingress.yaml2. grafana-externalname.yaml3. ingress-nginx-controller 四、 本机host文件准备五、访问测试 前言 在k8s集群中&#xff0c;使用ingress服务转发grafana的页…

centos安装flink,通过windows访问webui

1. 安装flink 1.1. flink的下载 通过flink官网下载flink安装包 https://flink.apache.org/ 下载安装包 1.2 flink在centos上的安装 将下载好的flink-1.17.1-bin-scala_2.12.tgz安装包放到centos目录下 解压文件&#xff1a; [rootlocalhost ~]# tar -zxvf flink-1.17.…

利用Windows搭建Emby媒体库服务器,轻松实现无公网IP的远程访问

文章目录 1.前言2. Emby网站搭建2.1. Emby下载和安装2.2 Emby网页测试 3. 本地网页发布3.1 注册并安装cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar内网穿透本地设置 4.公网访问测试5.结语 1.前言 在现代五花八门的网络应用场景中&#xff0c;观看视频绝对是主力应用场景之一&…

基于SpringBoot + Vue的项目整合WebSocket的入门教程

1、WebSocket简介 WebSocket是一种网络通信协议&#xff0c;可以在单个TCP连接上进行全双工通信。它于2011年被IETF定为标准RFC 6455&#xff0c;并由RFC7936进行补充规范。在WebSocket API中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性…

Python 基础知识结构

一、关键字 二、内置函数 三、运算符 1、算数运算符 加 数字与字符串拼接 - 减 * 乘 数字与字符串重复 / 除 返回浮点数 % 取模 返回除法的余数 奇偶判断 ** 幂次 // 整除 返回商的整数部分&#xff0c;向下取整数&#xff0c;注意&#xff1a;-10//3,出现负数时的情况只要参…

北斗+5G 织就精确定位的“天罗地网”

北斗卫星导航系统&#xff08;简称北斗系统&#xff09;是我国自主发展、独立运行的全球卫星导航系统&#xff0c;为全球用户提供全天候、全天时、高精度的定位、导航和授时服务。2020年7月31日&#xff0c;北斗三号系统建成开通并提供全球服务&#xff0c;北斗系统进入全面推广…

基于element-ui的年份范围选择器

基于element-ui的年份范围选择器 element-ui官方只有日期范围和月份范围选择器&#xff0c;根据需求场景需要&#xff0c;支持年份选择器&#xff0c;原本使用两个分开的年份选择器实现的&#xff0c;但是往往有些是不能接受的。在网上找了很多都没有合适的&#xff0c;所以打…

第3章_瑞萨MCU零基础入门系列教程之开发环境搭建与体验

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…

Golang使用sqlx报错max_prepared_stmt_count超过16382

文章目录 背景mysql的预处理查看实例预处理详情com_stmt_prepare开启performance_schema 本地查看预处理语句 预处理语句飙升的原因生成预处理语句但是不close执行sql过程中发生错误 go服务分析抓包分析发送给mysql的包debug查看预处理细节sqlx发送statement command指令sqlx关…

第6章_瑞萨MCU零基础入门系列教程之串行通信接口(SCI)

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…

Kafka3.0.0版本——消费者(Range分区分配策略以及再平衡)

目录 一、Range分区分配策略原理1.1、Range分区分配策略原理的示例一1.2、Range分区分配策略原理的示例二1.3、Range分区分配策略原理的示例注意事项 二、Range 分区分配策略代码案例2.1、创建带有4个分区的fiveTopic主题2.2、创建三个消费者 组成 消费者组2.3、创建生产者2.4、…

PowerShell脚本免杀/bypass/绕过杀毒软件,ReconFTW 漏洞扫描

PowerShell脚本免杀/bypass/绕过杀毒软件&#xff0c;ReconFTW 漏洞扫描。 #################### 免责声明&#xff1a;工具本身并无好坏&#xff0c;希望大家以遵守《网络安全法》相关法律为前提来使用该工具&#xff0c;支持研究学习&#xff0c;切勿用于非法犯罪活动&#…

STM32 FreeRTOS 内存问题

1. STM32L151C8T6 内存&#xff0c;64Kb 的Flash&#xff08;代码就是烧录在这里面的&#xff09;&#xff0c;16Kb 的RAM&#xff0c;程序跑起来之后的内存&#xff0c;相当于我们高考时发的草稿纸&#xff0c;直接影响程序的运行速度&#xff0c;可以用STM32 CubeMx 软件直接…

【Linux】常用工具(上)

Linux 常用工具 一、Linux 软件包管理器 yum1. 软件包2. 查看软件包3. 安装/卸载软件4. yum 其他指令的功能 二、Linux 编辑器 - vim 使用1. vim 的基本概念2. vim 的基本操作&#xff08;1&#xff09;光标移动&#xff08;命令模式&#xff09;&#xff08;2&#xff09;光标…

性能测试之压力测试

文章目录 一.基本介绍二.性能指标三.下载安装JMeter1.下载安装包2.启动JMeter 四.使用JMeter1.模拟用户请求2.填写测试地址3.接收测试结果4.结果解释 一.基本介绍 压力测试考察当前软硬件条件下系统所能承受的最大负荷并找到系统瓶颈所在。压测是为了系统在线上的处理能力和稳定…

Webserver项目解析

一.webserver的组成部分 Buffer类 用于存储需要读写的数据 Channel类 存储文件描述符和相应的事件&#xff0c;当发生事件时&#xff0c;调用对应的回调函数 ChannelMap类 Channel数组&#xff0c;用于保存一系列的Channel Dispatcher 监听器&#xff0c;可以设置为epo…

【数据结构】堆排序详解

文章目录 一、堆排序思想二、向上调整建堆排序三、向下调整建堆排序四、总结 对于什么是堆&#xff0c;堆的概念分类以及堆的向上和向下两种调整算法可见&#xff1a; 堆的创建 一、堆排序思想 int a[] { 2,3,5,7,4,6 };对于这样一个数组来说&#xff0c;要想要用堆排序对它…