8.图片组件和动画效果--从零起步实现基于Html5的WEB设计器Jquery插件（含源码）

coolalam 2021-11-28 原文

8.图片组件和动画效果–从零起步实现基于Html5的WEB设计器Jquery插件（含源码）

前面示例我建立了三种形状的组件，圆、矩形、椭圆，本节我将再扩展两种类型：图片和动画，并通过这个过程来论证前面OOP的编程是如何简化扩展工作的：

首先要在工具条里增加这两个组件，以便可以拖动：

                <li name="toolbox"  draggable="true">图片</li>
                <li name="toolbox"  draggable="true">风扇</li>

然后要增加两个Component的继承类：

  function MotorImage() { 
        this.url="http://www.jc-ebike.com/uploadfile/20150723/20150723194720340.jpg";
    }
    MotorImage.prototype = $.extend({}, Component.prototype);
    MotorImage.prototype = $.extend(MotorImage.prototype, {
        render: function (options) {
            this.properties.width = 20;
            this.properties.typeName = "图片";
            this.properties.height = 60;
            this.properties = $.extend(this.properties, options);
            var motor = new paper.Raster({source:this.url,position:[options.x,options.y]});
            motor.scale(0.3);
            this.group.addChild(motor);
            return this;
        }
    });
    function Fan() { 
        this.fan=null;
        this.url="http://www.ailawyers.cn/content/fan.png";
    }
    Fan.prototype = $.extend({}, Component.prototype);
    Fan.prototype = $.extend(Fan.prototype, {
        render: function (options) {
            this.properties.width = 60;
            this.properties.typeName = "风扇";
            this.properties.height = 60;
            this.properties = $.extend(this.properties, options);
            this.fan= new paper.Raster({source:this.url,position:[options.x,options.y]});
            this.fan.scale(0.1);
            this.group.addChild(this.fan);
            this.rotateMe();

            return this;
        },
        rotateMe:function(){
            debugger;
            this.fan.rotate(5);
            var me=this;
            setTimeout(function(){
                me.rotateMe()
            },16.5)
        }
    });