react通过自己的jsx语法将两者放在一起通过虚拟dom来渲染

目前较为流行的react确实有很多优点，例如虚拟dom，单向数据流状态机的思想。还有可复用组件化的思想等等。加上搭配jsx语法和es6，适应之后开发确实快捷很多，值得大家去一试。其实组件化的思想一直在提，原来的开发中也会抽一些公共的模块出来。但是react带来的思想冲击是革命性的，套用一句可能不太合适的话来，描述：万事万物皆组件，在这种思想的影响下，不管什么框架都可以抽一些公共的模块出来，应该秉持一种心态：任何代码都尽量不要重复写两遍，如果存在那么就可以考虑封装起来作为组件。当然不是一味的提倡盲目抽离，这个度还是要把握好的。

要兼容这些特立独行的文艺青年，react真的有点力不从心了。虽然有一些办法可以解决一些问题，例如引入es-shims转换es6语法的不备支持现象。但是整体来说还是不能用的。现身说法，前段时间一个项目使用react来开发，要求兼容ie8，但是react路由的hash值在ie8下面竟然会丢失。。。。最后还是用一些其他方式绕过了。所以jquery还是有存在的必要性的。

　　要是开发两套组件，成本还是蛮大的，并且重复的工作量也不小。所以就有个想法能不能开发一个公用组件，jquery和react技术栈都可以使用。刚开始的时候也觉得不太现实，毕竟两种技术的定位和开发模式存在很大差异。不过空想是没什么用的，动手实践一下才是王道。（今天的前言说的有点多了。。。）所以打算实现一个celling组件这个名字还真不好想，就是实现简单的吸顶、吸底和中间特定条件下的吸顶的一个定位组件。

这里就不贴全部代码了,直接把核心代码粘贴出来就够了.代码和上面所说的思想基本是一致的.并且还有相关的注释,我就不多做解释了.这样我们也是仅仅实现了在新的Layer上画了这样一个圆圈.那么如何实现缩放和平移图片,然后获取到图片这才是比较重要的一个部分.

既然要实现缩放和平移,那么必须要重写手势事件.这基本是习以为常的事情了.先贴代码,然后再说其中的道理.

当我们两个手指同时按压到屏幕上的时候,这里做了一个简单的判断,就是两指之间的距离,如果距离小于10f,那么就还是表示要执行平移操作,否则执行缩放操作,那么当需要执行缩放操作的时候首先需要记录两指按下的中心点坐标,然后根据初始两指之间的距离和移动后两指之间的距离做除法运算,就可以计算出我们具体要缩放多少,缩放就是通过根据最开始的中心点以及matrix的配合实现缩放效果.最后基本就是获取图片随机生成一个uri返回就可以了.

需要注意一点就是图片在放置到ImageView上的时候我们是需要对图片进行加工的,因为我们现在手机内部的图片已经不仅仅是720*1280那么简单了现在手机拍摄出来的图片像素一般是4000+*3000+的,这个取决于我们相机的像素,和屏幕的分辨率是没有什么关系的,因此在筛选完图片之后就需要对图片进行相关的处理.因此我为ClipView注册了一个视图树监听,也就是说当ClipView监听到整个视图树状态发生了相关的变化,那么就表示图片需要显示在ImageView上了,这时我们就需要对图片进行加工处理.每一个Layout都构成一个视图树,其实我感觉它和DOM树结构差不多,都是按层级划分的.还有注册完之后,触发的同时需要remove掉,否则会多次调用.