开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何用D3js求平面矩形旋转后的x，y坐标？

D3.js是一个用于数据可视化的JavaScript库，它提供了丰富的功能和工具，可以帮助开发者创建各种交互式图表和可视化效果。在D3.js中，可以使用矩阵变换来实现平面矩形的旋转，并计算旋转后的x和y坐标。

要求平面矩形旋转后的x，y坐标，可以按照以下步骤进行：

创建一个SVG容器：首先，需要在HTML文档中创建一个SVG容器，用于显示矩形和旋转后的结果。可以使用D3.js提供的d3.select方法选择一个DOM元素，并使用append方法添加一个SVG元素。

var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

创建矩形：使用append方法添加一个矩形元素，并设置其初始位置和大小。

var rect = svg.append("rect")
              .attr("x", rectX)
              .attr("y", rectY)
              .attr("width", rectWidth)
              .attr("height", rectHeight)
              .attr("fill", rectColor);

定义旋转变换：使用D3.js提供的d3.transform方法创建一个旋转变换，并设置旋转角度和中心点。

var rotation = d3.transform()
                 .rotate(angle, centerX, centerY);

应用旋转变换：将旋转变换应用到矩形元素上，使用attr方法设置transform属性。

rect.attr("transform", rotation);

计算旋转后的坐标：使用D3.js提供的d3.transform方法获取旋转后的矩形的变换矩阵，并通过矩阵运算计算旋转后的x和y坐标。

var matrix = rotation.toString();
var transformedPoint = d3.transform(matrix).translate(rectX, rectY);
var rotatedX = transformedPoint.translate[0];
var rotatedY = transformedPoint.translate[1];

最终，rotatedX和rotatedY即为平面矩形旋转后的x和y坐标。

D3.js是一个功能强大且灵活的数据可视化库，适用于各种场景，包括数据分析、仪表盘、地理信息系统等。腾讯云也提供了一系列与数据可视化相关的产品和服务，例如云图表（Cloud Charts）和云数据仪表盘（Cloud Data Dashboard）。您可以通过访问腾讯云官网了解更多相关产品和服务的详细信息。

参考链接：

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

WPF 基础 2D 图形学知识

var cy = h / 2; var dx = bx; var dy = cy; var a = 已知未旋转的相对矩形中心点的坐标求旋转后的相对于零点的坐标...(ax, ay, position, rotation); var b = 已知未旋转的相对矩形中心点的坐标求旋转后的相对于零点的坐标(bx, by, position, rotation...); var c = 已知未旋转的相对矩形中心点的坐标求旋转后的相对于零点的坐标(cx, cy, position, rotation); var d =...已知未旋转的相对矩形中心点的坐标求旋转后的相对于零点的坐标(dx, dy, position, rotation); return new 旋转矩形(a, b, c, d);.../// /// 旋转后的相对于零点的坐标 private static Point 已知未旋转的相对矩形中心点的坐标求旋转后的相对于零点的坐标

8691 0

3D图形学线代基础

介绍了叉乘的几何意义以及一些基础性质，接下来求叉乘的具体计算规则，即已知 A 点坐标（x1，y1，z1），B 点坐标（x2，y2，z2）求 OA 向量和 OB 向量叉乘的结果 OC 向量的具体坐标。...上图中我们把 OA 向量以原点 O 为基准点逆时针旋转 θ 度得到 OB 向量，已知 A 点坐标为（x1，y1），求 B 点坐标（x2，y2）。...A 点坐标（x1，y1）表示为（x1*w，y1*w，w）形式后随着 w 取值的变化有无数种形式，这些都是 A 点坐标（x1，y1）的齐次坐标。...还是一样的问题 OA 向量沿着 X 轴正方向平移一定距离 m 得到 CB 向量，已知 A 点坐标为（x1，y1），求 B 点坐标（x2，y2）。...接着进行旋转变换，让 U 向量变为 Y 向量，F 向量变为 Z 向量，S 向量变为 X 向量；可以先求该旋转变换的逆变换，即 Y 向量变为 U 向量，Z 向量变为 F 向量，X 向量变为 S 向量，基向量变换矩阵由变换后的基向量组合而成

2K3 1

碰撞检测的向量实现

对于自由向量，将向量的起点平移到坐标原点后，向量就可以用一个坐标系下的一个点来表示，该点的坐标值即向量的终点坐标。...h，还有根据中心的旋转角度rotation export class Rect{ // x,y是矩形中心的坐标 w是宽 h是高 rotation是角度单位deg constructor(x=0,...矩形中心到圆心向量为是CP 反向旋转θ度得向量CP' 然后根据向量得三角形定律得OP' = OC + CP' 后面就代入矩形是轴对称的公式进行计算 class Rect{ // x,y是矩形中心的坐标..._rotation); } // 计算上旋转后的对称轴X get axisY(){ return this.rotation % 360 === 0 ? this...._rotation); } // 计算上旋转后的对称轴Y get _vertexs(){ return [this._A1,this._A2,this._A3,this.

1.5K1 0

AS3 2D转3D【算法】

FLASH只是有二维的坐标.怎么把三维坐标转换成二维坐标: （一）.公式给定点：(x,y,z) 绕x轴旋转后的点(x1,y1,z1) 绕y轴旋转后的点(x2,y2,z2) ...绕z轴旋转后的点(x3,y3,z3) 　1.x旋转(x不变)：　x1=x 　y1=y*cosb+z*sinb 　z1=z*cosb-y*sinb 2.y旋转(y不变)：　x2=x*cosb-z...如上图，已知一个点(x,y,z),利用三角形相似的原理，可以得出下列结论：　　d/(d+z)=y1/y,推出：y1=d*y/(d+z)，可在二维平面上来表现空间上的点的位置。进一步把它简化。...总结如下：给定点：(x,y,z) 绕x轴旋转后的点(x1,y1,z1) 绕y轴旋转后的点(x2,y2,z2) 绕z轴旋转后的点(x3,y3,z3) 　x旋转(x不变) 　x1=x 　y1=y*cosb-z...(z不变) 　x3=x*cosb-y*sinb 　y3=y*cosb+x*sinb 　z3=z 　　从以上公式可看出，在flash要实现旋转，先要求x轴的旋转点，再求y轴的旋转点，最后再求出z轴的旋转点

7361 0

OpenGL坐标系及坐标转换

需要注意的是，如果对物体模型进行缩放操作，则局部坐标系也要进行相应的缩放，如果缩放比例在案各坐标轴上不同，那么再经过旋转操作后，局部坐标轴之间可能不再相互垂直。...1、模型平移 glTranslate{fd}(TYPE x,TYPE y,TYPE z); 该函数用指定的x,y,z值沿着x轴、y轴、z轴平移物体（或按照相同的量值移动局部坐标系）。...2、模型旋转 glRotate{fd}(TYPE angle,TYPE x,TYPE,y,TYPE z); 该函数中第一个变量angle制定模型旋转的角度，单位为度，后三个变量表示以原点（0,0,0）...到点(x,y,z)的连线为轴线逆时针旋转物体。...3、模型缩放 glScale{fd}(TYPE x,TYPE y,TYPE z); 该函数可以对物体沿着x,y,z轴分别进行放大缩小。函数中的三个参数分别是x、y、z轴方向的比例变换因子。

4.2K7 0

OpenCV旋转矩形RotatedRect的Points函数遇到的问题

微卡智享在RotatedRect成员函数中，points()函数求矩形的4个顶点；原来4个顶点在图形中的对应关系，可以看下图： ?...Opencv采用通用的图像坐标系，左上角为原点O(0,0)，X轴向右递增，Y轴向下递增，单位为像素。矩形4个顶点位置的确定，是理解其它各变量的基础，其中p[0]点是关键。...顶点p[0]的位置可以这样理解：如果没有对边与Y轴平行，则Y坐标最大的点为p[0]点，如矩形(2)(3)(4)；如果有对边与Y轴平行，则有两个Y坐标最大的点。此时，左侧的点为p[0]点。...如矩形(1)。...跟踪输出后的结果从上图中可以看到按原来的原理，P0点应该是左下角，结果输出的P0点为左上角，后来我又换了几张图测试后发现，RotatedRect的坐标点，原来说的是Y轴最大的为P[0]，现在实际输出后变为

2.6K2 0

ACM计算几何篇_acm数学

（O(nlogn)） 7 旋转卡壳（O(nlogn)解决平面最远点对） 8 三点确定外接圆圆心坐标 https://linxi99.gitee.io/20190211/ACM计算几何篇/ 1 前言 1.1...，既可以从左向右与 y y y轴平行的直线，也可以固定射线的端点逆时针转动 4.2 例题：矩形面积并 4.2.1 题目描述给出 n n n个矩形的左下角和右上角的坐标，求矩形面积的并【输入格式】...第 2 2 2到 n + 1 n + 1 n+1行，每行包含四个浮点数，表示该矩形左下角与右上角的坐标【输出格式】矩形面积交的大小【输入样例】　　2 　　10 10 20 20 　　5 15...首先，矩形比较多，坐标也很大，所以横坐标需要离散化（纵坐标不需要离散化） //不离散化直接线段树维护也可以考虑一条扫描线，从最下方竖直向上扫描扫描前我们需要保存好矩形的上下边，并且按照高度进行排序...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.3K2 0

前端-一个拖拽框背后的高中数学

缘起最近我在维护一个用于平面设计的编辑器项目。在编辑器的画布上，图片是支持拖拽、旋转和裁切的，像这样： ? 为了保证图片裁切后始终可见，我们需要限制用户的拖拽范围。...高中数学的坐标系概念给了我灵感：一个点的位置，在多个不同的坐标系中可以有不同的表示。这样一来对于旋转后的图片，只要我们将坐标系随之旋转，那么在旋转后的坐标系中，计算拖拽限制应当就不是一件难事了。...这套新思路可以总结为这样的算法： 1、当图片矩形存在旋转角 θ 时，我们将拖拽事件的 dx 和 dy 偏移量映射到和原始坐标系夹角 θ 的新直角坐标系上。...但是如果刚好旋转了 90 度或 180 度，这时的变换就十分简单，像这样： x' = yy' = -xx = -y'y = -x' 这显然非常容易通过小修小改现有代码的方式来实现。...[捂脸] 改了改以后答案变成了这样（求忽略不支持 LaTeX 的丑陋写法）： | x' | = | cosθ sinθ | | x || y' | | -sinθ cosθ | | y || x

5572 0

C++ OpenCV透视变换改进---直线拟合的应用

微卡智享 # 步骤 1 旋转矩形的点和上一步获取的最近点设置一个阈值距离，在距离内的都列入当前区域的直线拟合点，超过阈值的用最近点加上阈值重新算为计算点来进行拟合 2 根据不同区域计算直线拟合 3 求到的直线拟合点实现每两条求交点...先以左边区域为例，首先我们设定了一个距离为15的阈值，白色的是我们上一篇中求到的最近的点（点1和2），蓝色为最小旋转矩形的角点（点3和4），我们通过计算点1到点3的距离，还有点2到点4的距离都小于15，...上图中可以看到，右下的区域点在阈值范围内是无问题了，右上的旋转矩形角点（点4）与最近点（点2）距离挺远，肯定超出阈值了，如果还把点4也加入到拟合点计算的话，直线会多出来不少，所以我们就在根据（点2）的坐标...方程式：y－y1=k（x－x1）其中（x1，y1）为坐标系上过直线的一点的坐标，k为该直线的斜率。推导：若直线L1经过点P1（x1，y1），且斜率为k，求L1方程。...4个点，不过个别图中会矩形特别大，整个透视变换后的拉伸有点太夸张了，所以这里我们改了方法，先求出最小旋转矩形中最左和最上的坐标，然后计算出最小旋转矩形的长和高，来定义一个新的矩形进行透视变换。

1.4K1 0

相机标定

一、基本知识齐次坐标把维数为n维的向量用一个n+1维向量来表示（如x，y，z转换为x，y，z，w），齐次坐标有以下性质：以齐次坐标表表示的点，若该坐标内的数值全乘上一相同非零实数，仍会表示该点；...旋转矩阵和平移变量向量在三维坐标的旋转可以通过\vec{b}=R\vec{a}实现，其中R为针对三个坐标轴的旋转矩阵的乘积：R=R_zR_yR_x，即分别绕x、y、z轴旋转α、β、θ的角度。...因此，如果存在切向畸变，一个矩形被投影到成像平面上时，很可能会变成一个梯形。...为了将世界坐标系的坐标(x,y,z)转换为像素坐标系的坐标(u,v)，我们可以经过以下的转换： 1、世界坐标系->相机坐标系我们想要得到X_w\rightarrow X_c的转换，可以直接通过平移与旋转实现...但是为了在数学上更方便描述，我们将图像平面以焦点为轴进行180°的旋转，得到下图所示的坐标系：此时，假设相机坐标系中有一点M，则在理想图像坐标系下的成像点P的坐标为（可由相似三角形原则得出）： x_p

2.4K3 0

（8.3）James Stewart Calculus 5th Edition：Applications to Physics and Engineering

则需要考虑2个方向的平衡也就是 y轴系统的瞬时质量， x轴（方向）瞬时质量【y轴系统就和上面那个rod杆子一样， x轴系统，可以旋转90度理解】 ? ?...这个时候，如果对应的中心点为 ? 则有： ? ---- 例子3 ? 这个时候，我们只通过 Mx My ，再去求即可： ? 总质量为： ? 分别求出中心点坐标， ?...这个时候，对应第i个小矩形， x的中点为： ? 对应的面积为： ? 对应的质量为： ? 我们先来看一下 y轴的系统（我们知道y轴系统，需要看x值）所以 ?...我们可以知道，它们的交点为(0,0) 和 (1,1) 首先，我们还是先求面积A ? 再分别求出 x ， y 方向的中点： ? ?...大体也就是：一个面围绕一条直线旋转，形成一个体积V 这个时候，那个面的面积为A，旋转后对应面中心点移动的距离为d 则， V = Ad 简单证明第6章，我们简单有一个公式 ?

4874 0

opencv常用函数

本文主要介绍：Opencv常用函数，如均值、最大最小、归一化、滤波、旋转、求连通域等函数。...//Mat其他操作 exp(I,I); //矩阵自然指数 cartToPolar(X, Y, Grad, Angle); //由x y 方向变化量求梯度和角度 normalize(img, img, 1.0...高度) img(rect).copyTo(Img2) //拷贝矩形区域 2.利用Range img.copyTo(dstImg(Range(y1,y2),Range(x1,x2)));//起点从0开始...Rect boundingRect(InputArray points) minAreaRect //旋转的外包络矩形 RotatedRect minAreaRect(InputArray points...x坐标 int roiY = maxLength/2 - Height/2;//ROI矩形左上角的y坐标 inImg.copyTo(extImg(Range(roiY, roiY+Height

1K4 1

android matrix 最全方法详解与进阶（完整篇）

我们的屏幕，就像是一个窗口，透过它，我们看到了屏幕后面的世界，那里面有各种物体，我们看到的是映射在x，y平面上的一个投射图像。...所以这里对应的像素描述由一个3行一列的矩阵来表示： x，y分别代表x，y轴上的坐标，而1代表屏幕在z轴上的坐标为默认的。如果将1变大，那么屏幕会拉远，图形会变小。...sinValue：对应图中的sin值 cosValue：对应cos值 px:中心的x坐标 py：中心的y坐标看一个示例,我们把图像旋转90度，那么90度对应的sin和cos分别是1和0。...至少有一边和目标矩形重叠。左上对齐。 CENTER: 保持坐标变换前矩形的长宽比，并最大限度的填充变换后的矩形。至少有一边和目标矩形重叠。...END:保持坐标变换前矩形的长宽比，并最大限度的填充变换后的矩形。至少有一边和目标矩形重叠。右下对齐。

8821 0

C++ OpenCV检测并提取数字华容道棋盘

# 实现思路 1 图像预处理后进行边缘检测 2 查找到最大的轮廓并且是4边形的轮廓 3 将查找到的轮廓获取到最小旋转矩形进行透视变换 4 提取出透视变换后的图像显示出来代码实现 ?...= 4) continue; //求出最小旋转矩形 RotatedRect rRect = minAreaRect(contours[i]); //更新最小旋转矩形中面积最大的值...03 取出旋转矩形透视变换并提取上一步找到符合条件的最大轮廓的编号后，我们单独对这个轮廓进行处理，处理的方式就是《C++ OpenCV透视变换改进---直线拟合的应用》篇中透视变换的改进-----采用直线拟合的方式...left = newPoints[i].x; if (top > newPoints[i].y) top = newPoints[i].y; }...上图中根据最小外接矩形找到最近的点进行直接拟合，然后再做透视变换 ? 透视变换后的图像效果 ? 最后在提取出透视变换后我们实际需要的部分 ?

1K2 0

附加实验2　OpenGL变换综合练习

需要注意的是，如果对物体模型进行缩放操作，则局部坐标系也要进行相应的缩放，如果缩放比例在案各坐标轴上不同，那么再经过旋转操作后，局部坐标轴之间可能不再相互垂直。...二、OpenGL中的几种变换 OpenGL中的各种转换是通过矩阵运算实现的，具体的说，就是当发出一个转换命令时，该命令会生成一个4X4阶的转换矩阵（OpenGL中的物体坐标一律采用齐次坐标，即(x, y...x,TYPE y,TYPE z); （三）投影变换经过模型视景的转换后，场景中的物体放在了所希望的位置上，但由于显示器只能用二维图象显示三维物体，因此就要靠投影来降低维数（投影变换类似于选择相机的镜头...其中近裁剪平面是一个矩形，矩形左下角点三维空间坐标是（left，bottom，-near），右上角点是（right，top，-near）；远裁剪平面也是一个矩形，左下角点空间坐标是（left，bottom...函数参数(x, y)是视口在屏幕窗口坐标系中的左下角点坐标，参数width和height分别是视口的宽度和高度。

1.4K3 0

相机标定(Camera calibration)

简介摄像机标定(Camera calibration)简单来说是从世界坐标系换到图像坐标系的过程，也就是求最终的投影矩阵 P P P 的过程，下面相关的部分主要参考UIUC的计算机视觉的课件（网址Spring...f f 表示focal length，即相机的焦距；像平面上的 x x x 和 y y y 坐标轴是与相机坐标系上的 X X X 和 Y Y Y 坐标轴互相平行的；相机坐标系是以 X X...（m）；图像坐标系一般指图片相对坐标系，在这里可以认为和像平面坐标系在一个平面上，不过原点是在图片的角上，而且度量值为像素的个数（pixel）；相机转换到像平面知道上面的简单知识后，如果知道相机坐标系中的一个点...X X X（现实三维世界中的点），在像平面坐标系对应的点是 x x x，要求求从相机坐标系转为像平面坐标系的转换，也就是从 X X X 点的 ( X , Y , Z ) \begin{pmatrix...）( R R R 旋转缩放矩阵， t t t 为平移矩阵， X X X 为原向量， x x x 为变换后的向量)。

1.1K4 0

图形编辑器开发：一些会用到的简单几何算法

计算旋转后的点是很常见的需求。常见使用场景：计算包围盒旋转后的坐标，绘制缩放控制点；计算光标位置是否落在一个旋转的矩形上，因为旋转的矩形并不是一个正交的矩形，计算出来后判断有点复杂。...所以通常我们会将光标给予矩形的中点反过来旋转一下，然后判断点是否在矩形中。用到三角函数算法。...>= rect.y && point.x <= rect.x + rect.width && point.y <= rect.y + rect.height ); } 多个矩形组成的大矩形...计算 [x - cx, y - cy] 和 [0, -1] 两个向量夹角的算法实现： /** * 求向量到右侧轴(x正半轴)的夹角 * 范围在 [0, Math.PI * 2) */ export...相关阅读，几何算法：矩形碰撞和包含检测算法在容器内显示图片的五种方案：contain、cover、fill、none、scale-down 计算机图形学：变换矩阵求向量的角度图形编辑器开发

2332 0

模拟试题C

（） A）平移变换不改变图形大小和形状，只改变图形位置； B）错切变换虽然可引起图形角度的改变，但不会发生图形畸变； C）旋转变换后各图形部分间的线性关系和角度关系不变，变换后直线的长度不变...（） A）局部坐标系 B）设备坐标系 C）用户坐标系 D）平面直角坐标系 10....在三维旋转变换中，关于x轴旋转π/2时变换特点描述正确的是( ) A）y′= –z B）y′= z C）y坐标不变 D) x、y、z坐标都不变 13....要求写出每一步递推过程的x，y坐标及判别式d的值，最后图示直线结果。（6分） 2．如图B.15所示，求经过透视投影变换后点P(1, 2, 3)的坐标。...（7分） 4．已知三角形ABC各顶点的坐标A（1,2）、B（5,2）、C（3,5），相对直线y-x-1=0作对称变换,请写出变换的步骤和每一步变换的矩阵。

2K3 0

C++ 离散化算法

7 5 1 3 4 6 7 8 输出样例： 8 0 5 问题解析：坐标轴上，每一个x坐标位置对应一个值，求在x坐标系上一个区间内所有x坐标上值的和。...因为坐标轴以原点0对称，数组的行表示x坐标的绝对值，列表示方向，0表示向左，1表示向右。比如修改坐标3的值为8。可用arr[3][1]=8存储。如修改坐标-3的值为9，可用arr[3][0]=9存储。...给定平面上n个点的坐标，求能够覆盖所有这些点的最小矩形面积。...试想，如果每条边上都只有一个点，则我们总可以把这个矩形旋转一点使得这个矩形变“松”，从而有余地得到更小的矩形。于是我们发现，矩形的某条边的斜率必然与某两点的连线相同。...给定平面上的n个矩形（坐标为整数，矩形与矩形之间可能有重叠的部分），求其覆盖的总面积。平常的想法就是开一个与二维坐标规模相当的二维Boolean数组模拟矩形的“覆盖”（把矩形所在的位置填上True）。

1541 0

PDF标准详解（三）—— PDF坐标系统和坐标变换

这次我们仍然以它为切入点，来了解PDF的坐标系统以及坐标变换的相关知识图形学中二维图形变换中学我们学习了平面直角坐标系，x轴沿着水平方向从左往右递增，Y轴沿着竖直方向，从下往上坐标递增。...下面我们来介绍基本的2D图形变换平移假设一个点原始坐标是(x1, x2)，那么沿着x轴平移a，y轴平移b，那么平移之后点的坐标为 (x1 + a, x2 + b) ，转换成矩阵就是 \begin{...我们将一个长宽都为100 的矩形在 (200, 200) 位置逆时针旋转45° 绕任意点旋转，可以先将该点移动到坐标原点，然后按照坐标原点的进行旋转的公式进行计算，最后再将坐标点平移回原来的位置。...100 re S %原始矩形 0.7 0.7 -0.7 0.7 200 -80 cm%进行坐标变换 200 200 100 100 re S %变换后的矩形 400 400 100 100 re S %...100 re S %变换后的矩形 Q 400 400 100 100 re S % 这个矩形是相对于 (400, 400) 这个点旋转了45°的矩形 endstream % 流结束 endobj

3621 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭