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。

相关文章

C#如何动态创建Label,及动态label事件

C#如何动态创建Label,及动态label事件

《C#如何动态创建Label,及动态label事件》：本文主要介绍C#如何动态创建Label,及动态label事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#如何动态创建Label,及动态label事件第一点：switch中的生成我们的label事件接着，
阅读更多...
SpringCloud动态配置注解@RefreshScope与@Component的深度解析

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.
阅读更多...
MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL？1.2 动态SQL的优点1.3 动态S
阅读更多...
mybatis-plus 实现查询表名动态修改的示例代码

mybatis-plus 实现查询表名动态修改的示例代码

《mybatis-plus实现查询表名动态修改的示例代码》通过MyBatis-Plus实现表名的动态替换,根据配置或入参选择不同的表,本文主要介绍了mybatis-plus实现查询表名动态修改的示... 目录实现数据库初始化依赖包配置读取类设置 myBATis-plus 插件测试通过 mybatis-plu
阅读更多...
基于Canvas的Html5多时区动态时钟实战代码

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》：本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示，通过Canvas的API，可以绘制出6个不同城市的时钟，并且这些时钟可以动态转动，每个时钟上都会标注出对应的24小时制时间，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
Vue中动态权限到按钮的完整实现方案详解

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表（routes）1.2 修改角色与路由权限表（role_routes）二、后端接口设计
阅读更多...
Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件：四、dhtmlx
阅读更多...
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

《前端CSS动态设置样式：:class、:style等技巧(推荐)》：本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法，通过对象语法，可以根据条件动态切换类名或样式；通过数组语法，可以同时绑定多个类名或样式，此外，还可以结合计算属性来生成复杂的类名或样式对象，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
Nginx实现动态封禁IP的步骤指南

Nginx实现动态封禁IP的步骤指南

《Nginx实现动态封禁IP的步骤指南》在日常的生产环境中,网站可能会遭遇恶意请求、DDoS攻击或其他有害的访问行为,为了应对这些情况,动态封禁IP是一项十分重要的安全策略,本篇博客将介绍如何通过NG... 目录1、简述2、实现方式3、使用 fail2ban 动态封禁3.1 安装 fail2ban3.2 配
阅读更多...
Vue3中的动态组件详解

Vue3中的动态组件详解

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2