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

目录

图形自由变换

图形的存储方式

鼠标交互

图形拓扑算法

总结

---

       

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

图形自由变换

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

                               

图形的存储方式

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

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

     

鼠标交互

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

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

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