首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在旋转和调整大小后设置矩形的中心点,保持原来的位置

在旋转和调整大小后设置矩形的中心点,保持原来的位置,可以通过以下步骤实现:

  1. 获取矩形的当前中心点坐标。
  2. 对矩形进行旋转和调整大小操作。
  3. 计算旋转和调整大小后矩形的新中心点坐标。
  4. 计算中心点坐标的偏移量,即新中心点坐标与旧中心点坐标的差值。
  5. 将矩形的位置坐标减去偏移量,以保持原来的位置。

下面是一个示例代码,演示如何在旋转和调整大小后设置矩形的中心点,保持原来的位置:

代码语言:python
代码运行次数:0
复制
# 假设矩形的初始位置和大小如下
x = 100  # 矩形左上角 x 坐标
y = 100  # 矩形左上角 y 坐标
width = 200  # 矩形宽度
height = 100  # 矩形高度

# 假设矩形的初始中心点坐标如下
center_x = x + width / 2
center_y = y + height / 2

# 假设矩形的旋转角度和缩放比例如下
rotation_angle = 45  # 旋转角度(单位:度)
scale_factor = 1.5  # 缩放比例

# 旋转和调整大小后的矩形中心点坐标
new_center_x = center_x
new_center_y = center_y

# 计算旋转和调整大小后的矩形中心点坐标
new_center_x += (width * scale_factor / 2 - width / 2) * math.cos(math.radians(rotation_angle))
new_center_y += (height * scale_factor / 2 - height / 2) * math.sin(math.radians(rotation_angle))

# 计算中心点坐标的偏移量
offset_x = new_center_x - center_x
offset_y = new_center_y - center_y

# 更新矩形的位置坐标
x -= offset_x
y -= offset_y

# 打印更新后的矩形位置和大小
print("矩形位置:({}, {})".format(x, y))
print("矩形大小:{} x {}".format(width * scale_factor, height * scale_factor))

这段代码通过计算旋转和调整大小后的矩形中心点坐标与初始中心点坐标的偏移量,然后更新矩形的位置坐标,从而保持矩形的中心点在旋转和调整大小后保持原来的位置。

注意:以上示例代码是使用Python编写的,如果您使用的是其他编程语言,可以根据相应语言的语法进行调整。此外,示例代码中的旋转和缩放操作是假设的,实际情况可能会有所不同,具体操作方法可能会有所差异。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

我做了一个在线白板(二)

根据矩形中心点计算鼠标拖动对角点坐标,比如我们拖动矩形右下角,那么对角点就是左上角; 2.根据鼠标拖动到实时位置结合对角点坐标,计算出新矩形中心点坐标; 3.获取鼠标实时坐标经新中心点反向旋转原始矩形旋转角度坐标...图片 黑色为原始矩形,绿色为鼠标按住右下角实时拖动矩形,这个是没有保持原宽高比,拖动到这个位置如果要保持宽高比应该为红色所示矩形。...根据之前逻辑,我们是可以计算出绿色矩形旋转位置宽高,那么新比例也可以计算出来,再根据原始矩形宽高比例,我们可以计算出红色矩形旋转位置宽高: 图片 如图所示,我们先计算出实时拖动绿色矩形旋转位置宽高...,也就是按比例伸缩矩形位置宽高。...,但是同样也很明显位置变了: 图片 解决方法是我们可以计算出元素新包围框,然后计算出原来包围框距离,最后缩放所有点位都往回偏移这个距离即可: // 更新元素包围框 updateRect(x

1.4K30

我做了一个在线白板!!!

和我们预想不一样,首先我们鼠标是在左上角移动,但是矩形却出生在中间位置,另外矩形大小变化过程也显示出来了,而我们只需要看到最后一刻大小即可。...,它会显示激活态,然后再当我们按住了激活态某个部位进行拖动时进行具体修理操作,比如按住了中间大虚线框里面则进行移动操作,按住了旋转手柄则进行矩形旋转操作,按住了其他四个角操作手柄之一则进行矩形大小调整操作...接下来又需要修改鼠标按下方法,如果当前是选择模式,且已经有激活矩形时,那么我们就判断是否按住了这个激活矩形某个激活区域,如果确实按在了某个激活区域内,那么我们就设置两个标志位,记录当前是否处于矩形调整状态中以及具体处在哪个区域...它想太多,原因其实很简单: 虚线是矩形没有旋转位置,我们点击在了旋转边框上,但是我们点击检测是以矩形没有旋转时进行,因为矩形虽然旋转了,但是本质上它x、y坐标并没有变,知道了原因解决就很简单了...最后一种修理矩形方式就是伸缩矩形,即调整矩形大小,如下图所示: 虚线为伸缩前矩形,实线为按住矩形右下角伸缩手柄拖动矩形矩形是由x、y、width、height四个属性构成,所以计算伸缩矩形

3.6K30
  • Unity2D手册翻译(三)

    如果你点击那个图片,你可以看到一个带调整矩形选择区出现在角落里。你可以拖动矩形调整柄或者边来改变它大小,然后覆盖到一个指定元素上。...面板里空间让你选择sprite图形名字,并且通过坐标来设置矩形位置尺寸。边界宽度,从左边,上边,右边下边可以用像素来指定。...还有sprite中心点可以设置,这个点是Unity用作调整此图形原点主“锚点”。你可以从一批默认矩形相关位置选择(比如中心、右上等等),或者使用自定义坐标。...Pivot 可以设置成9个预设位置之一,或者一个 Custeom Pivot 位置。 注意在任何自动化切片方法使用之后,生成矩形依然可以被手动编辑。...你可以让Unity初步处理sprite边界中心点定义,然后自己做必要调优。 修改多边形大小 打开多边形 Sprite Editor,你可以获得修改它形状、尺寸中心点位置选项。

    2K40

    Canvas学习笔记,记录使用过程中遇到一些问题

    默认旋转是通过改变坐标系角度实现(矩阵),所以旋转中心点不会在原来地方; /* 角度换算弧度 */ let rotateRadius=45*Math.PI/180 /*计算方形中心点 *.../ let rectCenterPoint = { x: x + w / 2, y: y + h / 2 }; /* 旋转同时,让中心点回到原来位置 */ context.translate..., -rectCenterPoint.y); 3.原地缩放 默认旋转是通过改变坐标系刻度实现(矩阵),所以缩放中心点不会在原来地方; /* 倍数 */ let scaleRadio=1.5...设备像素比,它计算方式是 物理像素 / 屏幕宽度像素; 首先设置canvas宽度高度是原来2倍 使用ctx.scale(2,2)设置绘制东西也放大2倍 在canvas父元素上使用缩放,使用...css3 transform:scale(0.5,0.5)即可,意思为缩放到原来2倍大小canvas放大两倍刚好抵消掉。

    92721

    解锁前端难题:亲手实现一个图片标注工具

    这就是为什么在使用 scale 函数,所有的绘图操作(包括位置大小等)都会受到影响。...实现,我们通过旋转上下文来实现,其旋转中心是矩形图形中心点,因为操作上线文,所以在每个矩形绘制开始结束,要通过saverestore来恢复之前上下文。...如果是,则设置 startEditRect, dragingEditor, editorShiftXY 来记录正在调整大小标注编辑点。...} }); 将拖拽移动距离,转换为旋转角度,涉及一些数学知识,其原理是通过上一次鼠标位置本次鼠标位置,计算两个点旋转中心(矩形中心)三个点,形成夹角,示例代码如下: function...鼠标事件处理,点击、拖拽、滚轮缩放等。 几何计算,点是否在矩形内、旋转角度计算等。 希望这个实例能够为你提供一些启发帮助,让你在实现自己图片标注工具时有一个参考借鉴。

    51710

    橙色优学教案 | AI设计抽象几何标志

    image001.png 1 创建图形 打开AI软件,新建A4大小文档,在画布上绘制出两个同心圆,将小圆执行变形-膨胀操作,然后将图形扩展外观,再旋转45度。...AI设计抽象几何标志考.jpg 3 执行布尔运算 将所有线条选中,打开路径查找器,点击分割,将图形进行分割处理,然后取消图形分组,只选中其中一个图形,等比缩小,再围绕中心点旋转3个图形出来,形成一个圆形图案...志考.jpg 4 绘制一排矩形 绘制长条矩形,然后移动位置进行复制,并复制粘贴出一排矩形,并将矩形拖进画笔面板内,选择艺术画笔,并确定,如图。...计抽象几何标志考.jpg 将应用后路径形态进行扩展外观,然后在选择扭曲变换里扭转,值调整为15度,确定,图形就有部分扭曲效果出来了。...qq几何标志考.jpg 6 最终效果 将四分之一图形选中至于最顶层,竖条图形一起选中,ctrl+7制作剪切蒙板,然后再将图形围绕中心点旋转一周并复制出其余三个图形,这样图形基本绘制完成,最后将图形填充颜色

    94630

    View编程指南

    大多数情况下,您应用程序Windows永远不会改变。 Windows创建,它保持不变,只有它显示view改变。...更改父view大小会产生连锁效应,导致任何子view大小位置也发生变化。当您更改父view大小时,可以通过适当地配置view来控制每个子view大小调整行为。...你可以在UIView对象上动画属性如下: Frame - 使用此动画设置为view更改位置大小变化。 bounds - 使用这个动画来改变view大小。...center属性中值同样会更改为匹配frame矩形中心点。 当您设置center属性时,frame中origin值会相应更改。...例如,您可以使用此属性来创建围绕其中心点旋转view动画。 您不会使用此属性对您view进行永久更改,例如在其superview坐标空间内修改其view位置大小

    2.3K20

    如何从零实现一个词云效果

    矩形遍历我们是按下图方向: 当然,你也可以调整成你喜欢顺序。...现在我们来看下一个问题,那就是大小适配,我们将最小文字大小调大一点看看: 可以发现词云已经比容器大了,这显然不行,所以最后我们还要来根据容器大小调整词云大小,怎么调整呢,根据容器大小缩放词云整体位置字号...首先要修改是获取文字像素数据方法,因为canvas大小目前是根据文字宽高设置,当文字旋转显然就不行了: 如图所示,绿色是文字未旋转包围框,当文字旋转,我们需要是红色包围框,那么问题就转换成了如何根据文字宽高旋转角度计算出旋转文字包围框...* Math.sin(rad) + height * Math.cos(rad) 由此我们可以得到如下函数: // 计算旋转矩形宽高 const getRotateBoundingRect =...,但是右侧还是会存在问题: 解决方式也很简单,直接根据文本元素位置大小判断是否超出了容器,是的话就调整一下位置: class WordCloud { fitContainer(wordItemList

    23820

    腾讯地图JavaScript API GL实现文本标记碰撞避让

    但是用户可以对label进行旋转偏移操作,普通检测方法就不适用了,如果强行把label用一个大水平矩形包裹起来再计算,精度损失会很多,所以调研了一下旋转矩形碰撞检测方法。...进行判断具体方式有两种:一是把每个矩形4个顶点投影到一个轴上,算出该矩形最长连线距离,判断两个矩形投影是否重叠;二是将两个矩形半径距离投影到轴上,然后把两个矩形中心点连线投影到通一个轴上,判断两个矩形半径投影之和与中心点连线投影大小...vectorB[0] + vectorA[1] * vectorB[1]); } 然后就是如何表示矩形两个轴单位向量,假设矩形以自身中心点为原点,逆时针旋转θ,其两条相邻边单位向量如下图所示:...红色线段则是两个矩形中心点连线,同样需要计算它在蓝色线段所在X轴投影长度,如果中心点连线投影长度大于两个矩形半径投影之和,那么在这条轴上两个矩形没有碰撞,否则发生碰撞。...实现 实际实现过程中进行了简单旋转矩形类,可根据实际业务需求调整,例如添加缩放、偏移等参数 class Rect { constructor(options) {

    1.5K40

    CorelDRAW 2019 软件应用项目(五)

    文案 作品展示 一.新建 A4 大小纸张 将长宽分别改为 210mm 297mm,将矩形覆盖整个纸张 二.填充背景颜色 界面右下角,有有系统钢笔,点击油漆桶后面的色块,在菜单栏中选择第二个纯色填充...如下图所示 出现第三个把手并且有椭圆形运动轨迹,这代表你选中渐变填充,是由中心向外填充拖动圆形把手可以更改最外面椭圆形路径大小,这个椭圆形就是从中心点填充,渐变向外扩张,最终碰触到椭圆虚线界线,...它是圆形把手运动路径,你可以理解为有两个方形颜色产生渐变围绕着一个方形为圆心,袁心空心圆把手为半径进行旋转,以至于原本填充条形渐变经过圆形把手沿路径旋转形成中心向外渐变,椭圆虚线界限最远端可达另一个色块圆形把手处当圆心与另一个色块圆心与圆型...我们会发现,如果新建一个由中心向外渐变交互式填充它默认两根线夹角为 90 度,默认就是正圆渐变。 在这里切换回线性渐变填充,调整两色款颜色,内部圆形渐变,也是同样做法。...,互换双方方形色块位置,体积感觉塑造出来了 四.文案 输入“keep thinking”将它垂直排列,运用水平翻转垂直翻转放置到画面的左上角右下角。

    1.7K10

    pygame 笔记-9 图片旋转及边界反弹

    但是仔细观察,还是有点小问题,旋转过程中,叶子中心位置总在晃动,预期效果最好是旋转过程中,中心点不变。...至于晃动原因,叶子图片并不是一个圆形,pygame中,任何一个Surface对象,总有一个外切矩形对象(通过get_rect()方法可以获得),图片旋转,这个外切Rect对象尺寸跟着变化,导致中心点也变化了...(注意:这里要搞一个新变量,存储旋转图片) 26 newLeaf = pygame.transform.rotate(leaf, angle) 27 # 校正旋转图片中心点 28...答案:Rect对象默认生成时,其left,top属性都是0, 所以旋转新图片,其外切矩形一直是在(0,0)位置,但是校正后版本,get_rect(center=...)这里指定了中心点,所以newRect...,其外切矩形尺寸会变化 31 newRect = newLeaf.get_rect() 32 # 默认newRect位置在(0,0),要实现矩形外框跟随,必须赋值到新位置 33

    1.2K20

    View编程指南(三)

    这里仅仅是少数: 布局subview管理 view定义了与其父view相关默认调整大小行为。 一个view可以管理subview列表。 view可以根据需要重写subview大小位置。...= xform; 将上述代码中变换应用于view将围绕其中心点顺时针旋转。...运行时调整View大小位置 每当view大小发生变化时,其subview大小位置都必须相应地改变。 UIView类支持view hierarchy中view自动手动布局。...通过自动布局,您可以设置每个view在其父view调整大小时应遵循规则,然后完全忽略调整大小操作。 通过手动布局,您可以根据需要手动调整view大小位置。...当设备改变方向时,view controller可能会调整view大小位置以匹配。作为调整新方向一部分,可能会隐藏一些views,并显示其他views。

    1.7K30

    图形编辑器开发:实现缩放图形

    x / y width / height rotation 位置大小 x y 为图形左上角位置,注意是旋转。...但我更建议将 x、y、width、height 形成 矩形中点 作为旋转中心,这样更简单一些,减少用户心智负担,也防止出现用户设置一些奇怪 origin 场景。...(因为弧度不直观,后面会用角度来描述,但数据层依旧还是用弧度) 旋转方向:设置旋转,图形是会往顺时针方向还是逆时针方向旋转; 基准角度:朝向哪里是 0 度; 取值范围:通常为 [0, 360) ...计算 x y // ... } } 看看只更新宽高效果。 可以看到是有问题,因为修改宽高矩形中心点也发生了变化,导致缩放中心错误。所以我们要修正一下 x y。...修正 x y 接着我们就要修正 x y 值。 重点就一句话:缩放前参考点缩放参考点位置保持一致。这个参考点其实就是图形缩放过程中缩放中心。

    18520

    AutoCAD工程制图 常见命令与注意事项全总结(120例)

    12.捕捉对象里有垂足捕捉点。 13.修剪时先剪前面的再剪后面的。 14.矩形画法:矩形+@长度,宽度。先指定一点再公式套入。 15.旋转选定目标要回车一次,角度可以输入正负,正为顺时针。...33.椭圆命令:EL 34.中心点画椭圆(点击面板上椭圆按钮,只需输入长,短轴一半,要先指定中心点位置) 35.顶点画椭圆(输入el,确定顶点(也可以在下方面板点击中心点绘制),再输入长轴长,短轴一半...79.图层作用:用于将各种不同几何图素进行分类管理,将不同对象新建不同图层进行放置。 80.可以进行:隐藏,锁定,格式设置。 81.可以先设置好各种图层格式,绘图时再选择对应图层调整。...(原来属于其他图层线可以选中选择想要图层,会自动切换成该图层应用格式。 82.锁定某一图层可以在删除时防止被删除。也同样无法被修改。...可以将坐标轴设置到原点,点击(xy)可以可以设置坡切点坐标。 107.抽壳 选择面输入厚度可以抽空。若不选择面,直接抽壳,则可以抽空内部。(TIPs:抽壳时若不好选中顶面底面。

    1.2K10

    项目实践|如何在较暗环境进行人脸检测?

    如下图LBP原理示意图所示,在左侧区域中,中心点像素为76,并设置它为此次阈值。然后现在我们对该中心点8邻域做进一步处理。 将中心点周围8个位置中灰度值大于76像素点处理为1。...例如,其邻域中像素值为128、251、99、213点,都被处理为1,填入对应像素点位置上。 将中心点周围8个位置中灰度值值小于76像素点处理为0。...,上面的“ ”中2表示有两种情况,即反码原码两种,这样便得到了58种统一化编码,比原来256种减少了很多。...,值越大说明精度要求越高 3. minSize:检测到最小矩形大小 4. maxSize: 检测到最大矩形大小 所以我们使用此方法检测图片中的人脸 # 灰度转换 gray = cv2.cvtColor...5.4 处理脏数据 我们发现除了检测到人脸数据,还有一些其他脏数据,这个时候可以打印检测出的人脸数据位置大小结果如下: ?

    1K40

    【Go语言绘图】图片旋转

    在上一篇中,我们了解了gg库基本使用,包括调整大小调整圆形参数、设置颜色、保存图片、加载图片裁剪。这一篇我们来学习一下图片旋转。 加载图片 首先,我们先来一张黄图。...,对之前代码做了一些调整。...把画布大小设置为2倍图片长宽。...然后我们将图片加载到了正中心位置,(w/4,h/4) 对应图片左上角在画布上位置。 dc.DrawImage(im, width/4, height/4) 输出图片如下: ?...想象之中,我们会把图片旋转45度,但实际上是这样: ? 好像不太符合预期,实际上,仔细研究一下就会发现,这里旋转是围绕原点也就是整个画布左上角进行旋转,那我想要它围绕中心点旋转该怎么办呢?

    3.2K20

    WPF 基础 2D 图形学知识

    以上代码放在 github gitee 欢迎小伙伴访问 给定中心点宽度高度旋转角度求旋转矩形顶点坐标 如有定义旋转矩形顶点分别是 A B C D 四个点,在没有进行旋转之前如图 ?...已知未旋转相对矩形中心点坐标求旋转相对于零点坐标(dx, dy, position, rotation); return new 旋转矩形(a, b, c, d);...} /// /// 根据未旋转相对圆角矩形 中心点 坐标计算旋转相对于零点坐标。.../// /// 旋转相对于零点坐标 private static Point 已知未旋转相对矩形中心点坐标求旋转相对于零点坐标...从图片可以看到所有的向量都从 A 点出发,此时可以将 A 点设置为原点,如果此时 M 是在矩形外,认为是在如下图左边,那么此时向量相乘值就会是负数,因为相对于 A 作为原点 ?

    85610

    《Android游戏编程之从零开始》笔记「建议收藏」

    、RotateAnimation 第二种 自定义动画 a 在游戏逻辑处理中调整xy轴坐标 b 利用帧动画 c 剪切图动画 最常用 动态物体动作帧全部放在一张图片中,通过设置可视区域完成...碰撞检测 a、矩形碰撞,利用两个矩形之间位置进行判断,如果一个矩形像素在另外一个矩形之中,或者之上,就可以认为这两个矩形发生了碰撞。 b。...三、游戏开发提高 1.360°平滑游戏导航摇杆 首先在屏幕上绘制两个大小不一圆形,让小圆中心点围绕大圆做圆周运动。...用户触点位置分为两种情况 第一种:触点位置在大圆内或者大圆上,小圆中心点直接跟随玩家触点即可。...1.距离关节 DistanceJoint 限制两个Body质心距离永远保持不变 2,旋转关节 RevoluteJoint 一个Body围绕另一个Body旋转

    1.3K21

    80.73mAP、38.5mAP,旋转框、小目标检测能力双SOTA!

    由于物体本身与图像坐标轴具有大小不一倾斜角,使用旋转框描述物体相比于使用水平框描述物体包含更少背景,定位更加精细。旋转框检测常用于遥感影像分析、机器人抓取、自动驾驶、场景文字检测等场景当中。...首先,我们利用点与旋转矩形几何性质判断点是否在矩形框内部,来筛选Anchor Points。其次,我们计算了预测旋转矩形框与GT框旋转IoU,加入metric计算中。...然而,对于接近方形旋转框,将其转变成高斯矩形,角度信息将丢失,导致对于接近方形旋转角度预测不准。 为了解决这一问题,我们使用了DFL方式预测角度。...在推理时,我们可以将其与卷积层一起重参数化,因此推理时参数量计算量都不变。 ProbIoU损失函数 将旋转矩形框建模成高斯框已经成为一个流行做法。...因此,如上图,我们将DFL回归范围向量化,引入回归负半轴,根据不同数据集调整回归上限,减少回归小目标时噪声,同时用半径为center_radius,以gt框中心点为中心先验框来辅助回归小目标检测框

    1.4K50
    领券