二维几何图形自由变换的思路（平移、缩放、旋转）

图形自由变换

图形的存储方式

鼠标交互

图形拓扑算法

总结

常见的二维几何图形包括点、线、面三种类型，而某些的地图标准规范中还区分多点、多线、多面、环等。本文，主要讲述简单的几何图形的自由变换（平移、缩放、旋转）的核心思路。至于复杂的几何图形则可以通过简单的几何图形组装变换得到。后面的文章会讲述如何拖拽增加修改顶点和编写辅助线的核心思路。

图形自由变换

图形自由变换是指可以通过自由旋转、比例、倾斜、扭曲、透视和变形来变换对象。例如在photoshop和illustrator中的自由变换功能。

图形的存储方式

在计算机中几何图形的点的存储方式以x，y坐标的形式存储，坐标系统可以是屏幕的像素坐标系统，可以是地理坐标系统，也可以是自定义的单位的坐标系统。但存储方式必须能够表示二维两个方向的值。例如：point: Array<2>或者point:Object<x, y>

而比点图形稍微复杂的线图形和面图形，则是以点为单位存储的集合图形，line: Array<point> 和 polygon: Array<point>

鼠标交互

自由变换涉及的鼠标交互比较简单，大致为如下：

鼠标点击图形，标记开始；
鼠标拖拽，记录偏移量
鼠标松开，标记结束

我们知道，鼠标的每一个动作，都能记录当前的鼠标在屏幕上的一个状态，包括屏幕像素坐标和鼠标操作事件。在鼠标与图形的交互中，所使用的东西，莫非是鼠标的左右键点击和松开，以及一个 delta值

delta = f(deltaX, deltaY)。可以理解为delta是与屏幕的横轴X和纵轴Y的差值有F的关联关系。

图形拓扑算法

图形的平移

图形的平移比较简单，就是给每一个点加上delta。公式如下： 新的坐标 += delta

const newCoordinate = event.coordinate;
const deltaX = newCoordinate[0] - this.lastCoordinate_[0];
const deltaY = newCoordinate[1] - this.lastCoordinate_[1];const graphics = this.graphics_ // 图形对象graphics.forEach(function(graphic) {const geom = graphic.getGeometry(); // 图形的坐标数据const coordinates = geom.getCoordinates()translate(coordinates , 0, coordinates.length, 2, deltaX, deltaY, coordinates);graphic.setGeometry(geom);}); function translate(coordinates, offset, end, stride, deltaX, deltaY, opt_dest) {const dest = opt_dest ? opt_dest : [];let i = 0;for (let j = offset; j < end; j += stride) {dest[i++] = coordinates[j] + deltaX;dest[i++] = coordinates[j + 1] + deltaY;for (let k = j + 2; k < j + stride; ++k) {dest[i++] = coordinates[k];}}if (opt_dest && dest.length != i) {dest.length = i;}return dest;
}

图形的缩放

图形的缩放比图形的平移稍微复杂一点点，需要先定义如下两个参数：

1. 根据鼠标交互得到delta，定义缩放的比例与delta的关系；

2. 定义图形比例缩放的anchor（锚点），通常取图形的几何中心点，锚点不同会影响缩放后的坐标的结果。比如有等比例缩放，向上向下缩放等。

/*** 缩放坐标* @param {Array<number>} coordinates 坐标信息.* @param {number} offset 坐标数组的起点索引，默认是0.* @param {number} end 坐标数组的起点索引的终点索引.* @param {number} stride 坐标的维度，二维图形是2.* @param {number} sx 相对于x轴的缩放比例.* @param {number} sy 相对于y轴的缩放比例.* @param {Array<number>} anchor 缩放的锚点.* @param {Array<number>=} opt_dest 目标数组中.* @return {Array<number>} 经过变形的坐标.*/
function scale(coordinates, offset, end, stride, sx, sy, anchor, opt_dest) {const dest = opt_dest ? opt_dest : [];const anchorX = anchor[0];const anchorY = anchor[1];let i = 0;for (let j = offset; j < end; j += stride) {const deltaX = coordinates[j] - anchorX;const deltaY = coordinates[j + 1] - anchorY;dest[i++] = anchorX + sx * deltaX;dest[i++] = anchorY + sy * deltaY;for (let k = j + 2; k < j + stride; ++k) {dest[i++] = coordinates[k];}}if (opt_dest && dest.length != i) {dest.length = i;}return dest;
}/** example **/
const coordinates= this.coordinates_;
let anchor = getCenter(coordinates); // 获取几何中心点const stride = 2;
const sx = 2;
const sy = 2;scale(coordinates, 0, coordinates.length,stride, sx, sy, anchor, coordinates);

图形的旋转

几何图形的旋转又比图形的缩放复杂那么一丢丢，仍然需要先定义如下两个参数：

1. 根据鼠标交互得到delta，定义旋转角度的比例与delta的关系；

2. 定义图形比例缩放的anchor（锚点），通常取图形的几何中心点，锚点不同会影响旋转后的坐标的结果。

经过旋转后，新的坐标与旧坐标的关系的公式如下： $CXnew = CXanthor +\left ( CXold - CXanthor\right )\ast \cos \alpha - \left ( CXold - CXanthor\right )\ast \sin \alpha$ $CYnew = CYanthor +\left ( CYold - CYanthor\right )\ast \cos \alpha + \left ( CYold - CYanthor\right )\ast \sin \alpha$

/*** @param {Array<number>} coordinates 坐标数组.* @param {number} offset 坐标数组起始的坐标的偏移.* @param {number} end 标数组终点的坐标的索引.* @param {number} stride 坐标的维度，二维的为2.* @param {number} angle 旋转角度.* @param {Array<number>} anchor 旋转的锚点.* @param {Array<number>=} opt_dest 目标数组.* @return {Array<number>} 已经转换的坐标.*/
export function rotate(coordinates, offset, end, stride, angle, anchor, opt_dest) {const dest = opt_dest ? opt_dest : [];const cos = Math.cos(angle);const sin = Math.sin(angle);const anchorX = anchor[0];const anchorY = anchor[1];let i = 0;for (let j = offset; j < end; j += stride) {const deltaX = coordinates[j] - anchorX;const deltaY = coordinates[j + 1] - anchorY;dest[i++] = anchorX + deltaX * cos - deltaY * sin;dest[i++] = anchorY + deltaX * sin + deltaY * cos;for (let k = j + 2; k < j + stride; ++k) {dest[i++] = coordinates[k];}}if (opt_dest && dest.length != i) {dest.length = i;}return dest;
}/**example**/
const coordinates = this.coordinates_
const stride =2
const angle = 45 * Math.PI / 180
const anchor = getCenter(coordinates)
rotate(coordinates, 0, coordinates.length,stride, angle, anchor, coordinates);

总结

几何图形的自由变换的核心思路比较简单，上述描述的情况都是基于二维几何图形的，但是也适合三维几何图形的情况。后面的文章会讲述几何图形的修改，变形以及贝塞尔曲线实现。