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

背景

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