TWaver网元动态转动效果

2024-02-10 05:58
文章标签 动态 效果 转动 网元 twaver

本文主要是介绍TWaver网元动态转动效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近有客户提了一个网元动态旋转的需求，用TWaver实现起来还是很方便的，效果如下图所示：
主要实现功能：
1:网元动态旋转
2:网元选中效果，被选中网元快速转到最前端后停止旋转，取消选中自动重启旋转
3:根据鼠标位置自动调整旋转方向
4:可以在程序中修改fw/bw/fh/bh调整图片显示效果。

代码如下所示：

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"creationComplete="test()"width="100%"height="100%"xmlns:ns="http://www.servasoftware.com/2009/twaver/flex"><mx:Script><![CDATA[import mx.events.ResizeEvent;import twaver.Collection;import twaver.Consts;import twaver.ElementBox;import twaver.IData;import twaver.IElement;import twaver.Layer;import twaver.Node;import twaver.SelectionChangeEvent;import twaver.SelectionModel;import twaver.Styles;import twaver.SubNetwork;import twaver.Utils;import twaver.core.util.l.u;private var box:ElementBox = new ElementBox();private var _rotationList:Collection = new Collection();private var rectIndexMap:Object = {};private var indexRectMap:Object = {};private var rList:Collection = new Collection();private var _startAngle:Number = 90;private var timer:Timer;private var _selectNode:Node;private var _clockSise:Boolean = false;private var _stopAngle:Number = 0;private var _needStop:Boolean = false;[Embed(source="images/1.png")]public static const p1:Class;[Embed(source="images/2.png")]public static const p2:Class;[Embed(source="images/3.png")]public static const p3:Class;[Embed(source="images/4.png")]public static const p4:Class;[Embed(source="images/5.png")]public static const p5:Class;[Embed(source="images/6.png")]public static const p6:Class;[Embed(source="images/7.png")]public static const p7:Class;[Embed(source="images/8.png")]public static const p8:Class;public function get clockSise():Boolean{return _clockSise;}public function set clockSise(value:Boolean):void{if(this.clockSise==value){return;}_clockSise = value;}private function resetClockSize( point:Point):void {if (_needStop == true) {return;}if (point.x > this.network.width / 2) {clockSise = false;} else {clockSise = true;}}public function get selectNode():Node{return _selectNode;}public function set selectNode(value:Node):void{if(this.selectNode==value){return;}_selectNode = value;if(this.selectNode==null){_needStop = false;timer.delay = 30;if(!timer.running){timer.start();}}else{var rect:Rectangle = indexRectMap[this.selectNode] as Rectangle;var left:Boolean = (rect.x+rect.width/2)<network.width/2;if(left){clockSise = false;}else{clockSise = true;}var index:int = rotationList.getItemIndex(this.selectNode);var size:int = this.rotationList.count;var step:Number = 360/size;_stopAngle = 90 - index * step;_needStop = true;timer.delay = 5;if(!timer.running){timer.start();}}}public function start():void{timer.start();}public function stop():void{if(timer!=null){timer.stop();}}public function get startAngle():Number{return _startAngle;}public function set startAngle(value:Number):void{_startAngle = (value+360)%360;this.measureRotation();}public function get rotationList():Collection{return _rotationList;}public function set rotationList(value:Collection):void{_rotationList = value;this.box.layerBox.clear();var size:int = this.rotationList.count;for(var i:int = 0;i<size;i++){var l:Layer = new Layer("r:"+i);box.layerBox.add(l);}this.measureRotation();}private function measureRotation():void{rectIndexMap = {};indexRectMap = {};rList.clear();var size:int = this.rotationList.count;if(size==0){return;}var w:Number = this.network.width;var h:Number = this.network.height;var fw:Number = 1.0 / 3 * w;var bw:Number = 1.0 / 6 * w;var fh:Number = h / 2.5;var bh:Number = h / 7.0;var m:Number = (fw - bw) / 4;var cw:Number = m * 2 + bw;var halfcw:Number = cw / 2;var x:Number = halfcw + 15;w = w - halfcw * 2 - 30;var y:Number = bh / 2 + 10;h = h - fh / 2 - bh / 2 - 20;var step:Number = 360.0 / size;for(var i:int = 0;i<size;i++){var n:Node =  this.rotationList.getItemAt(i) as Node;var p:Point = this.getPointAtEllipse(x,y,w,h,startAngle+step*i);var px:Number = p.x;var py:Number = p.y;var pm:Number = (py - y) / h * (fw - bw) / 2;var ww:Number = pm * 2 + bw;var hh:Number = (py - y) / h * (fh - bh) + bh;var rect:Rectangle = new Rectangle(px - ww / 2, py - hh / 2, ww, hh);n.setSize(rect.width,rect.height);n.setCenterLocation(px,py);rectIndexMap[rect] = n;indexRectMap[n] = rect;rList.addItem(rect);}rList.sort(rectSort);for(var j:int = 0;j<size;j++){var rr:Rectangle = rList.getItemAt(j) as Rectangle;var nn:Node = rectIndexMap[rr];nn.layerID = "r:"+j;}}private function rectSort(r1:Rectangle,r2:Rectangle):int{if (r1.width> r2.width) {return 1;}if (r1.width < r2.width) {return -1;}return 0;}public function  getPointAtEllipse(x:Number,   y:Number,   w:Number,   h:Number,   angled:Number):Point {var angle:Number =angled / 180.0 * Math.PI;var px:Number = x + (Math.cos(angle) * 0.5 + 0.5) * w;var py:Number = y + (Math.sin(angle) * 0.5 + 0.5) * h;return new Point(px, py);}private function init():void{timer=new Timer(30);timer.addEventListener(TimerEvent.TIMER,function():void{if(clockSise){startAngle = startAngle+1;}else{startAngle = startAngle-1;}if(_needStop){var abs:Number = Math.abs(startAngle-(_stopAngle+360)%360);if(abs<2){timer.stop();}}});network.addEventListener(MouseEvent.MOUSE_MOVE,function(e:MouseEvent):void{var p:Point = network.getLogicalPoint(e);resetClockSize(p);});network.addEventListener(MouseEvent.MOUSE_DOWN,function(e:MouseEvent):void{var p:Point = network.getLogicalPoint(e);var element:IElement = network.getElementByMouseEvent(e);selectNode = element as Node;resetClockSize(p);});network.addEventListener(ResizeEvent.RESIZE,function():void{measureRotation();});}private function test():void{init();Utils.registerImageByClass("p1", p1);Utils.registerImageByClass("p2", p2);Utils.registerImageByClass("p3", p3);Utils.registerImageByClass("p4", p4);Utils.registerImageByClass("p5", p5);Utils.registerImageByClass("p6", p6);Utils.registerImageByClass("p7", p7);Utils.registerImageByClass("p8", p8);var list:Collection = new Collection();for(var i:int = 1;i<9;i++){var sub:Node = new Node();sub.setStyle(Styles.SELECT_STYLE,Consts.SELECT_STYLE_BORDER);sub.setStyle(Styles.IMAGE_STRETCH,Consts.STRETCH_FILL);sub.setStyle(Styles.SELECT_COLOR,"0x00ff00");sub.setStyle(Styles.LABEL_POSITION,Consts.POSITION_CENTER);sub.image = "p"+i;sub.name = "sub"+ilist.addItem(sub);box.add(sub);}this.rotationList = list;network.elementBox = box;this.start();}]]></mx:Script><ns:Network id="network" width="100%" height="100%" backgroundColor="0xffffff"></ns:Network>
</mx:Application>
 

这篇关于TWaver网元动态转动效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/696295。

相关文章

vue基于ElementUI动态设置表格高度的3种方法

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要
阅读更多...
SpringBoot实现动态插拔的AOP的完整案例

SpringBoot实现动态插拔的AOP的完整案例

《SpringBoot实现动态插拔的AOP的完整案例》在现代软件开发中,面向切面编程（AOP）是一种非常重要的技术,能够有效实现日志记录、安全控制、性能监控等横切关注点的分离,在传统的AOP实现中,切... 目录引言一、AOP 概述1.1 什么是 AOP1.2 AOP 的典型应用场景1.3 为什么需要动态插
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
SpringCloud配置动态更新原理解析

SpringCloud配置动态更新原理解析

《SpringCloud配置动态更新原理解析》在微服务架构的浩瀚星海中,服务配置的动态更新如同魔法一般,能够让应用在不重启的情况下,实时响应配置的变更,SpringCloud作为微服务架构中的佼佼者,... 目录一、SpringBoot、Cloud配置的读取二、SpringCloud配置动态刷新三、更新@R
阅读更多...
基于Python实现PDF动画翻页效果的阅读器

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
如何用Python绘制简易动态圣诞树

如何用Python绘制简易动态圣诞树

《如何用Python绘制简易动态圣诞树》这篇文章主要给大家介绍了关于如何用Python绘制简易动态圣诞树,文中讲解了如何通过编写代码来实现特定的效果,包括代码的编写技巧和效果的展示,需要的朋友可以参考... 目录代码：效果：总结 代码：import randomimport timefrom math
阅读更多...
使用Python实现生命之轮Wheel of life效果

使用Python实现生命之轮Wheel of life效果

《使用Python实现生命之轮Wheeloflife效果》生命之轮Wheeloflife这一概念最初由SuccessMotivation®Institute,Inc.的创始人PaulJ.Meyer... 最近看一个生命之轮的视频，让我们珍惜时间，因为一生是有限的。使用python创建生命倒计时图表，珍惜时间
阅读更多...
Java中JSON字符串反序列化(动态泛型)

Java中JSON字符串反序列化(动态泛型)

《Java中JSON字符串反序列化(动态泛型)》文章讨论了在定时任务中使用反射调用目标对象时处理动态参数的问题,通过将方法参数存储为JSON字符串并进行反序列化,可以实现动态调用,然而,这种方式容易导... 需求：定时任务扫描，反射调用目标对象，但是，方法的传参不是固定的。方案一：将方法参数存成jsON字
阅读更多...
.NET利用C#字节流动态操作Excel文件

.NET利用C#字节流动态操作Excel文件

《.NET利用C#字节流动态操作Excel文件》在.NET开发中,通过字节流动态操作Excel文件提供了一种高效且灵活的方式处理数据,本文将演示如何在.NET平台使用C#通过字节流创建,读取,编辑及保... 目录用C#创建并保存Excel工作簿为字节流用C#通过字节流直接读取Excel文件数据用C#通过字节
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2