Twaver-HTML5基础学习(34)Link显示流动效果

Link显示流动效果

react代码：

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-04-29 15:27:48
 */
import React, {
    
     useEffect, useState } from 'react'
import {
    
    
    returnElementBoxAndNetworkFun,
    returnNodeFun,
    returnLineFun,
    returnRegisterImage,
    returnGroupFun
} from './utils'
const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {
    
    
    const [network, setnetwork] = useState({
    
    })
    const init = () => {
    
    
        const [box, network] = returnElementBoxAndNetworkFun()
        setnetwork(_ => network)
        network.invalidateElementUIs();
        document.getElementById("testID").appendChild(network.getView());
        // 设置最初的大小
        network.adjustBounds({
    
     x: 0, y: 0, width: 800, height: 800 });
        // network.getView().style.backgroundColor = "#fff"
        network.getView().style.border = "2px solid #ccc"
        var toolbar = document.createElement('div');
        // 是否显示tooltip
        network.setToolTipEnabled(false);
       

        var from = new twaver.Node();
        from.setName('From');
        from.setLocation(100, 100);
        box.add(from);
        var to = new twaver.Node();
        to.setName('To');
        to.setLocation(300, 300);
        box.add(to);
        var liuqing = new twaver.Node();
        liuqing.setName('liuqing');
        liuqing.setLocation(500, 300);
        box.add(liuqing);
        var link = new twaver.Link(from, to);
        link.setName('Link');
        box.add(link);
        
        // 开启流动效果
        network.setLinkFlowEnabled(true);
        link.setStyle("link.flow", true);
        link.setStyle("link.pattern", [10, 10]);
        link.setStyle("link.flow.converse", true);
        link.setStyle("link.flow.color", 'red');
       
    }
    useEffect(init, [])
    return (
        <>
            <p style={
    
    {
    
     fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={
    
    {
    
     fontSize: "20px", paddingLeft: "50px" }}>
                <li>过滤器</li>
            </ul>
            {
    
    /* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={
    
    {
    
     width: "800px", height: "800px", border: "1px solid #ccc", position: "relative", margin: "0 auto" }}></div>
        </>
    )
}
export default Demo

学习参考：TWaver Documents
http://www.servasoft.com/forum/viewtopic.php?t=6004