`

关注细节-TWaver Android

阅读更多

一款优秀的产品体现在细节,UI产品更是如此,精确到每个像素,平衡性能与效果的最佳点,是我们追求的目标,细节的实现过程会有困难,结果却让人兴奋,TWaver Android的开发正是如此,所以我忍不住想分享一些细节点。

 

位置的细节

 

位置与坐标是图形界面的基础,TWaver Android中使用了绝对与相对坐标结合的思路,采用漫游模式交互,代码上与以往twaver产品会有所不同,这里列举部分特点。

 

绝对位置的两个要素

 

(location, anchor position)

 

位置是图形元素最基本的信息,自然想到的是点(Point)作为位置(location),比如说你的位置在(250, 360),但人不是大头针,物体总是有尺寸,一个点代表不了位置的全部信息,比如人的位置是算脚尖还是脚跟呢?于是我们引入挂载点位置(anchorPosition)参数,可以是左上角,中心或者其他位置,于是在TWaver Android中,你会看到位置的两个要素:位置(location)和挂载点(anchor position)

下面示意图中,两个网元相同的位置(100, 100),但挂载点不同,一个在中心,另一个在左上角。

 

 

下面的代码的作用是,设置网元位置(100, 100),挂载点位置为左上角(left top,初始为居中)

 

 

node.setLocation(100, 100);
node.setAnchorPosition(Position.LEFT_TOP);

 

 

相对位置的三个要素

 

(position, offset, anchor position)

 

对于相对位置,TWaver Android引入了第三个要素(position),twaver中网元可以组合,每个节点由一个主体(body)和一堆附件(attachments)组成,其中附件的位置就是相对与主体,称为相对位置,以文本标签为例,可以放置在主体的底部,中间或者其他位置

 

下面的代码设置文本相对位置为节点的左上角,挂载点位置为右下角1

 

 

node.setStyle(Styles.LABEL_POSITION, Position.LEFT_TOP);
node.setStyle(Styles.LABEL_ANCHOR_POSITION, Position.RIGHT_BOTTOM);

 

 

 

再加上前面提到的挂载点位置,两者组合可以实现81种位置,详见LabelPositionDemo

 

 

推而广之,对于线形元素,81种位置同样适用,且支持沿线旋转等等

 

 

外观的细节

 

前面位置和组合是否让你兴奋,又或者是头晕,好吧,我可以说些更直观的东西——外观

 

渐变 - 彩虹

渐变旋转,偏移,再加上一尾彩虹色,是否让可爱的Demo顿时文艺

 

 

定义彩虹渐变

int[] rainbowColors = new int[]{0x00000000, 0xFFFF0000, 0xFFFFFF00, 0xFF00FF00, 0xFF00EAFF, 0xFF000390, 0xFFFF00C6, 0x00000000};
float[] rainbowPositions = new float[]{0f, 0.12f, 0.28f, 0.45f, 0.6f, 0.75f, 0.8f, 1f};
Gradient linearGradient = new Gradient(Gradient.LINEAR, rainbowColors, rainbowPositions);
Gradient radialGradient = new Gradient(Gradient.RADIAL, rainbowColors, rainbowPositions);
Gradient sweepGradient = new Gradient(Gradient.SWEEP, rainbowColors, rainbowPositions);

 

冒泡样式

twaver的告警冒泡样式颇受好评,如果将这种冒泡推而广之,作用于所有附件,你是否感到兴奋呢,看看TWaver Android中的冒泡效果

 

 

设置lable的冒泡效果

 

Gradient linearGradient = Gradient.LINEAR_GRADIENT_VERTICAL;
int backgroundColor = Defaults.GROUP_BACKGROUND_COLOR;
node1.setStyle(Styles.LABEL_OUTLINE, 1);
node1.setStyle(Styles.LABEL_PADDING, new Insets(5));
node1.setStyle(Styles.LABEL_BACKGROUND_COLOR, backgroundColor);
node1.setStyle(Styles.LABEL_CORNER_RADIUS, 10);
node1.setStyle(Styles.LABEL_OFFSET, new Point(0, 10));
node1.setStyle(Styles.LABEL_BACKGROUND_SHADER, linearGradient);
...

 

圆角,阴影

 

圆角,阴影本是平常的东西,虽然申请不了圆角矩阵的专利,但我们可以稍微做好些,TWaver Android中圆角普遍被应用,而阴影效果也不错

 

更多

 

细节很多,这只是冰山一角,从模型,外观到交互设计,方方面面等待你去体验,最后静待TWaver Android的正式发布……

 

0
0
分享到:
评论

相关推荐

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    Twaver是一个强大的数据可视化和网络建模工具,广泛应用于网络拓扑、流程图、组织结构等场景。5.9.0是该库的一个特定版本,可能包含了新功能、性能优化或错误修复。 描述简单明了,"twaver-html5-5.9.0-api"直接...

    TWaver文档

    - TWaver支持多种开发平台和技术,如**Java**、**JavaScript**、**Flex**、**.NET**等,并且适用于桌面应用、Web应用以及iOS和Android等移动平台。 - 这种广泛的兼容性为开发者提供了极大的灵活性,可以根据项目的...

    Twaver-html5.zip

    Twaver学习案例的例子

    twaver-java-4.1

    【标题】"TWaver-java-4.1" 是一个针对Java平台的TWaver最新开发包,旨在帮助开发者创建更加生动且具有吸引力的用户界面。TWaver是一个强大的数据可视化工具,它提供了丰富的图表类型和交互功能,让数据展示更加直观...

    twaver-java-3.7

    在3.7版本中,开发者可以关注以下关键更新: 1. **性能优化**:对渲染速度和内存占用进行了优化,尤其在处理大量数据时,提升了整体性能。 2. **新图表类型**:可能增加了新的图表类型以满足更多样的数据展示需求...

    twaver-flex-3.6.5 官方demo

    【标题】"twaver-flex-3.6.5 官方demo" 提供的是一个基于Flex技术的Twaver图形库的演示版本。Twaver是一款强大的数据可视化和建模工具,广泛应用于网络、系统和业务流程的图形化表示。在3.6.5这个版本中,官方提供了...

    TWaver-java-4.1最新 官网试用版jar包及Demo

    【标题】"TWaver-java-4.1最新 官网试用版jar包及Demo" 涉及的核心知识点是TWaver,一个基于Java的图形可视化库,主要用于数据的图表展示和交互。这个版本是4.1,是官方提供的试用版,包含jar包和演示示例。 【描述...

    TWaver HTML5 开发指南代码

    TWaver是一个强大的可视化框架,其核心特性是支持复杂的图形和网络图表的绘制,尤其适合在Web上创建交互式的机房、网络设备、服务器架构等展示。 一、TWaver概述 TWaver是一个高效且灵活的JavaScript库,专门用于...

    TWaver-java-4.1试用版jar包

    【标题】"TWaver-java-4.1试用版jar包" 涉及的核心知识点是TWaver,这是一个专门用于数据可视化和图表绘制的Java库。TWaver提供了一个全面的解决方案,帮助开发者创建复杂的图表、仪表盘以及交互式的数据可视化应用...

    TWaver Java 3.7 Developer Guide

    《TWaver Java 3.7 开发者指南》是一份详尽的技术文档,旨在为开发者提供使用TWaver Java 3.7版本进行网络、图表、数据管理和用户界面设计的全面指导。TWaver Java是一个功能丰富的可视化组件库,适用于构建复杂的...

    TWaver for HTML5

    TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件,以及表格、树图、属性表、图表等丰富的通用图形界面组件,为电信运营支撑系统(OSS)的开发提供“一站式”的组件产品和解决方案,是快速设计、开发和...

    TWAVER-最好的JAVA 图形设计组件-试用

    TWAVER是一款强大的JAVA图形设计组件,专为电信级别的应用设计,它提供了丰富的功能来满足开发者在图形化展示、操作和地理信息系统(GIS)等方面的需求。这款组件的强大之处在于其高度定制性和灵活性,使得开发人员...

    TWaver-Java-3.7-Developer-Guide.rar_twaver_twaver java_电信网管_网管 j

    《TWaver Java 3.7 开发者指南》是一份专为Java开发者设计的电信网管图形界面组件的详细教程。TWaver是一款强大的可视化工具,主要用于构建复杂的网络管理系统,尤其在电信领域应用广泛。该教程涵盖了如何利用TWaver...

    TWaver的3d图形组件库,小demo

    "TWaver的3d图形组件库,小demo" 提示我们这是一个基于TWaver库的3D图形展示实例。TWaver是一个专业级的图表和数据可视化工具,它提供了HTML5版本的3D图形组件,允许开发者在Web应用中创建交互式的三维图形。 ...

    TWaver.swc 3.3.1

    TWaver-flex的库TWaver.swc

    twaver.js使用示例

    “twaver.js使用示例”这一标题表明了我们即将探讨的是一个关于twaver.js的实践应用案例。Twaver.js是一款强大的图形化建模和可视化库,主要用于创建复杂的网络拓扑图、流程图、组织结构图等。这个标题暗示我们将...

    twaver-api

    **标题:“twaver-api”** **描述:“twaver4.3.6版本的API文档,无需访问官网,本地查阅更加便捷。”** **标签:“twaver api”** **内容概述:** `Twaver` 是一款强大的数据可视化工具,主要用于创建复杂的...

Global site tag (gtag.js) - Google Analytics