Twaver-HTML5基础学习(26)背景

简介: 这篇文章介绍了如何在Twaver-HTML5中设置背景,包括栅格图片、颜色、颜色渐变、基本形状以及图片与形状结合的背景类型,并提供了代码示例。

背景

TWaver HTML5支持栅格图片,颜色,颜色渐变,基本形状(矩形,星形…)以及图片与形状结合作背景的功能。TWaver HTML5的背景属性是设置在Model层上的,ElementBox和拓扑网元都可以设置自己的背景,因为拓扑图显示当前子网的网元,所以本章所说的Network背景实指ElementBox和Subnetwork的背景,前者是顶层子网背景,后者指各个子网的背景。背景属性设置在模型层,其目的是方便数据的序列化,因为我们认为背景也是数据的一部分,不应该丢失。当然用户也可以在View层上按CSS样式给Network设置背景色,如:network.getView().style.backgroundColor = 0x00ff00。TWaver HTML5背景图通过设置数据元素的样式来进行,

首先需要设置背景类型(颜色背景,图片背景,图形背景或图片和图形结合做背景…),再设置背景参数(图片注册名称,图形类型,颜色,渐变类型,渐变颜色,间隙,对齐方式…)。

背景类型

("background.type","none");//'none','image','vector','image.vector','vector.image'

背景样式属性

    ("background.image",null);
    ("background.type","none"); //'none','image','vector','image.vector','vector.image'
    ("background.outline.width",-1);
    ("background.outline.color",null);
    ("background.vector.padding",0);
    ("background.image.padding",0);
    ("background.image.stretch","fill");//"fill","tile","none"
    ("background.vector.fill",null);
    ("background.vector.fill.color",null);
    ("background.vector.gradient",false);
    ("background.vector.gradient.color",null);
    ("background.vector.shape","rectangle");
    ('background.outline.pattern', null, 'array.number');

背景图片

图片名字需要先注册

    box.setStyle('background.type', 'image');
    box.setStyle('background.image', 'twaver');
    box.setStyle('background.image.scope','viewport');//'viewsize','viewport','rootcanvas'
    box.setStyle('background.image.stretch', 'fill');//'tile','none','fill'

纯色背景

      box.setStyle('background.type', 'vector');
      box.setStyle("background.vector.fill",true);
      box.setStyle("background.vector.fill.color",twaver.Util.randomColor());
      box.setStyle("background.vector.shape","roundrect");
      box.setStyle('background.outline.width', 10);
      box.setStyle('background.outline.color', 'red');

样例:

在这里插入图片描述

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-04-29 10:18:33
 */
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"
        // return

        // 设置纯色背景
        box.setStyle('background.type', 'vector');
        box.setStyle("background.vector.fill", true);
        box.setStyle("background.vector.fill.color", twaver.Util.randomColor());
        box.setStyle("background.vector.shape", "roundrect");
        box.setStyle('background.outline.width', 10);
        box.setStyle('background.outline.color', 'red');


        let node1 = returnNodeFun(box, {
    name: "第一个元素", location: {
    x: 100, y: 200 } })
        let node2 = returnNodeFun(box, {
    name: "第二个元素", location: {
    x: 300, y: 300 } })
        let group = returnGroupFun(box, {
    name: "我的第一个组", location: {
    x: 200, y: 300 } })
        group.setExpanded(true)

        group.s('group.shape', 'circle');//设置分组边框形状
        group.s('group.fill.color', "#ffffff");//填充色FEF3E2  E0FFFF
        group.s('group.outline.color', '#3cb2e6');//F8C374 #0099FF  #99caea
        group.s('group.outline.width', '2');
        group.s('vector.outline.pattern', [10, 0]);//轮廓
        group.s('group.deep', 0);
        group.s('select.style', 'border');
        group.s('select.width', 1);
        group.s('select.join', 'round');
        group.s('select.color', '#ffffff');
        group.s('label.color', '#323232');

        node1.setParent(group)
        node2.setParent(group)

        let link1 = returnLineFun(node1, node2)
        link1.setName('链接线')
        box.add(link1)
    }
    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

目录
相关文章
|
2月前
Twaver-HTML5基础学习(29)界面交互
这篇文章介绍了Twaver-HTML5中界面交互的多种模式,包括默认模式、编辑模式、创建网元模式、创建连线模式、创建形状连线模式、创建形状网元模式、触屏模式和放大镜模式,并提供了相应的代码示例。
69 11
Twaver-HTML5基础学习(29)界面交互
|
20天前
|
人工智能
|
2月前
Twaver-HTML5基础学习(27)过滤器
这篇文章介绍了Twaver-HTML5中过滤器的使用,包括可见过滤器、可移动过滤器和可编辑过滤器,并通过代码示例展示了如何通过设置过滤器实现不同用户权限或网元类型的交互和视图。
46 8
Twaver-HTML5基础学习(27)过滤器
|
2月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
38 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
2月前
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
本文尝试在Twaver-HTML5的Network组件的ToolTip中显示echarts饼图,但未成功,可能与版本有关。
36 4
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
|
2月前
|
前端开发
Twaver-HTML5基础学习(34)Link显示流动效果
本文介绍了如何在Twaver-HTML5中为Link添加流动效果,通过设置流动颜色、模式等来实现动态视觉效果。
35 3
Twaver-HTML5基础学习(34)Link显示流动效果
|
2月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
29 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
2月前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
32 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
|
2月前
Twaver-HTML5基础学习(36)是否显示滚动条
本文探讨了在Twaver-HTML5中设置是否显示滚动条的方法,包括横向和纵向滚动条的控制,但遇到了设置不生效的问题,可能与软件版本有关。
35 2
Twaver-HTML5基础学习(36)是否显示滚动条
|
2月前
Twaver-HTML5基础学习(32)Network样式andTree样式
本文介绍了如何在Twaver-HTML5中自定义Network和Tree组件的样式,包括标签、提示、颜色、告警等。
35 2
Twaver-HTML5基础学习(32)Network样式andTree样式