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.mzph.cn/news/78384.shtml

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

相关文章

改造el-dropdown ,实现多选效果,且当选项只剩下一个时,不允许取消

实现效果 实现代码 其中virtual-list是使用的插件,使得下拉数据多的时候,不会出现卡顿 正常不使用虚拟列表的时候可以这样写 <el-dropdown-menu slot"dropdown"><el-dropdown-item v-for"i in item.optionList" :key"i.id" :command&…

前端验证弱密码代码记录

password: [{ required: !props.id? true:false , trigger: blur,validator: (rule, value, callback, source, options) > {const pwdRegex new RegExp((?.*[0-9])(?.*[a-zA-Z])(?.*[^a-zA-Z0-9]).{8,30})if (!props.id && value ) {callback(new Error(请输…

前端面试合集(三——浏览器)

浏览器的页面渲染 1.浏览器是如何渲染页面的&#xff1f;2. 什么是reflow(重排&#xff09;&#xff1f;3. 什么是repaint(重绘&#xff09;&#xff1f;4.为什么transform效率高&#xff1f; 1.浏览器是如何渲染页面的&#xff1f; 当浏览器的网络线程收到HTML文档之后&#…

AI已经改变游戏规则,新环境下如何用好这一新利器,提升开发团队的生产力

ChatGPT 4在今年3月刚刚发布&#xff0c;但在短短几个月内&#xff0c;它已经开始改变多个行业开发材料和资产的方式。 作为Perforce Software的首席技术官&#xff0c;我密切关注着新兴技术如何重新塑造和定义既定的工作步骤与流程。在我近30年的软件开发经验中&#xff0c;很…

【再识C进阶2(下)】详细介绍指针的进阶——利用冒泡排序算法模拟实现qsort函数,以及一下习题和指针笔试题

前言 &#x1f493;作者简介&#xff1a; 加油&#xff0c;旭杏&#xff0c;目前大二&#xff0c;正在学习C&#xff0c;数据结构等&#x1f440; &#x1f493;作者主页&#xff1a;加油&#xff0c;旭杏的主页&#x1f440; ⏩本文收录在&#xff1a;再识C进阶的专栏&#x1…

探究Nginx应用场景

1 静态资源 Nginx是一个流行的Web服务器和反向代理服务器&#xff0c;它可以用于托管静态资源。下面是一个简单的案例&#xff0c;展示了如何使用Nginx来提供静态资源。 假设你有一个名为example.com的域名&#xff0c;并且你希望使用Nginx来托管位于/var/www/html目录下的静…

CopyOnWriteArrayList源码分析

其中唯一的线程安全 List 实现就是 CopyOnWriteArrayList。 特点 由于读取操作不会对原有数据进行修改&#xff0c;因此&#xff0c;对于每次读取都进行加锁其实是一种资源浪费。相比之下&#xff0c;我们应该允许多个线程同时访问 List 的内部数据&#xff0c;毕竟对于读取操…

MeterSphere压测,出现HttpHostConnectException

现象&#xff1a;MeterSphere更换压力机后&#xff0c;压测出现出现HttpHostConnectException 解决方案&#xff1a; net.ipv4.tcp_tw_reuse默认是0或者2&#xff0c;更改为1 net.ipv4.tcp_tw_reuse&#xff0c;表示是否允许重新应用处于TIME-WAIT状态的socket用于新的TCP连…

第二十一章 Classes

文章目录 第二十一章 ClassesClasses类名和包类定义的基本内容 第二十一章 Classes Classes 类定义并不是 ObjectScript 的正式组成部分。相反&#xff0c;可以在类定义的特定部分中使用 ObjectScript&#xff08;特别是在方法定义中&#xff0c;可以在其中使用其他实现语言&…

vue 项目代码混淆配置(自定义插件适用)带配置项注释

文章目录 vue 项目代码混淆配置&#xff08;自定义插件适用&#xff09;带配置项注释一、概要二、混淆步骤1. 引入混淆插件2. 添加混淆配置3. 执行代码混淆 vue 项目代码混淆配置&#xff08;自定义插件适用&#xff09;带配置项注释 一、概要 本文章适用 vue-cli3/webpack4 …

企业架构LNMP学习笔记41

企业架构缓存中间件分布式memcached&#xff1a; 学习目标和内容&#xff1a; 能够理解描述网站业务访问流程 能够理解网站业务的优化方向 能够描述内存缓存软件Memcached的作用 能够通过命令操作Memcached 能够安装php的memcached扩展extension 能够实现session存储到m…

拥有十亿美元的财富,靠外汇交易发家,还与查尔斯王子是知交

Urs Schwarzenbach&#xff08;乌尔斯施瓦岑巴赫&#xff09;是英国上流社会最有钱的亿万富豪之一。他曾经轰动一时的专业交易员这个身份&#xff0c;已经越来越少被提起。如今你问很多外汇交易者&#xff0c;他们可能都会摇头称不知道这个人吧。 如果提到瑞士最大的传统货币兑…

时序分解 | MATLAB实现基于SSA奇异谱分析的信号分解分量可视化

时序分解 | MATLAB实现基于LMD局部均值分解的信号分解分量可视化 目录 时序分解 | MATLAB实现基于LMD局部均值分解的信号分解分量可视化效果一览基本介绍程序设计参考资料 效果一览 基本介绍 奇异谱分解奇异谱分析SSA 可直接替换txt数据运行 Matlab 1.包含3D分解效果图 频谱图等…

Linux UDP编程流程

文章目录 UDP编程流程UDP协议无连接的特点UDP协议数据报的特点 UDP编程流程 UDP 提供的是无连接、不可靠的、数据报服务。服务器端和客户端没有什么本质上的区别。编程流程如下&#xff1a; socket()用来创建套接字&#xff0c;使用 udp 协议时&#xff0c;选择数据报服务 SOC…

Spring基础(2w字---学习总结版)

目录 一、Spirng概括 1、什么是Spring 2、什么是容器 3、什么是IoC 4、模拟实现IoC 4.1、传统的对象创建开发 5、理解IoC容器 6、DI概括 二、创建Spring项目 1、创建spring项目 2、Bean对象 2.1、创建Bean对象 2.2、存储Bean对象&#xff08;将Bean对象注册到容器…

IMU+摄像头实现无标记运动捕捉

惯性传感和计算机视觉的进步为在临床和自然环境中获得精准数据带来了新可能。然而在临床应用时需要仔细地将传感器与身体对齐&#xff0c;这减慢了数据收集过程。 随着无标记运动捕捉的发展&#xff0c;研究者们提出了一个新的深度学习模型&#xff0c;利用来自视觉、惯性传感…

金和OA GetSqlData.aspx 远程命令执行漏洞

一、漏洞简介 金和OA协同办公管理系统C6软件共有20多个应用模块,160多个应用子模块,涉及的企业管理业务包括协同办公管理、人力资源管理、项目管理、客户关系管理、企业目标管理、费用管理等多个业务范围,从功能型的协同办公平台上升到管理型协同管理平台,并不断的更新完善…

每日刷题-5

目录 一、选择题 二、算法题 1、不要二 2、把字符串转换成整数 一、选择题 1、 解析&#xff1a;printf(格式化串&#xff0c;参数1&#xff0c;参数2,.….)&#xff0c;格式化串: printf第一个参数之后的参数要按照什么格式打印&#xff0c;比如%d--->按照整形方式打印&am…

2023备战秋招Java面试八股文合集

Java就业大环境仍然根基稳定&#xff0c;市场上有很多机会&#xff0c;技术好的人前景就好&#xff0c;就看你有多大本事了。小编得到了一份很不错的资源&#xff0c;建议大家可以认真地来看看以下的资料&#xff0c;来提升一下自己的核心竞争力&#xff0c;在面试中轻松应对面…

HTTPS协议

文章目录 HTTPS协议1. HTTPS协议介绍2. 概念准备2.1 什么是"加密"2.2 为什么要加密2.3 常见的加密方式(1) 对称加密(2) 非对称加密 2.4 数据摘要 && 数据指纹(1) 应用场景 3. HTTPS理解链3.1 方案 1 - 只使用对称加密3.2 方案 2 - 只使用非对称加密3.3 方案 …