前面示例我建立了三種形狀的組件，圓、矩形、橢圓，本節我將再擴展兩種類型：圖片和動畫，并通過這個過程來論證前面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)}});

注意其實動畫效果也是通過圖片來變換坐標實現，如此處進行旋轉，并通過定時器實現每16.5毫秒旋轉5度。

最終效果如圖：

?

源代碼：sample.1.6.rar

直接運行查看

（本文為原創，在引用代碼和文字時請注明出處）

?
關鍵字：設計器源代碼，Web設計器，工作流設計器，jQuery插件，組態設計器，SCADA系統設計器，流程圖設計，表單設計建模，報表設計，可視化，設計時，運行時，輕量級開放平臺。

轉載于:https://www.cnblogs.com/coolalam/p/9670498.html

總結

以上是生活随笔為你收集整理的8.图片组件和动画效果--从零起步实现基于Html5的WEB设计器Jquery插件（含源码）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。