zoukankan      html  css  js  c++  java
  • TWaver HTML5 (2D)--基本概念

    基本概念

    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,500,height:500});
    window.onresize = function(e){
    network.adjustBounds({x:0,y:0,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>

    运行界面

  • 相关阅读:
    白菜:小白菜、青菜
    蔬菜:白菜
    蔬菜-白菜:娃娃菜
    玉米:黑玉米
    坚果-花生:彩色花生
    养生-坚果-花生:黑花生
    汉语-词语:气质
    汉语-词语:痛楚
    汉语-词语:酸楚
    汉语-词语:心酸
  • 原文地址:https://www.cnblogs.com/ClassNotFoundException/p/5848577.html
Copyright © 2011-2022 走看看