这是学习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
最终结果为：
