基本概念

TWaver HTML5(以下简称TWaver)使用HTML5技术和javascript语言,可在支持HTML5的浏览器上进行绘图。

使用TWaver前,需熟悉几个基本概念:图元(Element)、容器(DataBox)和画布(Network)。

  • 图元:图形中的各种基本元素,如节点(Node)、连线(Link)等;
  • 容器:图元都统一放置在一个容器(DataBox)中进行管理,如同“装鸡蛋的篮子”一样。它负责图元的增/删/改/查等管理操作;
  • 画布:图元最终都绘制在画布(Network)组件上。Network是最终用户看到的图形组件,负责图形画面的具体绘制和交互;

Note:以上概念是熟练使用TWaver需要掌握的最基本概念,请熟练掌握。

第一个例子

TWaver最常用的几个类:

  • 图元:twaver.Node(节点)、twaver.Link(连线),都是twaver.Element图元基础类的子类;
  • 容器:twaver.ElementBox,是twaver.DataBox容器类的子类;
  • 画布:twaver.vector.Network;

绘制图形的过程是:

  1. new一个容器对象ElementBox、一个画布对象Network;
  2. 把Network放置在页面中并设置大小;
  3. new若干图元(Node、Link等)并add到Box容器中;

下面的HTML页面创建了一个“两点一线”的简单图形:

<script>
$(function init(){
var box = new twaver.ElementBox();
var network = new twaver.vector.Network(box); document.body.appendChild(network.getView());
network.adjustBounds({x:0,y:0,width:500,height:500});
window.onresize = function(e){
network.adjustBounds({x:0,y:0,width:document.documentElement.clientWidth,height:document.documentElement.clientHeight});
};
var node1 = new twaver.Node();
node1.setName("TWaver");
node1.setLocation(100,100);
box.add(node1); var node2 = new twaver.Node();
node2.setName("HTML5");
node2.setLocation(300,200);
box.add(node2); var link = new twaver.Link(node1,node2);
link.setName("Hello!");
link.setToolTip('<b>Hello!</b>');
box.add(link);
});
</script>

运行界面

TWaver HTML5 (2D)--基本概念的更多相关文章

  1. TWaver HTML5 (2D)----数据元素

    概述 数据元素是数据模型的基本要素,用于描述图形网元,业务网元,或者纯数据.TWaver HTML5中所有数据元素都继承自twaver.Data.为不同功能的需求,预定义了三类数据类型:twaver. ...

  2. 初识phaser框架——开源的HTML5 2D游戏开发框架

    背景: 在网上看到,65行实现flappy bird,感到很好奇.原来是使用开源的2D游戏框架 phaser开发的. 什么是phaser2D游戏开发框架呢? 借鉴与网上的资料: 1.    Phase ...

  3. Phaser是一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架

    Phaser是一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架,提供JavaScript和TypeScript双重支持,内置游戏对象的物理属性,采用Pixi.js引擎以加快Canvas和W ...

  4. PixiJS - 基于 WebGL 的超快 HTML5 2D 渲染引擎

    Pixi.js 是一个开源的HTML5 2D 渲染引擎,使用 WebGL 实现,不支持的浏览器会自动降低到 Canvas 实现.PixiJS 的目标是提供一个快速且轻量级的2D库,并能兼容所有设备.此 ...

  5. HTML5 2D平台游戏开发#4状态机

    在实现了<HTML5 2D平台游戏开发——角色动作篇之冲刺>之后,我发现随着角色动作的增加,代码中的逻辑判断越来越多,铺天盖地的if() else()语句实在让我捉襟见肘: 这还仅仅是角色 ...

  6. HTML5 2D平台游戏开发#6地图绘制

    此前已经完成了一部分角色的动作,现在还缺少可以交互的地图让游戏看起来能玩.不过在开始之前应当考虑清楚使用什么类型的地图,就2D平台游戏来说,一般有两种类型的地图,Tile-based和Art-base ...

  7. 发布HTML5 2D游戏引擎YEngine2D

    关于YEngine2D YEngine2D是一个开源的.采用HTML5技术和Javscript语言创建的2D游戏框架,用来构建web二维游戏. GitHub地址 最新版本 v0.1.2 浏览器支持 C ...

  8. HTML5 2D平台游戏开发#11斜坡物理

    在游戏中会经常遇到斜坡地形,比如众所周知的魂斗罗,角色可以在坡上移动和跳跃: 斜坡在2D游戏中很常见,处理起来也较为棘手.最初我打算用分离轴定律来实现,在建立了一个物理模型之后: 发现上坡时没什么问题 ...

  9. HTML5 2D平台游戏开发#8指令技

    一般在动作游戏中,玩家可以通过对输入设备输入一系列的指令让角色完成某个或多个特定的动作.以格斗游戏<拳皇>为例,键入↓↘→↘↓↙← + A or C可以触发IORI的必杀技八稚女: 通过一 ...

随机推荐

  1. nn

    <li> <a href="#" class="dropdown-toggle"> <i class="icon-des ...

  2. repo 官方教程

    参考 http://android.git.kernel.org/repo http://source.android.com/source/downloading.html http://sourc ...

  3. Java之美[从菜鸟到高手演练]之JDK动态代理的实现及原理

    Java之美[从菜鸟到高手演练]之JDK动态代理的实现及原理 JDK动态代理的实现及原理 作者:二青 邮箱:xtfggef@gmail.com     微博:http://weibo.com/xtfg ...

  4. 复旦大学2014--2015学年第一学期高等代数I期末考试情况分析

    一.期末考试成绩班级前几名 金羽佳(92).包振航(91).陈品翰(91).孙浩然(90).李卓凡(85).张钧瑞(84).郭昱君(84).董麒麟(84).张诚纯(84).叶瑜(84) 二.总成绩计算 ...

  5. STORM_0010_Message passing implementation/消息传递的实现

    下面是0.8.0之前的表述,之后的已经基于Disruptor改造过了 这个文章演示了发射和转移tuple是怎么在storm中工作的   Worker为消息传递负责 当zk中的任务出现了变化或者每个ta ...

  6. C# WinForm程序添加引用后调用静态方法时报“Interfaces_Helper.Global”的类型初始值设定项引发异常。---> System.NullReferenceException: 未将对象引用设置到对象的实例。

    出现原因: 因为Global类初始化某个静态变量时没有成功则会抛 System.NullReferenceException 异常,具体代码: public static string connstr ...

  7. Jquery基本、层次选择器

    基本选择器: $("#none").css("background","#bbffaa"); 改变id为none的所有元素的背景色 $(&q ...

  8. KaliLinux装好系统后安装常用软件

    1.配置软件源 leafpad /etc/apt/source.list or(recommand):#官方源deb kali main non-free contribdeb-src kali ma ...

  9. iOS - OC NSDate 时间

    前言 NSDate @interface NSDate : NSObject <NSCopying, NSSecureCoding> NSDate 用来表示公历的 GMT 时间(格林威治时 ...

  10. [转载] 每个 Python 程序员都要知道的日志实践

    原文: http://python.jobbole.com/81666/ 在现实生活中,记录日志非常重要.银行转账时会有转账记录:飞机飞行过程中,会有黑盒子(飞行数据记录器)记录飞行过程中的一切.如果 ...