当前位置:首页 > 文章列表 > 文章 > 前端 > 旋转长方形后,如何计算其相对于画布左上角的轴距?

旋转长方形后,如何计算其相对于画布左上角的轴距?

2024-12-15 11:06:46 0浏览 收藏

IT行业相对于一般传统行业,发展更新速度更快,一旦停止了学习,很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习,精进自己的技术,尤其是初学者。今天golang学习网给大家整理了《旋转长方形后,如何计算其相对于画布左上角的轴距?》,聊聊,我们一起来看看吧!

旋转长方形后,如何计算其相对于画布左上角的轴距?

绘制长方形并旋转,计算旋转后轴距

在拥有 1920×1080 画布中,放置一个宽高为 200×20 的长方形,其坐标位于 (100, 100)。当以任意角度旋转长方形时,如何计算它相对于画布左上角的 x、y 轴距?

以下代码提供了一个计算旋转后长方形轴距的解决方案:

const x = 200;
const y = 90;
const w = 200;
const h = 20;
const r = 80;

const x1 = x + ((w / 2) - (w / 2) * math.cos(r * math.pi / 180));
const y1 = (y + (h / 2)) - (w / 2) * math.sin(r * math.pi / 180);

其中:

  • x 和 y 为长方形旋转前相对于画布左上角的 x、y 坐标。
  • w 和 h 为长方形的宽高。
  • r 为旋转角度,单位为度数。
  • x1 和 y1 为旋转后的长方形相对于画布左上角的 x、y 坐标。

旋转长方形后,计算其轴距的代码如下:

const dx = x1 - x;
const dy = y1 - y;

今天关于《旋转长方形后,如何计算其相对于画布左上角的轴距?》的内容介绍就到此结束,如果有什么疑问或者建议,可以在golang学习网公众号下多多回复交流;文中若有不正之处,也希望回复留言以告知!

Go Kafka连接中遇到的“Local: Queue full”错误:如何解决?Go Kafka连接中遇到的“Local: Queue full”错误:如何解决?
上一篇
Go Kafka连接中遇到的“Local: Queue full”错误:如何解决?
如何轻松将平板电脑连接电视:终极指南
下一篇
如何轻松将平板电脑连接电视:终极指南
查看更多
最新文章

文章 · 前端   |  14分钟前  |   常见HTML属性兼容性问题有哪些
MyBrand

是的,translate 属性会影响 Google Translate 的自动翻译行为。1. translate="no"如果一个 HTML 元素或页面设置了 translate="no",Google Translate 会跳过该元素或整个页面,不进行翻译。适用于不需要翻译的内容,比如品牌名称、专有名词、代码片段等。示例:

MyBrand

111浏览 收藏
  • CSS引入后样式被重置怎么办?调整reset.css或normalize.css加载顺序
    文章 · 前端   |  20分钟前  |  
    CSS引入后样式被重置怎么办?调整reset.css或normalize.css加载顺序
    196浏览 收藏
  • HTML5表单标签如何使用\_表单区域划分技巧
    文章 · 前端   |  20分钟前  |  
    HTML5表单标签如何使用\_表单区域划分技巧
    438浏览 收藏
  • JavaScript柯里化函数详解教程
    文章 · 前端   |  21分钟前  |  
    JavaScript柯里化函数详解教程
    200浏览 收藏
  • 图片与边框空白间隙怎么消除
    文章 · 前端   |  29分钟前  |  
    图片与边框空白间隙怎么消除
    454浏览 收藏
  • inline-block布局与margin间距控制技巧
    文章 · 前端   |  36分钟前  |  
    inline-block布局与margin间距控制技巧
    159浏览 收藏
  • CSS清除浮动保持表格高度方法
    文章 · 前端   |  38分钟前  |   CSS 浮动
    CSS清除浮动保持表格高度方法
    208浏览 收藏
  • HTML引用标签使用教程
    文章 · 前端   |  41分钟前  |  
    HTML引用标签使用教程
    438浏览 收藏
  • HTML背景图片超时解决方法
    文章 · 前端   |  50分钟前  |  
    HTML背景图片超时解决方法
    218浏览 收藏
  • HTML如何突出显示排名数字
    文章 · 前端   |  53分钟前  |  
    HTML如何突出显示排名数字
    199浏览 收藏
  • 资料下载
    查看更多
    课程推荐
    查看更多
    AI推荐
    查看更多
    相关文章
    微信登录更方便
    • 密码登录
    • 注册账号
    登录即同意 用户协议隐私政策
    返回登录
    • 重置密码