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

自定义控件详解(三):Canvas效果变换

这里学习一下Canvas 类的变换效果(平移,旋转等) 首先需要了解一下Canvas 画布, 我们用Canvas.DrawXXX()方法的时候并不是在一张画布上进行绘制。...,看看这个矩形是以平移前的画布左上角为原点还是以平移后的画布左上角为原点 paint.setColor(Color.BLUE); canvas.drawRect(200,200,500,400...,看看这个矩形是以平移前的画布左上角为原点还是以平移后的画布左上角为原点 paint.setColor(Color.BLUE); canvas.drawRect(200,200,500,400...,会发现这个蓝色矩形是在原状态画布上绘制的。...) 第一个构造函数直接输入旋转的度数,正数是顺时针旋转,负数指逆时针旋转,它的旋转中心点是原点(0,0) 第二个构造函数除了度数以外,还可以指定旋转的中心点坐标(px,py) Paint

91450
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android自定义系列——4.Canvas操作

    请注意,位移是基于当前位置移动,而不是每次基于屏幕左上角的(0,0)点移动,如下: // 省略了创建画笔的代码 // 在坐标原点绘制一个黑色圆形 mPaint.setColor(Color.BLACK...); canvas.translate(200,200); canvas.drawCircle(0,0,100,mPaint); // 在坐标原点绘制一个蓝色圆形 mPaint.setColor(Color.BLUE...默认的旋转中心依旧是坐标原点: // 将坐标系原点移动到画布正中心 canvas.translate(mWidth / 2, mHeight / 2); RectF rect = new RectF(...); canvas.rotate(180); // 旋转180度 旋转中心为原点 mPaint.setColor(Color.BLUE);...// 绘制蓝色矩形 canvas.drawRect(rect,mPaint); 改变旋转中心位置: // 将坐标系原点移动到画布正中心 canvas.translate(mWidth / 2, mHeight

    95340

    WPF 基础 2D 图形学知识

    在新建矩形的时候,采用了第一个点创建,如果没有传入点,将使用默认的原点 private Rect CreateRect(List pointList) {...以上代码放在 github 和 gitee 欢迎小伙伴访问 给定中心点和宽度高度旋转角度求旋转矩形顶点坐标 如有定义旋转矩形的顶点分别是 A B C D 四个点,在没有进行旋转之前如图 ?...以及一个点,求这个点是否在旋转矩形内 定义给定的点是 M 点,而旋转矩形顶点是 A B C D 点。在旋转矩形没有经过旋转的顶点如下 ?...其实在不在 WPF 中,影响都不大,如何判断一个点在旋转后的矩形中,只需要根据公式计算就可以 根据公式可以求出点是否在旋转矩形 (0<AM⋅AB<AB⋅AB)∧(0<AM⋅AC<AC⋅AC) 以上逻辑中的...从图片可以看到所有的向量都从 A 点出发,此时可以将 A 点设置为原点,如果此时的 M 是在矩形外,如认为是在如下图的左边,那么此时向量相乘的值就会是负数,因为相对于 A 作为原点 ?

    91510

    4.4.2 OpenGL几何变换编程实例

    ,参数:旋转轴(由点p1和p2定义)和旋转角度(thetaDegrees)*/ void rotate3D (wcPt3D p1, wcPt3D p2, GLfloat thetaDegrees).../*通过平移-旋转-平移复合变换序列完成任意轴的旋转(注意OpenGL中的反序表示)*/ glTranslatef (p1.x, p1.y, p1.z); //③移动p1到原始位置 /*②关于通过坐标原点的坐标轴旋转.../* ① 移动固定点到坐标原点*/ glTranslatef (-fixedPt.x, -fixedPt.y, -fixedPt.z); } void displayFcn (void)...清空变换矩阵为单位矩阵,恢复原始坐标系环境 /* 显示变换前几何对象 */ glColor3f(0.0,0.0,1.0); // 设置前景色为蓝色 glRecti(50,100,200,150); //显示蓝色矩形.../* 显示变换后几何对象 */ glColor3f(1.0,0.0,0.0); //重新设置前景色为红色 glRecti(50,100,200,150); //显示红色矩形(变换后) glFlush

    79120

    在编程中发现数学之美——使用python和Processing绘制几何图形

    在传统的几何数学中,原点一般在图像的中心位置。 ? 然而在计算机图形中,坐标系统与传统的几何系统不一样。计算机图形系统中的原点,在屏幕的左上角,x和y随着屏幕向右向下而增加。 ?...注意原点仍然被标记为(0,0),实际上我们并没有移动原点,只是移动了整个坐标系,这样把原点移动到屏幕中央来了。 使用rotate旋转对象 在几何中旋转表示将一个物体围绕着一个中心转动。...上面的代码表示围绕着原点旋转坐标系20度,这儿的原点在窗口的左上角。下面的图形首先移动原点到窗口中心,然后旋转20度。 Rotate函数使在圆上绘制对象变得很容易: 移动原点,到你想要画的圆的圆心。...接下来我们试着旋转每个单独的方块。 旋转单独的方块 因为在processing中旋转是围绕着原点的,在循环中我们需要首先移动到我们需要旋转的方块,然后旋转,最后绘制这个方块。...围绕原点旋转 前面的代码能够正常的工作,但是这个旋转看上去有点奇怪。这是因为processing默认定位矩形是定位在它的左上角,旋转也是围绕着左上角。

    6.9K11

    Qt坐标绘图

    (0,0)绘制了一个长、宽都是100像素的绿色矩形,然后在点(-50,-50)绘制了一个同样大小(长、宽均为100像素)的红色矩形,只能看到红色矩形的一部分。...这是因为在点(-50,-50)绘制的长、宽各100图形的其它3/4均被窗体遮挡了。 2.    坐标系变换。...因为默认的rotate()函数是以原点为中心进行顺时针旋转的,所以我们要想使其以其他点为中心进行旋转,就要先进行原点的变换。...这里的painter.translate(100,100)将(100,100)设置为新的原点,想让直线以其为中心进行旋转,可是你已经发现效果并非如此。是什么原因呢?...我们加的一句代码为painter.rotate(-30),这是因为前面已经将坐标旋转了30度,我们需要将其再旋转回去,才能是以前正常的坐标系统。

    2K30

    实验4 二维几何变换

    向量v=(vx,vy,vz)的分量可以是任意的实数值,该向量用于定义通过坐标原点的旋转轴的方向,后缀为f(单精度浮点float)或d(双精度浮点double),对于二维旋转来说,vx=0.0,vy=0.0...sx,sy,sz指定这个缩放物体的矩阵,分别表示在x,y,z方向上的缩放比例,它们可以是任意的实数值,当缩放参数为负值时,该函数为反射矩阵,缩放相对于原点进行,后缀为f(单精度浮点float)或d(双精度浮点...ALPHA角度 glTranslatef(-cx,-cy,0); //平移回原点 drawSquare(); 图形绕任意点缩放方法的代码只需把旋转函数换为缩放函数即可,不再赘述。.../设置显示的范围是X:-5.0~5.0, Y:-5.0~5.0 glMatrixMode (GL_MODELVIEW); } void drawSquare(void) //绘制中心在原点.../设置显示的范围是X:-5.0~5.0, Y:-5.0~5.0 glMatrixMode (GL_MODELVIEW); } void drawSquare(void) //绘制中心在原点

    1.1K20

    opencv 7 -- 边界矩形

    有两类边界矩形 一、直边界矩形—boundingRect() 一个直矩形(就是没有旋转的矩形)。它不会考虑对象是否旋转。 所以边界矩形的面积不是最小的。...这个边界矩形是面积最小的,因为它考虑了对象的旋转。...,长宽,旋转角度[-90,0),当矩形水平或竖直时均返回-90 最小外接矩形的4个顶点顺序、中心坐标、宽度、高度、旋转角度(是度数形式,不是弧度数)的对应关系如下: ?...注意:旋转角度θ是水平轴(x轴)逆时针旋转,与碰到的矩形的第一条边的夹角。并且这个边的边长是width,另一条边边长是height。...也就是说,在这里,width与height不是按照长短来定义的 在opencv中,坐标系原点在左上角,相对于x轴,逆时针旋转角度为负,顺时针旋转角度为正。在这里,θ∈(-90度,0]

    1.9K20

    Android自定义View【实战教程】5⃣️---Canvas详解及代码绘制安卓机器人

    默认情况下,绘图坐标系与Canvas坐标系完全重合,即初始状况下,绘图坐标系的坐标原点也在View的左上角,从原点向右为x轴正半轴,从原点向下为y轴正半轴。...: @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //未平移 在原点...sy); /** * 在X轴方向放大为原来sx倍,Y轴方向方大为原来的sy倍 * 参数1: X轴的放大倍数 * 参数2: Y轴的放大倍数 * 参数3: 原点X坐标 * 参数4: 原点...Y坐标 */ canvas.scale(float sx, float sy, float px, float py); Canvas旋转 /** * 原点为中心,旋转degrees度(顺时针方向为正方向...圆角矩形 /** * 参数1:矩形 * 参数2:x半径 * 参数3:y半径 * 参数4: 画笔 */ drawRoundRect(@NonNull RectF rect,

    1.5K20

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

    本文长度为2722字,预计阅读8分钟 前言 原来的文章《C++ OpenCV透视变换改进---直线拟合的应用》,通过RotatedRect旋转矩形获取到透视变换的4个点,再进行透视变换。...微卡智享 在RotatedRect成员函数中,points()函数求矩形的4个顶点;原来4个顶点在图形中的对应关系,可以看下图: ?...Opencv采用通用的图像坐标系,左上角为原点O(0,0),X轴向右递增,Y轴向下递增,单位为像素。 矩形4个顶点位置的确定,是理解其它各变量的基础,其中p[0]点是关键。...通俗的说就是RotatedRect的坐标点,Y轴最大的为P[0],p[0]围着center顺时针旋转, 旋转角度为负的话即是P[0]在左下角,为正P[0]是右下角 所以根据这个情况,我们要计算透视变换的点时就要对这个点进行重新排序..., //旋转角度为负的话即是P[0]在左下角,为正P[0]是右下角 //重新排序坐标点 if (rect.angle > 0) { curpoint = vetPoints[0

    3K20

    HTML5(六)——Canvas 高级操作

    eg:绘制两个一样的矩形,一个在平移前绘制,一个在平移后绘制,代码如下: var canvas = document.getElementById("canvas") var ctx = canvas.getContext...eg:将一个矩形旋转45度,代码如下: var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d")...,默认原点是画布的起始点,我们想要的旋转是在矩形框中心为原点的旋转,此时我们需要借助上translate平移,重置一下原点,修改上述代码为: 在画布上放置图像的位置。 dirtyY 可选。水平值(y),以像素计,在画布上放置图像的位置。 dirtyWidth 可选。在画布上绘制图像所使用的宽度。...在画布上绘制图像所使用的高度。 通过 getImageData 复制的指定矩形像素数据,编辑之后,通过 putImageData 方法将图像数据放回画布上。

    1.4K30

    WPF 使用 TranslatePoint 换算元素之间相对坐标

    在 WPF 中的布局模型里面,可以将每个元素都认为是矩形。...而每个矩形都可以将自己的左上角作为原点建立坐标,不同的矩形之间的坐标原点不相同,当这些用矩形表达的元素进行系列的旋转和平移等之后,如何将以某个元素的矩形左上角为原点的坐标换算为另一个元素的矩形左上角为原点的坐标...只要在相同的视觉树上面,所有的元素的矩形范围都能通过矩阵计算换算出来,在 WPF 和 UWP 里面都在每个元素提供了 TranslatePoint 方法,这个方法的作用就是用当前元素的左上角为原点的坐标换算为这个点在传入的元素的坐标...其实这个问题可以转换为求在矩形坐标中,点(0,0)在 Canvas 上的值是多少 因为求一个元素相对于另一个的元素的坐标,也就是求元素左上角所在另一个元素的坐标,而一个元素的左上角就是通过以元素的左上角为原点的坐标也就是点...其实小伙伴可以尝试画两个矩形,在其中一个矩形里面点一个点,然后求这个点在使用另一个矩形的左上角作为原点时的坐标,这是一道特别简单的初中数学 ? 本文代码放在github欢迎小伙伴访问 ----

    1.1K10

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

    ,但是显然不是我们要的旋转,我们要的是矩形以自身中心进行旋转,动图里明显不是,这其实是因为canvas画布的rotate方法是以画布原点为中心进行旋转的,所以绘制矩形时需要再移动一下画布原点,移动到自身的中心...,然后再进行绘制,这样旋转就相当于以自身的中心进行旋转了,不过需要注意的是,原点变了,矩形本身和激活状态的相关图形的绘制坐标均需要修改一下: class Rectangle { render()...矩形旋转后会发现一个问题,我们明明鼠标点击在进行的边框上,但是却无法激活它,矩形想摆脱我们的控制?...它想太多,原因其实很简单: 虚线是矩形没有旋转时的位置,我们点击在了旋转后的边框上,但是我们的点击检测是以矩形没有旋转时进行的,因为矩形虽然旋转了,但是本质上它的x、y坐标并没有变,知道了原因解决就很简单了...,我们不妨把鼠标指针的坐标以矩形中心为原点反向旋转矩形旋转的角度: 好了,问题又转化成了如何求一个坐标旋转指定角度后的坐标: 如上图所示,计算p1以O为中心逆时针旋转黑色角度后的p2坐标,首先根据p1

    3.8K31

    常用数据增广方法,解决数据单一问题

    学习目标 了解几何变换的概念与应用 理解平移、旋转的原理 掌握在OpenCV框架下实现平移、旋转操作 向前映射与向后映射 1....而对于旋转和偏移,一般是以图像中心为原点,那么这就涉及坐标系转换了。 我们都知道,图像坐标的原点在图像左上角,水平向右为 X 轴,垂直向下为 Y 轴。...在图像中我们的坐标系通常是AB和AC方向的,原点为A,而笛卡尔直角坐标系是DE和DF方向的,原点为D。...如图:ABCD是变换前矩形,EFGH是变换后的矩形,变换的矩阵表示为: 即表达式为: 所以,要算旋转后图片的大小,只需计算原图像四个顶点变换后的图像所确定的外接矩形长宽。...因为经过坐标变换后的图像是关于原点对称的,所以计算D点变换后的横坐标的绝对值乘2,就是变换后矩形的长,计算A点变换后的纵坐标的绝对值乘2,就是变换后矩形的宽。

    2.4K10
    领券