Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >从x、y、宽度、高度和旋转角度获取旋转后的矩形点

从x、y、宽度、高度和旋转角度获取旋转后的矩形点
EN

Stack Overflow用户
提问于 2016-07-10 22:42:44
回答 2查看 2.1K关注 0票数 3

我有一个旋转的矩形(在本例中是45度),看起来像这样:

我知道X来自矩形的左上角(如果它没有旋转,在本例中是图片顶部的点)。Y也是从左上角开始。我有宽度、高度和边界框。我想找出这个矩形的其他点是什么。左上角(严格来说,本例中的X位置),右上角,右下角和左下角。我试图使用变换矩阵,但我似乎无法理解它。

如何找到这个矩形的其他点?从技术上讲,我使用的是JavaScript,但是任何语言都应该能够处理这个问题。

EN

回答 2

Stack Overflow用户

发布于 2019-06-27 07:27:38

为其他任何人寻找这个。下面是一个这样做的函数。

x、y、高度和宽度如下图所示。ang是x,y点和Y轴之间的角度。如果想要x,y点和X轴之间的值,只需在将其发送到函数之前执行以下操作:ang = 90 - ang

isDeg简单地说就是你是以弧度还是度来发送ang。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function getRectFourPoints(x,y, width, height, ang, isDeg = false) {
  	
	if(isDeg) ang = ang * (Math.PI / 180)

	const points = {first: {x,y}}
	const sinAng = Math.sin(ang)	
	const cosAng = Math.cos(ang)
	
	let upDiff = sinAng * width
	let sideDiff = cosAng * width
	const sec = {x: x + sideDiff, y: y + upDiff}
	points.sec = sec
	
	upDiff = cosAng * height
	sideDiff = sinAng * height
	points.third = {x: x + sideDiff, y: y - upDiff}
	
	const fourth = {x: sec.x + sideDiff, y: sec.y - upDiff}
	points.fourth = fourth
	return points
}

票数 4
EN

Stack Overflow用户

发布于 2016-07-10 23:32:35

旋转矩阵可以帮助基于其先前的位置计算其当前位置。如果顺时针旋转,则2D旋转矩阵如下所示:

这使得

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38297082

复制
相关文章
OpenCV 求外接矩形以及旋转角度
http://blog.csdn.net/wangyaninglm/article/details/43959947
流川疯
2022/11/29
6520
OpenCV 求外接矩形以及旋转角度
JavaScript获取高度和宽度
屏幕分辨率为:screen.width screen.height 屏幕可用大小:screen.availWidth screen.availHeight 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽(包括边线的宽):document.body.offsetWidth 网页可见区域高(包括边线的宽):document.body.offsetHeight 网页正文全文宽:document.b
苦咖啡
2018/05/07
3.7K0
计算旋转一定角度后的向量
结论 图片 并且它们的模长相等。 推导 仅用到一点点极坐标和和角公式的内容: 图片
kifuan
2022/10/24
1.4K0
计算旋转一定角度后的向量
JavaScript 获取屏幕的高度和宽度
screen.availHeight:显示浏览器的屏幕的可用高度(这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间。)
aehyok
2018/09/11
7.2K0
JavaScript  获取屏幕的高度和宽度
svg中矩形旋转问题
场景: 矩形绕原始的中心点旋转后,再调整宽高,这个时候原始点其实已经发生变化,但是旋转角度未变,我们需要计算新的原始点。
JadePeng
2021/08/23
8990
我做了一个在线白板(二)
上一篇我做了一个在线白板!给大家介绍了一下矩形的绘制、选中、拖动、旋转、伸缩,以及放大缩小、网格模式、导出图片等功能,本文继续为各位介绍一下箭头的绘制、自由书写、文字的绘制,以及如何按比例缩放文字图片等这些需要固定长宽比例的图形、如何缩放自由书写折线这些由多个点构成的元素。
街角小林
2022/09/20
1.5K0
我做了一个在线白板(二)
Flash:DisplayObject的矩阵旋转(移动/修改注册点,修改旋转点)
简单来说,原理就是利用matrix运算,先把旋转点移到原点位置,旋转变换后再恢复到原来的位置 var a:Sprite = new Sprite(); a.graphics.beginFill(0); a.graphics.drawRect(0,0,100,100); a.graphics.drawCircle(0,0,6); a.graphics.endFill(); addChild(a); a.x = a.y = 100; trace (a.transform.matrix); var m:Matr
用户1258909
2018/07/04
9260
JavaScript、Jquery获取屏幕的宽度和高度
在日常的项目中经常需要获取屏幕的宽度或者高度,简单记录一下: Javascript方法获取: document.body.clientWidth //网页可见区域宽 document.body.clientHeight //网页可见区域高 document.body.offsetWidth //网页可见区域宽(包括边线的宽) document.body.offsetHeight //网页可见区域高(包括边线的高) document.body.scrollWidth //网页正文全文宽 document.b
德顺
2019/11/13
5.3K0
android之绕Y轴旋转
转自:http://lzyfn123.iteye.com/blog/1426844
forrestlin
2022/04/02
1.1K0
一篇文章带你了解SVG 转换知识
SVG 转换在SVG图像中创建的形状。例如,移动,缩放和旋转形状。这是显示垂直或对角线文本的便捷方法。
前端皮皮
2020/11/25
1.9K0
一篇文章带你了解SVG 转换知识
仿bilibili刷新按钮的实现
简述 最近跟小伙伴一起讨论了一下,决定一起仿一个BiliBili的app(包括android端和iOS端),我们并没有打算把这个项目完全做完,毕竟我们的重点是掌握一些新框架的使用,并在实战过程中发现并弥补自身的不足。 本系列将记录我(android端)在开发过程中的一些我觉得有必要记录的功能实现而已,并不是完整的从0到1的完整教程,若个别看官大爷觉得不好请出门左拐谢谢。 以下是该项目将会完成的功能。 视频播放功能 直播功能 弹幕功能 换肤功能 ... 本系列文章,将会有记录以上功能的实现但不仅仅只有这些,还
我就是马云飞
2018/02/05
1.5K1
仿bilibili刷新按钮的实现
C# 图片沿中心点进行角度旋转
Image 图片沿中心点进行任意角度旋转 public static Image RotateImg(Image b, int angle) { angle = angle % 360; //弧度转换 double radian = angle * Math.PI / 180.0; double cos = Math.Cos(radian); double
SpringSun
2022/05/20
1K0
JavaScript 获取图片的宽度和高度的方法
因为加载图片是异步的,在图片的相关数据没有加载完之后,宽高都是默认为0,所以我们要给imgDom增加个onload方法。
李维亮
2021/07/08
2.7K0
opencv 7 -- 边界矩形
一个直矩形(就是没有旋转的矩形)。它不会考虑对象是否旋转。 所以边界矩形的面积不是最小的。 可以使用函数 cv2.boundingRect() 查找得到
wust小吴
2019/07/08
1.8K0
WPF 基础 2D 图形学知识
本文收集一些基础的知识,本文的逻辑是在 WPF 框架下实现,有包含了默认的坐标系以及默认类型定义。对于 WPF 系的包括 Xamarin 和 UWP 都适合
林德熙
2021/01/29
8790
如何在onCreate中获取View的高度和宽度
在开发过程中经常需要获取到View的宽和高,可以通过View.getWidth()和View.getHeight()来得到宽高。然而新手们经常在onCreate方法中直接调用上面两个方法得到的值是0!
阳仔
2019/07/31
5.4K0
Android立体旋转动画实现与封装(支持以X、Y、Z三个轴为轴心旋转)
本文介绍了如何在Android平台上通过Matrix实现旋转动画,包括以X、Y、Z轴为中心进行旋转,以及使用自定义动画封装旋转操作。同时,还介绍了如何基于Matrix实现3D旋转,并给出了具体的示例代码。
用户1155943
2018/01/04
3.4K0
Android立体旋转动画实现与封装(支持以X、Y、Z三个轴为轴心旋转)
HTML5(六)——Canvas 高级操作
上一篇文章《HTML5(五)——Canvas API》介绍 canvas 绘制基本图形,这节开始介绍canvas的高级操作。
呆呆
2021/11/26
1.2K0
HTML5(六)——Canvas 高级操作
angle 旋转弧度,如果想使用角度,可以把角度转成弧度,公式为:deg * Path.PI/180。
呆呆
2021/09/29
1.3K0
点击加载更多

相似问题

获取旋转后的纹理宽度和高度

12

如何从轴心点旋转矩形后获得矩形的方向(角度)

11

用JavaScript计算旋转元素的X,Y,高度和宽度

410

如何从矩形点计算旋转角度?

310

如何在iOS中动画x,y,高度,宽度和旋转?

14
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文