如何在旋转后得到点在视图中的位置？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

WebGL简易教程(五)：图形变换(模型、视图、投影变换)

这个过程通常还顺带进行了场景的裁剪，将可视空间范围外的东西去掉，所以投影变换后的坐标系就是裁剪坐标系（Clip Space）。最后一步就是通过视口变换，从裁剪坐标系转换成屏幕坐标系，得到渲染结果。...(1) 平移变换对于一个点(x,y,z,1)，平移之后，得到的点就是（x+Tx,y+Ty,z+Tz,1），其中Tx、Ty、Tz分别表示点在X轴、Y轴、Z轴方向上移动的距离。...那么p点的坐标表示为式(3)： x=r*cosα\\ y=r*sinα\\ \end{cases} \tag{3} 同样的绕Z轴旋转后，得到新的点p’，X轴旋转到该点的角度为(α+β),其坐标值为...两者之所以需要分开进行完全是由实际的交互操作决定的：旋转、缩放到合适的位置其实是很难设置的，很多交互操作需要在视空间/摄像机空间中设置才比较合适，这个时候就需要视图变换了。...投影转换后得到的z1是一个深度值，它是一个与x0，y0无关的值，所以I=0，J=0。

3K4 0

【笔记】《计算机图形学》(7)——观察

整理一下这个思路，我们可以得到下面的仿射变换矩阵，明显可以看到这是一个缩放矩阵配合了位置的仿射变换，自己动手试一下就能清楚其中的过程 ?...相机变换再回到流程图中，这就到了最后的一个变换部分了，前面的变换都假设物体已经稳稳当当地放在视体中了，但实际上我们需要利用变换让相机坐标移动到需要的位置并让视体对准我们要的物体，再把物体的坐标从世界坐标系转换到相机坐标系中提供给上面的变换...动手计算一下就能知道这样的处理后，如果我们将得到的向量做透视除法齐次化，得到的ys就是d/z*y也就是例图中的样子，这个矩阵利用了携带的z值与焦距d协同完成了缩放操作 ?...得到透视矩阵后我们把至今为止的这些矩阵按照流程图串联起来，得到下面的最终变换矩阵和渲染的伪代码。...从右到左依次应用：调整相机位置和方向，将物体透视变形到正交视体里，将正交视体转为规范视体，将规范视体中的顶点裁剪投影到屏幕空间中。给每个点乘上这个矩阵后再进行依次透视除法得到物体变换后的真实坐标 ?

2.3K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

这就是为什么在使用 scale 函数后，所有的绘图操作（包括位置、大小等）都会受到影响。...在移动视口时，我们需要更新图片的位置，并重新绘制图像以反映新的视口位置。...宽高的计算比较简单，只需要将视口坐标除以缩放比例即可得到。...这是因为我们判断点在矩形内部的逻辑，并未考虑旋转的问题，我们的矩形数据存储了矩形旋转之前的坐标和旋转角度，如下所示。...鼠标事件的处理，如点击、拖拽、滚轮缩放等。几何计算，如点是否在矩形内、旋转角度的计算等。希望这个实例能够为你提供一些启发和帮助，让你在实现自己的图片标注工具时有一个参考和借鉴。

1.3K1 0

Android OpenGL开发实践 - 基于OpenGL ES 2.0的Android相机实时图片涂鸦实现思路

IMAGE_POSITION_VERTEX所指定的位置即相当于上图中“绘制位置”，IMAGE_TEXTURE_VERTEX指定的纹理绘制部分即相当于上图中的“绘制部分”。...得到了触摸点在相机预览画面中的坐标之后，下一步是转换成它在画布中的坐标，因为画布是跟随人脸移动、旋转及缩放的，因此这一步稍微有一点复杂，这里画布贴到人脸上采用的方案是将画布中心对准人脸的鼻尖位置（鼻尖坐标由人脸检测...继续沿用之前的例子，前面是得到了触摸点在相机预览画面中的坐标是(200,400)，它如何对应到涂鸦画面上面呢？...现在可以将手指在屏幕上触摸时在onTouchEvent()回调中所得到的触摸坐标正确地转换成涂鸦画布中的坐标了，那么如何在对应的坐标点画涂鸦图案呢？...tips:如果希望绕某个特定点旋转，可以先作平移操作，让特定点在平衡后处于原点的位置，再进行旋转操作，旋转结束后再按原路平移回去，如下图所示： ? 缩放变换： ?

7.6K13 0

【愚公系列】2023年08月 WEBGL专题-3D基础

视点决定了观察者在场景中的位置和角度，从视点的位置观察场景可以得到不同的视角和效果。目标点（Target Point）：目标点指的是观察者所看的物体位置，或者说是观察者所关注的点。...上方向决定了场景中的物体与视野的相对位置关系，比如一个物体在视图中的上方、下方、左侧或右侧等。...可以使用cross函数计算出两个切向量，以及它们的叉积得到表面的法向量，再用法向量来计算出副切线。计算旋转轴和旋转角度：在三维图形的旋转中，需要计算旋转轴和旋转角度。...可以使用cross函数计算出两个向量的叉积，来得到旋转轴。...具体地，如果有向量A和向量B，则向量差C=A-B，表示从B指向A的向量。向量差的作用包括：用于求解向量间的相对位置和方向，如空间中物体的运动轨迹。

700 0

unity3d新手入门必备教程

为了创建任何预设的一个实例，从工程视图 (Project View)中拖动一个预设到层次或场景视图中。现在你就得到了一个预设拷贝的实例，你可以将其放置在任何你想要的位置上。 ...在 Unity中你不可能创建一个没有变换组件的物体，变换组件为所有物体提供了独特的功能。变换组件变换组件是昀重要的组件之一。它定义了游戏物体在场景视图中的位置，旋转，和缩放。...你可以调整正规化视口矩阵 (Normalized View Port Rectangle)属性以调整相机视在屏幕上的大小和位置。...近裁剪面是昀近的开始渲染的位置，而远裁剪面是昀远的位置。裁剪面同时确定了深度缓存的精度。通常情况下，为了得到更好的精度你应该将近裁剪面移动到尽可能远。 ...正规化视口矩形 (Nomalized Viewport Rectangle) 正规化视口矩形能够定义相机的视将显示屏幕的什么位置上。

7.3K1 0

OpenGL（五）-- OpenGL中矩阵的变换OpenGL（五）-- OpenGL中矩阵的变换

坐标系前提：所说的坐标系都是基于3维空间的3维坐标. ? 1. 局部坐标系图中LOCAL SPACE又称为本地坐标系。描述物体本身的顶点坐标。 2....投影坐标系统 3维图像最终显示是需要转换位2维图像才可以显示，及时的3d电影也是经过处理后的2维图像。...具体可以想象移动的是物体的每一个点，在旋转之后物体的每一个点都的方向向量都会旋转，之后平移就会按照方向向量来进行移动先平移不会修改物体额方向向量，所以旋转就会得到不同的效果。...20181104204535641.png 透视投影(Perspective Projection)：它是从某个投射中心将物体从后往前投射到单一投影面（视口）上所得到的图形。...确立透视投影需要的参数： aspect(远/近裁切面的宽高比，它本身也是视口) , near(近裁切面位置) , far(远裁切面位置)，投影角度，视口位置以上图片都出自：_superhuihui-OpenGL

2.6K1 1

模型矩阵、视图矩阵、投影矩阵

「变换」的含义就是，将点的初始位置的坐标P映射到平移、旋转、缩放后的位置坐标P’，即：齐次坐标由来：平移变换，变换后点坐标等于初始位置点坐标加上一个平移向量；而旋转变换和缩放变换，变换后点坐标等于初始位置点坐标乘以一个变换矩阵...考虑一个物体绕任意的轴（而不是三个坐标轴）旋转，如：绕着过顶点(x, y, z)的方向为(a, b, c)的轴，旋转角度θ。...而在齐次坐标中，表示位置的点坐标为(x, y, z, 1)，而表示方向的向量为(x, y, z, 0)。平移一个点能够得到平移后的点坐标；而平移一个向量什么都不会发生。...，才能得到变换后的顶点坐标；而模型变换只需要计算一次模型矩阵（当然也是一步一步的），然后每个顶点左乘模型矩阵就可以直接得到变换后的坐标了。...模型视图矩阵的作用是：乘以一个点坐标，获得一个新的点坐标，获得的点坐标表示：点在世界里变换，观察者也变换后，点相对于观察者的位置。

2.5K2 0

重用地图的单目视觉惯导SLAM系统

Tracking 主要的变化是添加了相机频率的IMU位置、速度和偏置的估计。这样我们就可以得到比恒速模型准的多的机器人当前帧的初始状态。...一旦预测到了机器人的位置，局部地图中的地图点就投影到当前帧和当前帧的特征点匹配。然后优化当前帧中特征匹配的重投影误差和IMU的误差。...公式解释：这里就是重投影误差的最小二乘的形式，利用IMU当前帧的位姿得到世界坐标系下地图点在B系下的表示，然后利用外参可以得到地图点在C系下的表示，最后利用针孔模型得到该地图点在当前帧像素坐标系下的表示...固定窗口中包含了N+1个和滑窗相连的最新的共视关键帧，他们可以约束IMU的状态。 ?...尺度和重力估计（没有加速度的偏置）得到陀螺仪的偏置以后，可以利用预积分得到速度，位置，正确的旋转加速度的测量来补偿陀螺仪的bias。

7892 0

OpenGL学习笔记（三）- 坐标系与顶点变换

屏幕空间的坐标就是真实屏幕（严格来说是视口）上的坐标，经过栅格化后就对应于屏幕像素。预备知识在真正了解这些变换之前，我们有必要先了解一些数学相关的知识。...一个常见的视图矩阵是LookAt矩阵，可以创建一个在摄像机位置看向目标位置的视图矩阵。因此我们大致需要进行两个操作：首先把世界移动到摄像机位置；之后把世界旋转至摄像机角度。...旋转操作实际上就是一个正交变换，因此我们只需要找到旋转后的一组正交基就可以了。...但是由于世界需要反向旋转，因此这个正交基的寻找会困难不少，所以我们可以采用先找出正向旋转矩阵，然后再进行逆操作（取矩阵逆）得到目标矩阵，因此我们首先需要找到一组合适的正交基。...GLclampd nearVal, GLclampd farVal); 首先计算屏幕空间的原点，之后就可以得到坐标变换：由此可以写出视口变换矩阵：很显然，如果需要使用矩阵运算

4.2K2 1

模拟试题A

（） A）3 B）4 C）6 D）8 5．多边形扫描线填充算法四个步骤中，保证填充无误的关键步骤是（） A）求交点 B）对交点排序 C）交点配对 D）交点所在区间填色 6．下图中四组正方体透视图错误的一组是...设窗口的四条边界为 ? ,视区的四条边界为 ? 已知窗口内的一点(Xw,Yw)，则对应视区中的点（Xs,Ys）为Xs= ，Ys= 。四、综合题(44′) 1....（10分）（1）试根据简单四连通种子填充算法按左、上、右、下入栈的顺序给出像素点填充的次序，用序号123456将填充次序结果在右图中标出(4′)； ? 填充次序结果： ?...图B.4 区域填充（2）将填充过程中每一步堆栈中的内容按所给字母标记填写在下图所示堆栈中(6′)。 ? 图B.5 堆栈 2. 已知p点在xoy坐标系下坐标为 ?...设视点在z轴（0，0，d）处，试推导P点的透视变换矩阵。要求最后保留深度信息（5′）。若已知单位立方体如图B.8所示放置，根据透视变换矩阵计算各顶点透视变换后的顶点坐标（7′）。(12分) ?

3.8K1 0

3D图形学线代基础

上图中我们把 OA 向量以原点 O 为基准点逆时针旋转 θ 度得到 OB 向量，已知 A 点坐标为（x1，y1），求 B 点坐标（x2，y2）。...图中 OA 以 OA 上的某点 C 为基准点顺时针旋转 α 得到 BD，此时这个旋转变换会改变坐标系的原点，因此不属于线性变换；而当 OA 以原点为基准点顺时针 β 得到 OE，此时原点并没有发生变换，...有符号的意思是可正可负，在上图中变换后的基向量组成的平行四边形相对于初始基向量组成的平行四边形，位置发生了翻转，那么方阵 A 的行列式等于变换后基向量组成的平行四边形面积的负数。...视图矩阵相机坐标系中的三个轴如示例图所示分别为相机 Y 轴（上方向）、相机 Z 轴（相机视线反方向）以及相机 X 轴（右方向）；在初始化相机时我们设置了相机的位置 P（p1，p2，p3）、相机的焦点...视口变换矩阵计算得到物体在投影面上的坐标之后，还需要进行最后一步操作，把投影面坐标转换为屏幕坐标，也被称为视口变换： ?

2.2K3 1

OpenGL ES 2.0 (iOS)：坐标空间与 OpenGL ES 2 3D空间

：每个物体的位置和方向摄像机的位置和方向世界的环境（如：地形）物体的运动（从哪到哪） 2....物体（模型）坐标系模型自身的坐标系，坐标原点在模型的某一点上，一般是几何中心位置为原点模型坐标系是会跟随模型的运动而运动，因为它是模型本身的 “一部份” ；模型内部的构件都是以模型坐标系为参考进而描述的...，总共就是四个变换过程：模型变换、视变换、投影变换、视口变换，经过这四个变换后，图形的点就可以正确并如愿地显示在用户屏幕上了；侧面反应，要正确地渲染图形，就要掌握这四种变换； 2....（如：苹果的移动设备都是是以左上角为坐标原点） w, h 要渲染的视口尺寸，单位是像素 glDepthRange void glDepthRange(GLclampf n, GLclampf f)...) 【完成图中 3】设置图形的视图区域，对于 3D 图形还可以设置 depth- range --> glViewport 、glDepthRange 第二次变换：视变换，世界空间到摄像机空间（

1.9K2 0

（一） 3D图形渲染管线

例如：你也许需要旋转、平移和缩放一个椅子的三维模型，以使椅子可以正确地放置在你的房间的世界坐标系统里。...视变换：从世界空间位置到眼空间位置的变换时视变换。典型的视变换结合了一个平移把眼睛在世界空间的位置移到眼空间的原点，然后适当地旋转眼睛。通过这样做，视变换定义了视点的位置和方向。...我们通常把分别代表建模和视变换的两个矩阵结合在一起，组成一个单独的被称为modelview的矩阵。你可以通过简单地用建模矩阵乘以视矩阵把它们结合在一起。...在本图中，两个三角形被光栅化了。整个过程从顶点的变换和着色开始。下一步，图元装配解读那从顶点创建三角形，如虚线所示。之后，光栅用片段填充三角形。最后，从顶点得到的值被用来插值，然后用于贴图和着色。...网格由顶点和索引组成，这个阶段就是根据索引将顶点链接到一起，组成线、面单元，然后进行剪裁，如果一个三角形超出屏幕以外，例如两个顶点在屏幕内，一个顶点在屏幕外，这时我们在屏幕上看到的就是一个四边形，然后把这个四边形切成两个小的三角形

1.6K3 0

详解CALayer的anchorPoint和position

继续扩展，很明显，白纸的旋转形态随图钉的位置不同而不同，图钉订在白纸的正中间与左上角时分别造就了两种旋转形态，这是由图钉（anchorPoint）的位置决定的。...然后再来看下面两张图，注意图中分iOS与MacOS，因为两者的坐标系不相同，iOS使用左手坐标系，坐标原点在左上角，MacOS使用右手坐标系，原点在左下角，我们看iOS部分即可。...答案是确定的，更确切地说，position是layer中的anchorPoint点在superLayer中的位置坐标。...：position与anchorPoint是处于不同坐标空间中的重合点，修改重合点在一个坐标空间的位置不影响该重合点在另一个坐标空间中的位置。...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.2K3 0

北京现代工厂案例：利用智能相机解决机器人精确抓取问题

图8 在现场，机器人有两个位置比较重要，一个是拍照位置，另一个是抓取位置，这两个位置都有固定坐标。对关键的图像定位问题，康耐视In-Sight 产品有其创新的解决方案。 1）得到基准模型图像。...机器人由拍照位置走到抓取位置，然后把缸体移到夹具正好能够正确抓到的位置，这个位置就是抓取的基准位置。固定好缸体后，机器人从抓取位置回到照相位置，然后进行拍照，得到的这张图像就可以作为基准模型图像。...2）得到两张抓取位置旋转某个角度的图像。...在得到基准模型图像后，机器人由拍照位置再走到抓取位置，抓住缸体逆时针或顺时针旋转某个角度（例如CCW-10 度或CW-10 度），然后松开缸体，再回到拍照位置进行拍照，得到第二张图像。...同样再按此步骤操作得到第三张图像。 3）得到这三张图像后，就可以在这三张图像上用PatMax 工具查找同一特征点，根据得到的三个点就可以拟合出一个圆，这个圆的圆心坐标就是机器人夹具的旋转中心。

8405 0

【笔记】《游戏编程算法与技巧》1-6

游戏对象可以大体分为三种: 需要更新状态也需要绘制的动态对象(如人物), 需绘制但是不需要更新状态的静态对象(如场景), 需要更新状态但无须绘制的工具对象(如摄像机和触发器) 三大游戏对象的程序实现可以通过抽象出...两个向量间的夹角可以由两个向量点乘后arccos得到二维向量可以简单判断旋转的方向, 先将向量的z设为0扩展为3维, 然后起点向量叉乘终点向量, 得到的叉乘向量z为正时代表顺时针, z为逆代表逆时针...同样按照坐标系基底变换的思路理解: 对物体的旋转相当于进行将原本的单位坐标系改为旋转后的坐标系, 因此我们只要手推xyz坐标轴旋转后的新坐标并以列向量的方式排列即可注意这里的y轴的旋转角度发生了反向..., 这个特性动手推一下就能够得到, 本质是因为与x和z轴的时候不同, 绕y轴旋转时, z的初始位置是(0, -1), 本质是手性带来的不对称性....将场景变换到相机坐标系所用的变换矩阵称为观察矩阵投影坐标系: 有时称视口坐标系. 将自定义的视体变为标准视体的过程, 变换后的原本自定义视体中的内容会变换到标准视体中.

4.4K3 1

【走进OpenCV】重映射与仿射变换

其中的 f 就是映射方式，也就说，像素点在另一个图像中的位置是由 f 来计算的。在OpenCV中，用的是remap函数实现重映射。...(x,y)点在原图中的x坐标（由map_x提供）与y坐标（由map_y提供）。...图像进行仿射变换后，有以下几个特点：二维图形之间的相对位置关系保持不变，平行线依旧是平行线，且直线上的点的位置顺序保持不变。...三种常见形式：旋转，rotation（线性变换）平移，translation（向量加）缩放，scale（线性变换）仿射变换本质是一个2* 3的矩阵M乘上原图的每个坐标，得到目标图的对应点坐标...2度、4度...45度的功能，并将这些旋转后的图像保存先来。

1.3K2 0

ios-anchorPoint、position理解

单位坐标的意思是指以视图长宽为单位来计算，坐标系展示如下：默认一个视图的锚点在(0.5,0.5)的位置，这也是我们使用transform属性时为什么会围绕视图中心点旋转的原因，下面我们将一个默认视图锚点改成...)后新位置计算方法 CGPoint newOrigin; CGRect oldFrame = allView.frame; newOrigin.x = oldFrame.origin.x...属性，position点的位置（也就是position坐标）根据锚点（anchorPoint）的值来确定，而当设置图层的position属性的时候，bounds的位置（也就是frame的orgin坐标）...说起来比较复杂，实际上运行一下项目就知道了这时候设置橘色视图逆时针旋转90°得到下图（由于此时锚点为左上角的点，所以围绕左上角旋转）：有时候有需求改变锚点但是要求frame不变，在改变锚点之后重新设置一下...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1K1 0

图像旋转即c++实现

图像旋转的变换公式。这个实际上很简单，主要是一些三角函数方面的推导： ? 假设(x1,y1)旋转a到达(x2,y2)，那么根据上图可以写出下面的式子： ? 展开： ? 替换，得到后向映射公式： ?...后向映射的主要思路：建立目标图。对于目标图中的每一点，映射到原图中的一个点，这个点可能是不存在的（比如小数坐标)，所以需要进行插值处理。插值重建目标图。...少写个f，以至于两个int相除肯定是不对的 int height = img.rows; int width = img.cols; //四个定点在旋转坐标系中的位置...abs(DstX2 - DstX3))+1; int DstHeight = max(abs(DstY1 - DstY4), abs(DstY2 - DstY3))+1; //旋转后的最合适的宽度和高度...后向映射找对应原图中的坐标(可能是小数，也是原点在中心) 映射后的点变换原点到原图左上角。插值，这里直接用的round取四舍五入，就是最邻近插值了。

1.4K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

WebGL简易教程(五)：图形变换(模型、视图、投影变换)

【笔记】《计算机图形学》(7)——观察

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

Android OpenGL开发实践 - 基于OpenGL ES 2.0的Android相机实时图片涂鸦实现思路

【愚公系列】2023年08月 WEBGL专题-3D基础

unity3d新手入门必备教程

OpenGL（五）-- OpenGL中矩阵的变换OpenGL（五）-- OpenGL中矩阵的变换

模型矩阵、视图矩阵、投影矩阵

重用地图的单目视觉惯导SLAM系统

OpenGL学习笔记（三）- 坐标系与顶点变换

模拟试题A

3D图形学线代基础

OpenGL ES 2.0 (iOS)：坐标空间与 OpenGL ES 2 3D空间

（一） 3D图形渲染管线

详解CALayer的anchorPoint和position

北京现代工厂案例：利用智能相机解决机器人精确抓取问题

【笔记】《游戏编程算法与技巧》1-6

【走进OpenCV】重映射与仿射变换

ios-anchorPoint、position理解

图像旋转即c++实现

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐