Twaver-HTML5基础学习(34)Link显示流动效果-阿里云开发者社区

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

2024-09-26 50

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文介绍了如何在Twaver-HTML5中为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