当滑动可滚动的前景容器时，需要判断背景容器是否滑动到底部，如果背景没有滚动到底部，需先滚动背景容器，如果背景已经滚动到底部，则滚动前景容器，这样来实现联动滚动效果。起初分析用双层滚动容器实现，外层滚动容器放背景，内层滚动容器放列表，通过动态控制内层容器的可滚动属性来实现效果。其实进一步分析不难发现，当内层容器覆盖在背景上时，当内层容器滚动，背景跟着一起滚动就行了，所以可以监听滚动容器的滚动，当背景

为了解决这个问题，我们可以使用下面这种方法，将手指按下，移动，抬起看做一个操作动作，用变量记录当前的初始的x和y，手指按下记录按下的坐标，手指移动时记录移动到的坐标，通过按下的坐标与移动的坐标计算移动的距离，那么就有：当前的值 = 初始化值 + (手指当前移动的值 - 手指按下的值)；这样就达到了我们的要求。现在我们对边界做出了限制，但新的问题又出现了，我们手指拖动到容器外面，依然在响应事件，此时

接下来我们实现以元素中心为缩放中心的效果，如果我们想以元素的中心为缩放的中心（现在的中心是元素的左上角），这样在缩放过程中，对应的坐标值也得更着变化，缩放从原来的一边转换为双边。这样就简单的实现了缩放，如果没有其他的要求，不在意拉伸挤压的话，这就完成了，实际上肯定有需要保持等比例缩放（例如对一张图片的缩放，如果拉伸挤压后就很难看了）。这样就简单实现了元素的缩放，因为只是快速演示，所以考虑的情况没有

然后我们继续考虑热区的问题，当旋转一定角度的时候，再次点击对应的热区，就无法响应事件了，因为旋转后热区坐标已经发生改变，所以我们得对点击判断中加入角度的影响。值得注意的是，现在我们研究的是单个元素，所以坐标系就是以元素自身形成的（响应的事件也是在这个元素上），等后期要实现多个，坐标系就得以外层容器作为参考了。要实现旋转，我们就得知道元素的旋转角度，主要得出旋转的角度，那么实现起来就比较简单，所以简

这里给出一种确定响应区域的计算方式，基于元素本身创建一个坐标系，坐标原点为元素的左上角，使用元素的总体宽高和响应区域中心点来计算出一个比例，通过这个比例就能让我们使用区域内包括区域外的任意区域来做响应的区域，例如，元素整体宽高为20*20，我需要响应区域的中心点在右上角(20, 0)，所以这个比例就是 （x: 20/20，y: 0/20）。现在是多个元素的，当前正在操作的肯定只有一个元素，所以按下

之前我们使用的是以宽度为基准实现的元素缩放，这样如果y变化大于x的变化，就会不是很协调，现在我们使用新的一种计算方式，以初始按下的坐标和中心点坐标的距离和结束点坐标到中心点坐标的距离来计算缩放的比例，通过这个比例再去计算宽高，这样可能稍微会协调一点。前面我们简单实现了属性的抽取和元素的移动，接下来我们实现元素的旋转（因为旋转涉及到角度的变化，所以先行实现），因为原理在之前的单个中已经分析了，所以这

我们使用的顶点坐标顺序是顺时针，第一次循环 i = 0，j = 3，那么i就是左上顶点，j就是左下顶点，两个顶点刚好构成矩形左边；这样就简单实现了元素的删除功能。前面有人提到在元素内部的那块判断怎么那么写的，看来对知识渴望的小伙伴还是有，这样挺好的。这样就得到了代码中的判断依据，至于循环遍历顶点的写法，就是为了获取相邻两个顶点，这个就可以带入square坐标和循环去算一下就行了，保证每次循环都是相

有许多方式实现扩展功能区域，第一种就是划分区域，划分下面为属性扩展区域，元素变换区域则会相应的压缩，所以涉及到变换的计算有使用到容器宽高属性的都要变化；按照部分经验，这种功能操作的大多数是图片+文本，所以我们以这两种来划分元素的类型为例，后续如果有新的类型再增加即可。这样我们就简单实现了属性的修改，样式什么的后面有时间再慢慢调整，现在只是功能为主，毕竟真实的开发总会有UI的。前面我们实现了元素的变

前面我们抽取了区域的配置，主要实现了对内置区域的自定义，现在有个问题，如果是我们想自定义某个特定区域实现特定的效果，现在的数据都在部件的内部，如果不能提升到外部，那我们不能由外界传入貌似也没有什么用，因为功能需求都不一样，只有尽可能的以我现在的能力去进行封装。可以看到我们定义了左下角为自定义区域，其他内置的区域配置也生效了，接下来我们来实现这个区域的方法。如果还需要实现其他自定义可能，可以按照类似

对于文本元素，文本元素的高度是由文本自身的样式来决定的，所以我们限制文本元素只能缩放宽度，高度自动计算。基础的功能差不多就完成了，接下来主功能就还有一个，那就是保存，我们不知道这个功能是否还存在编辑，如果不存在，直接将该结构转成图片返回即可，所以我们保存就直接将数据和图片都传递过去即可。可以看到，随着功能的增加，可能就需要对之前的逻辑做更改，不过因为抽取了配置，很多地方就只需要加入少量的代码即可实