Twaver-HTML5基础学习(1)两点一线

这是学习Twaver第一天

首先要明白Twaver是可以做什么的：
官方文档：欢迎请点击阅读
我这里主要学习：
开发指南 – TWaver HTML5 2D

基本概念

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

使用TWaver前，需熟悉几个基本概念：图元（Element）、容器（DataBox）和画布（Network）。

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

官方建议：Note:以上概念是熟练使用TWaver需要掌握的最基本概念，请熟练掌握。

我们需要明白
1.图元是最小的单元；
2.图元需要放置到容器中；
3.最终图元会渲染到画布上即可；

下面看官方的例子：

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});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);
}

new twaver.ElementBox：创建一个容器；
new twaver.vector.Network:创建一个画布，并将容器传入；
document.body.appendChild(network.getView());:将画布append到页面上；
network.adjustBounds:设置画布大小；
new twaver.Node:创建node节点；
new twaver.Link创建一根线
box.add:将图元添加到容器中；

react版本

首先我这里引入的是Twaver.js，所有我在webpack中配置了模块便捷引入
在webpack.config.js中

   externals: {"$": "window.$","twaver": "window.twaver","license2d": "window.xxxxxxlicense2d",},

这样就可以使用下面的形式在组件内部使用了，但是前提是需要在index.html中使用script已经引入；

      <script src="../../static/jquery.min.js"></script><script src="../../static/twaver.js"></script><script src="../../static/xxxxxxlicense2d.js"></script>

在react组件中直接commonJSd的形式引入即可：

const $ = require('$');
const twaver = require('twaver');

首先封装了一下上面的几个方法：

const twaver = require('twaver');
/*** 创建一个dataBox容器* 容器中可以add图元*/
export const returnElementBoxFun = () => new twaver.ElementBox()/*** 创建一个画布 network对象* @param {ElementBox} box  创建一个画布 network对象*/
export const returnNetworkFun = (box) => new twaver.vector.Network(box)/*** 创建一个容器dataBox和一个画布* 并将容器实例化画布* @returns [box,network] box network*/
export const returnElementBoxAndNetworkFun = () => {let box = returnElementBoxFun();let network = returnNetworkFun(box);return [box, network]
}/*** 用于创建一个节点* @param {ElementBox} box dataBox * @param {String} name 当前节点的name* @param {Number} x   当前节点的x坐标* @param {Number} y 当前节点的y坐标* @returns {Node} Node*/
export const returnNodeFun = (box, name, x, y) => {let node = new twaver.Node();node.setName(name);node.setLocation(x, y);box.add(node);return node
}/*** * @param {Node} node1 节点1* @param {Node} node2 节点2*/
export const returnLineFun = (node1, node2) => new twaver.Link(node1, node2)

react组件：

import React, { useEffect, useState } from 'react'
import {returnElementBoxFun,returnNetworkFun,returnElementBoxAndNetworkFun,returnNodeFun,returnLineFun,
} from './utils'
const Demo = () => {const [network, setnetwork] = useState({})const init = () => {const [box, network] = returnElementBoxAndNetworkFun()setnetwork(_ => network)// network.style.position = 'absolute';document.getElementById("testID").appendChild(network.getView());// 设置最初的大小network.adjustBounds({ x: 0, y: 0, width: 800, height: 800 });// 绘制两个点let node1 = returnNodeFun(box, '节点1', 100, 100)let node2 = returnNodeFun(box, '节点2', 200, 100)//绘制连线 参数为两个node节点let link = returnLineFun(node1, node2);link.setName("my first line");link.setToolTip('<b>这是一条line</b>');box.add(link);}useEffect(init, [])return (<><p style={{ fontSize: "20px", paddingLeft: "50px",poaddingTop:"50px" }}>tips: </p><ul style={{ fontSize: "20px", paddingLeft: "50px" }}><li> 创建一个容器dataBox</li><li> 创建一个画布network</li><li> 创建两个带有name的点</li><li> 两个点连成线</li><li> 线 add to dataBox</li></ul>{/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}<div id="testID" style={{ width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div></>)
}
export default Demo

最终结果为：