首页
学习
活动
专区
工具
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.5K31

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

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

3.6K31
  • Unity2D手册翻译(三)

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

    2K40

    图形编辑器基于Paper.js教程21:在画布中创建一个不随视图缩放的矩形,并固定在视图的位置,标尺功能的实现

    在图形编辑器中,一般都会有标尺的功能,标尺工具,能够让用户建立清晰的坐标系,能够知道原点在那里,并且能够大致估算出,尺寸,距离,和当前光标所在的位置。...如下图标尺所在的位置: 标尺工具具有以下这样几个特性 1:标尺的尺寸大小不随着视图的缩放而改变 2:固定在画布的四周,一般在上面和左边,有些坐标系是在下面 下面讲一下如何 做一个简单的标尺工具 之前的文章我已经告诉大家如何做一个不随视图改变大小的圆...矩形就稍微麻烦一些,视图缩放后需要对矩形 进行反缩放,才能保证大小。 这还不算难,难点在计算视图缩放后,矩形应该移动多少才能保持在屏幕的固定位置。...(rectCenter); paper.view.scale(delta, viewPosition); // 视图缩放后,使用视图坐标,再转换成项目的坐标,重新设置矩形中心点坐标,齐活 var newRectCenter...; 看一下效果, 如下图: 默认情况 缩放后 对于画布的移动,更加简单只需调整 上标尺中心点的y值,或者左标尺中心点的x值。

    8210

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

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

    90610

    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放大两倍刚好抵消掉。

    94921

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

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

    96530

    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

    31820

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

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

    1.6K40

    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

    CorelDRAW 2019 软件应用项目(五)

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

    1.7K10

    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.8K30

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

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

    20921

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

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

    1.3K10

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

    如下图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 处理脏数据 我们发现除了检测到人脸数据,还有一些其他的脏数据,这个时候可以打印检测出的人脸数据位置和大小结果如下: ?

    1.1K40

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

    、RotateAnimation 第二种 自定义动画 a 在游戏逻辑处理中调整x和y轴坐标 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.5K50

    【Go语言绘图】图片的旋转

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

    3.2K20
    领券