掘金博客名称相同

实现始终都是按照自己项目的需求来的，不同的项目，近似的一个需求可能实现的方式就稍微不同。

记录元素平移、旋转、缩放和镜像翻转（4）接下来就是一些收尾的工作，实现镜像翻转功能。这个功能就相对来说比较简单了，这里只做简单的实现，使用 css 即可。首先为元素新增字段来确定翻转效果，这个效果就两种，翻转和不翻转，所以使用 boolean 值。/** * 处理元素属性 * * @param {Object} options 元素属性 */handleOptions(options = {}) { // 之前的代码省略...... // 新增镜像翻转字段 _options.m

上面我们实现了抽取区域，对应的区域做相应的事情，基于此，我们可以让外界也传入同样的配置，来实现自己的操作，不过这个操作有部分限制，函数定义在配置对象内，那么 this 指向会变，所以也不能完全方便的使用方法，当然这个也可以更改（等等，这里我有个好sou主意，对于涉及到 this 的地方可以增加可以外界传入，然后可以通过 call apply bind 来更改 this 指向），算了，我反正不想改了！接下来就开始抽取区域，让对应的区域做对应的事情，目前已有的功能有旋转和缩放，所以用这两个为基准开始修改代码。

因为加入了元素的状态，所以鼠标点击的时候，我们必须得将元素状态设置，只要是在对应区域，那就设置对应的状态，之前只是判断点击元素是否在元素内部，现在元素内部需要划分部分区域，鼠标在这些区域响应正确的操作，所以我们得新增点击点位置判断函数，这里要实现的是元素的旋转变换，这个响应区域为元素的右下角，只要点击的坐标在此处，就响应变换操作，这样 render 函数也要进行改造。观察上面改造后的函数，如果我们后面还要加很多状态，就要写很多的 if-else，所以使用策略模式改造，抽离处理函数，所以继续改造。

其实这个功能在网上随便一找就是一大堆，但为了方便自己，还是写一下，这里是一个简单的 demo，使用的是 js 的方式，后面再基于此融合到框架中去，或者适配移动端。初步实现了元素的移动，因为篇幅，到此结束，后面基于此再实现其他功能。这个功能都很清楚了，所以简单的做下分析。

重温 ES 5 的继承1. es5 创建类function Person () { this.name = '张三'; this.age = 20;}var p = new Person();console.log(p.name); // 张三console.log(p.age); // 202. 构造函数和原型链里面增加方法function Person () { this.name = '张三'; this.age = 20; this.run = function