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)}});

注意其实动画效果也是通过图片来变换坐标实现，如此处进行旋转，并通过定时器实现每16.5毫秒旋转5度。

最终效果如图：

源代码：sample.1.6.rar

直接运行查看

（本文为原创，在引用代码和文字时请注明出处）

关键字：设计器源代码，Web设计器，工作流设计器，jQuery插件，组态设计器，SCADA系统设计器，流程图设计，表单设计建模，报表设计，可视化，设计时，运行时，轻量级开放平台。

转载于:https://www.cnblogs.com/coolalam/p/9670498.html

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

1. 概述--从零起步实现基于Html5的WEB设计器Jquery插件
当一个软件为了达到一定的业务扩展性时(产品上线后限定范围内的用户需求无需变更代码,通过简单的配置可满足用户的要求),必然要求软件是可配置的. 笔者过去开发过很多配置型的管理软件,从可配置的表单设计(F ...
7.组件连线(贝塞尔曲线)--从零起步实现基于Html5的WEB设计器Jquery插件（含源码）...
上节讲到如何创建组件,清除设计器视图,以及设计视图的持久化和恢复,本节将重点讲如何实现组件间的连线,前面章节有提到为了方便从持久化文件中恢复,组件和连线是分别存放的:nodes和lines对象,两个组 ...
如何把HTML转换成动图,html5实现图片转圈的动画效果——让页面动起来
1.先瞧瞧效果: 2.代码是这样的: @mixin ani-btnRotate{ @keyframes btnRotate{ from{transform: rotateZ(0);} to{trans ...
照片转换为动画 html5,如何使用html5让图片转圈的动画效果
如何使用html5让图片转圈的动画效果发布时间:2020-10-26 09:33:22 来源:亿速云阅读:78 作者:小新如何使用html5让图片转圈的动画效果?这个问题可能是我们日常学习或工作 ...
html怎样让图片自动转圈,html5怎样做出图片转圈的动画效果
这次给大家带来html5怎样做出图片转圈的动画效果,h5做出图片转圈的动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. @mixin ani-btnRotate{ @keyframes bt ...
python炫酷动画源代码_Python tkinter实现的图片移动碰撞动画效果【附源码下载】...
本文实例讲述了Python tkinter实现的图片移动碰撞动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: #!/usr/bin/python # -*- coding ...
flash图片如何镜像翻转_在canvas上实现元素图片镜像翻转动画效果的方法
这篇文章主要介绍了在canvas上实现元素图片镜像翻转动画效果的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧! 一.Canvas图片水平镜像翻转效果预览 ...
仿腾讯新闻客户端图片新闻幻灯片动画效果
正在做一个类似腾讯新闻客户端图片新闻幻灯片动画效果,借着这个机会又看了一下android的动画. 源码http://download.csdn.net/detail/u012598233/853134 ...
html图片自动循环,css实现图片循环的动画效果（代码）
本篇文章给大家带来的内容是关于css实现图片循环的动画效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. *{margin: 0;padding: 0;} .robot{ w ...

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

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

最新文章

热门文章