hanyeah

工作中经常要做工作区（场景）的漫游（平移）和缩放功能。

我们不讨论具体的交互细节，使用左键还是右键，滚轮或者双指。

我们只研究抽象的模型。

对于漫游功能，最容易想到的是直接改变场景的x/y坐标。

对于缩放功能，最容易的想到的是直接改变场景的scale属性。

实现起来很简单，但是加上屏幕分辨率变化的情况，就很困难了。

目前，同事用的方法是，屏幕分辨率变化的情况和漫游缩放分层来实现，漫游缩放通过改变显示元件的属性来实现，屏幕分辨率变化，通过调整canvas的width和height来实现。

效果很不错。

但是，由于没有理论的支撑，没有抽象出模型，也存在一些问题。

1、可移植性差；

2、可扩展性差；

3、对于未知的问题，可预测性差；

4、可读性差。

对于应对分辨率变化的情况，最初我总结的模型是：设计-显示尺寸模型。canvas的width/height属性可以理解为设计尺寸，style里边width/height可以理解为显示尺寸。本来我们只需要固定设计尺寸，在开发阶段不用考虑显示尺寸，但是由于分辨率的变化，设计尺寸的宽高比不能保证不变，所以我们还需要动态的调整设计尺寸，保证宽高比不变。但是不管怎么变化，设计尺寸里边的width和height总有一个是不变的。所以我们并不需要额外的存储一些参数。这样可能更好理解一点：对于设计尺寸，宽或高，一个保持不变，另一个进行扩展。

后来发现了这个：https://blog.csdn.net/zqiang_55/article/details/51089479

我们用到的其实就是ExtendViewport，虽然效果上是一样的，但是有理论的支撑，可以封装的更好一点（可以参考别人的封装），对于可能发生的问题，也可以预测（或者别人已经给出了答案）。

对于漫游缩放，可以用摄像机模型。原来直接平移场景，现在平移摄像机，原来直接缩放，现在改为拉近和拉远摄像机，这样在缩放的效果上也会有很大的改善。加缓动效果也更容易一些。

3D里边对相机和视口和相机的研究已经很成熟，我们可以直接拿来用到2D里边。

我们甚至可以通过变换视口和相机的模型来达到不同的效果，这些会变得很简单（可以直接抄别人或者书上的源码）。原来自己写的想要实现这些效果，可能就要花费大量的时间和精力了，写完还会有一堆的bug。