Twaver-HTML5基础学习（1）认识TwaverH5以及快速上手

前言

由于博主最近换了新的工作，在工作中需要使用Twaver进行一些2D渲染，在此之前的工作内容中很少和这种业务类型打交道，在网上查阅发现这部分的文章也不是很多，所以想通过自己的学习以及工作中的使用进行一个整理总结，希望能够对后面需要使用的大佬们提供一些帮助，同时也是为了自己能够整体梳理一下Twaver2D的知识体系.那么话不多说，开始学习

快速上手Twaver

Twaver 2D HTML5 官方文档

基本概念

Twaver HTML5（以下简称Twaver）是使用 HTML5 和 JavaScript 语言，可在 HTML5 上进行绘图。

必要前置知识

图元（Element）：图形中的各种基本元素，如（节点 Node、连线 Link）
容器（DataBox）：图元都放在统一的容器中管理，负责图元的增删改查
画布（Network）：图元最终都绘制在画布上。Network是最终用户看到的图形组件，负责图形画面的具体绘制和交互

基础案例

Twaver常用类

图元：twaver.Node twaver.Link都是twaver.Element图元基础类的子类
容器：twaver.ElementBox，是twaver.DataBox的子类
画布：twaver.vector.Network

简单的绘制两点一线

绘制过程：

new 创建ElementBox容器对象，一个画布对象Network
将Network添加到页面中并设置页面大小
new若干图元，并add到Box中

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/twaver.js"></script>
    <script>
        var box = new twaver.ElementBox(); // 创建容器实例
        var network = new twaver.vector.Network(box);  // 创建画布实例

        function init() {
            var view = network.getView();
            document.body.appendChild(view); // 页面中添加画布
            network.adjustBounds({ x: 0, y: 0, width: 1300, height: 600 });

            var node1 = new twaver.Node('node1') // 创建节点

            node1.setName('node1')
            node1.setLocation(100, 100)
            box.add(node1)

            var node2 = new twaver.Node('node2') // 创建节点
            node2.setName('node2')
            node2.setLocation(300, 300)
            box.add(node2)

            var link = new twaver.Link(node1, node2) // 创建连线
            box.add(link)
        }

    </script>
</head>

<body onload="init()">

</body>

</html>

看代码还是挺好理解的,就像上面的图所展示的，将图元放到容器，将容器放到画布中最后在页面中展示。

总结

这篇文章主要利用官网给的例子进行了一个demo展示，让大家对twaver有一个初步的认识