current position:Home>Twaver-html5 basic learning (26) background

Twaver-html5 basic learning (26) background

2022-04-29 12:28:32Liu Qing

background

TWaver HTML5 Support raster pictures , Color , Color gradient , Basic shape ( rectangular , Stars …) And the function of picture and shape knot cooperation background .TWaver HTML5 The background property of is set in Model On the floor ,ElementBox Both topology and NE can set their own background , Because the topology map shows the network elements of the current subnet , So what this chapter says Network Background reality refers to ElementBox and Subnetwork The background of , The former is the background of the top-level subnet , The latter refers to the background of each subnet . The background attribute is set at the model layer , Its purpose is to facilitate the serialization of data , Because we think the background is also part of the data , Should not be lost . Of course, the user can also View Press on layer CSS Style to Network Set background color , Such as :network.getView().style.backgroundColor = 0x00ff00.TWaver HTML5 The background image is created by setting the style of data elements ,

First, you need to set the background type ( Color background , Picture background , Graphic background or a combination of pictures and graphics …), Then set the background parameters ( Picture registration name , Graphic type , Color , Gradient type , Gradient color , The gap , Alignment mode …).

Background type

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

Background style properties

    ("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');

Background image

The picture name needs to be registered first

    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'

Solid background

	  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');

Examples :

 Insert picture description here

/* * @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());
        //  Set the initial size 
        network.adjustBounds({
     x: 0, y: 0, width: 800, height: 800 });
        // network.getView().style.backgroundColor = "#fff"
        network.getView().style.border = "2px solid #ccc"
        // return

        //  Set a solid background 
        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: " First element ", location: {
     x: 100, y: 200 } })
        let node2 = returnNodeFun(box, {
     name: " The second element ", location: {
     x: 300, y: 300 } })
        let group = returnGroupFun(box, {
     name: " My first group ", location: {
     x: 200, y: 300 } })
        group.setExpanded(true)

        group.s('group.shape', 'circle');// Set the group border shape 
        group.s('group.fill.color', "#ffffff");// Fill color FEF3E2 E0FFFF
        group.s('group.outline.color', '#3cb2e6');//F8C374 #0099FF #99caea
        group.s('group.outline.width', '2');
        group.s('vector.outline.pattern', [10, 0]);// outline 
        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(' Link lines ')
        box.add(link1)
    }
    useEffect(init, [])
    return (
        <>
            <p style={
    {
     fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={
    {
     fontSize: "20px", paddingLeft: "50px" }}>
                <li> background </li>
            </ul>
            {
    /*  Canvas elements need to be enabled   Otherwise, the generated entity coordinate points will be offset  */}
            <div id="testID" style={
    {
     width: "800px", height: "800px", border: "1px solid #ccc", position: "relative", margin: "0 auto" }}></div>
        </>
    )
}
export default Demo

Learning reference :TWaver Documents

copyright notice
author[Liu Qing],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291103409598.html

Random recommended