【JS图形学基础】二维图形学的变换

mozillazg 发布于2019-08-22 15:56 / 2596人阅读

摘要：计算机图形学中的应用非常广泛的变换是一种称为仿射变换的特殊变换，在仿射变换中的基本变换包括平移旋转缩放剪切这几种。表示缩小，表示放大错切图像错切变换在图像几何形变方面非常有用，常见的错切变换分为方向与方向的错切变换。

二维图形学的变换

使用过前端的css3，canva,svg的小伙伴应该对平移，旋转，缩放，剪切这些效果变换应该很熟悉了，但应该大部分小伙伴应该不清楚其中的原理，在二维图形方面如果能熟练使用图形学的基础算法，结合canva,svg会有意想不到的惊喜。

计算机图形学中的应用非常广泛的变换是一种称为仿射变换的特殊变换，在仿射变换中的基本变换包括平移、旋转、缩放、剪切这几种。

平移

设某点向x方向移动dx,y方向移动dy ,[x,y]为变换前坐标,[X,Y]为变换后坐标。
则

 X = x+dx;  Y = y+dy;

以矩阵表示：

旋转

首先要明确旋转在二维中是绕着某一个点进行旋转，三维中是绕着某一个轴进行旋转。二维旋转中最简单的场景是绕着坐标原点进行的旋转，如下图所示：

如图所示点v 绕原点旋转θ角，得到点v’，假设 v点的坐标是(x, y) ，那么可以推导得到 v’点的坐标（x’, y’)，设原点到v的距离是r，原点到v点的向量与x轴的夹角是ϕ

x=rcosϕy=rsinϕ
 
x′=rcos(θ+ϕ)y′=rsin(θ+ϕ)

通过三角函数展开得到

x′=rcosθcosϕ−rsinθsinϕ
 
y′=rsinθcosϕ+rcosθsinϕ

带入x和y表达式得到

x′=xcosθ−ysinθ
 
y′=xsinθ+ycosθ

写成矩阵的形式是：

尽管图示中仅仅表示的是旋转一个锐角θ的情形，但是我们推导中使用的是三角函数的基本定义来计算坐标的，因此当旋转的角度是任意角度（例如大于180度，导致v’点进入到第四象限）结论仍然是成立的。

绕任意点的二维旋转

缩放 简单缩放

简单缩放可以直接通过将缩放系数sx,sy与对应x,y坐标相乘：

x’=x*sx,y’=y*sy

基于一个固定点缩放

x’ = x * sx + sy(1-sx)
y’ = y * sy + yf(1-sy)

其中sx,sy属于缩放系数。0~1表示缩小，>1表示放大

错切

图像错切变换在图像几何形变方面非常有用，常见的错切变换分为X方向与Y方向的错切变换。对应的数学矩阵分别如下：

根据上述矩阵假设P(x1, y1)为错切变换之前的像素点，则错切变换以后对应的像素

P’(x2, y2)当X方向错切变换时：

x2 = x1 - y1 * tanθ
y2 = y1

当Y方向错切变换时：

x2 = x1
y2 = y1 - x1 * tanθ

实例 svg canvas

只贴上旋转的demo,其他都可以仿照套用

旋转

橘色的点围绕蓝色旋转

var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    context.fillStyle = "#3399ff";
    context.arc(100, 75, 5, 0, 2 * Math.PI);
    context.fill();

    //点a围绕(100，75) 顺时针90度旋转
    var a = { x: 150, y: 75 }
    //套用上文公式
    //- 0.5 * Math.PI 因为canvas的0
    var x = 100 + (a.x - 100) * Math.cos(Math.PI / 2) - (a.y - 75) * Math.sin(Math.PI / 2);
    //y为简化后
    var y = 75 + (a.x - 100) * Math.sin(Math.PI / 2);
    context.beginPath();
    context.fillStyle = "#fe9901";
    context.arc(x, y, 5, 0, 2 * Math.PI);
    context.fill();

    //围绕100，75 60度旋转
    var x = 100 + 50 * Math.cos(Math.PI / 3);
    var y = 75 + 50 * Math.sin(Math.PI / 3);
    context.beginPath();
    context.fillStyle = "#fe9901";
    context.arc(x, y, 5, 0, 2 * Math.PI);
    context.fill();

专线服务超融合服务器二维图形基本变换图形学 opengl图形学背计算机图形学

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93880.html

前端图像处理指南

摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

Anshiii 2019-08-30 13:21 评论0 收藏0
前端图像处理指南

摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

CatalpaFlat 2019-08-20 13:33 评论0 收藏0
前端图像处理指南

摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

yanbingyun1990 2019-08-05 10:38 评论0 收藏0
Three.js自学碎碎叨（Day 1）

摘要：如你所见，这系列文章都是我自己的碎碎叨，当然啦，目的是为了能更好的梳理自己学习的知识，加强印象，顺便再来做个总结，这样能更加扎实的学习。一直就很想学习WebGL相关的知识，现在也找到了工作，生活也差不多趋向稳定了，加上学校也没那么多课程了，所以我肯定要利用起来这个时间啊！因为腿摔伤了，国庆估计是在家躺7天，所以更加要抓住这么好的学习时机了。如你所见，这系列文章都是我自己的碎碎叨，当然...

focusj 2019-08-23 12:13 评论0 收藏0
数学与Python有机结合及统计学、微积分、线性代数相关资源、图形软件

摘要：微积分微积分的课程我们也同样是推荐和的课程。还有一个斯坦福大学的统计学习入门英文字幕相当不错。所以，除了绘制数学图形外，学习数学就应该完全与编程有机结合。无论是三大数学软件Matlab（通信、控制等工程例外）、Maple、Mathematica，还是三大统计软件Spass、Stata、SAS，这些可视化的软件本身就是编程的一个体现，它们在一定程度上降低了我们使用数学的门槛，但另一方面...

Java3y 2019-07-31 10:25 评论0 收藏0