Omi框架学习之旅 - 插件机制之omi-transform及原理说明

给omi-transform插件做个笔记，使用起来也很爽。

transform.js这个库，一直想写一篇帖子的，可是，数学不好，三维矩阵和二位矩阵理解的不好，所以迟迟没写了，

这也是一个神库，反正我很喜欢，那怎么和omi结合，怎么使用呢？

先看个demo吧。

        Omi.OmiTransform.init();    // 这个是初始化(源码是这么OmiTransform.init()写，为了方便，自己加了下)

        class App extends Omi.Component {
            constructor(data) {
                super(data);
            }

            installed() {
                setInterval(function() {
                    this.refs.test.rotateZ += 0.1;    // 拿到dom可以随便设置那14个属性
                }.bind(this));
            }

            style(){
                return  `
                    .test{
                        font-size: 20px;
                        border: 1px solid red;
                        width: 150px;
                        font-size
                        min-height: 150px;
                        text-align: center;
                        line-height:150px;
                    }
                 `;
            }

            render() {
                return `
                    <div omi-transform class="test" ref="test" rotateZ="30" translateX="100">    <!--在这里可以方面的设置值-->
                        omi-transform
                    </div>
                `;
            }

        };

 

废话不多说，实现很简单，以下只贴transform和omi怎么结合的代码了。

如下：

    var OmiTransform = {};

    OmiTransform.init = function(){
        Omi.extendPlugin('omi-transform',function(dom, instance){
            var ref = dom.getAttribute('ref');    // 查找dom的ref属性
            if(ref){
                var element = instance.refs[ref];    // 找到dom元素
                Transform(element, element.getAttribute('perspective') ? false : true);    // 给元素赋予三维矩阵
                ['translateX', 'translateY', 'translateZ', 'scaleX', 'scaleY', 'scaleZ', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'originX', 'originY', 'originZ'].forEach(function(name){
                    var attr = dom.getAttribute(name);    // 获取这些值的默认值
                    if(attr) {    // 有的话就给他
                        element[name] = parseFloat(dom.getAttribute(name));
                    };
                });
            };
        });
    }

    OmiTransform.destroy = function(){
        delete Omi.plugins['omi-transform'];
    };

这个过于简单，就懒得解释了。

 

ps：如果文字模糊，就把dom的perspective属性给关闭就好了。