Twaver-HTML5基础学习(6)告警元素(Alarm)闪烁效果

从画布对象上拿到getAlarmLabel方法，设置最新的颜色；

闪烁效果

初始：

新告警颜色

老告警颜色：

工具方法JS：

const twaver = require('twaver');// 设置每个图元name的颜色twaver.Styles.setStyle('label.color', '#ec6c00');// 设置每个图元name2的颜色twaver.Styles.setStyle('label2.color', '#57ab9a');twaver.Styles.setStyle('select.color', '#ef8200');//TWaver内部预定义六中告警级别twaver.AlarmSeverity.CRITICAL = twaver.AlarmSeverity.add(500, 'Critical', 'C', "#FF0000");twaver.AlarmSeverity.MAJOR = twaver.AlarmSeverity.add(400, 'Major', 'M', "#FFA000");twaver.AlarmSeverity.MINOR = twaver.AlarmSeverity.add(300, 'Minor', 'm', "#FFFF00");twaver.AlarmSeverity.WARNING = twaver.AlarmSeverity.add(200, 'Warning', 'W', "#00FFFF");twaver.AlarmSeverity.INDETERMINATE = twaver.AlarmSeverity.add(100, 'Indeterminate', 'N', "#C800FF");twaver.AlarmSeverity.CLEARED = twaver.AlarmSeverity.add(0, 'Cleared', 'R', "#00FF00");const { CRITICAL, MAJOR, WARNING, MINOR, INDETERMINATE, CLEARED } = twaver.AlarmSeverityexport const ALARM1 = CLEAREDexport const ALARM2 = INDETERMINATEexport const ALARM3 = MINORexport const ALARM4 = MAJORexport const ALARM5 = CRITICAL    /     * 创建一个dataBox容器     * 容器中可以add图元     */    export const returnElementBoxFun = () => new twaver.ElementBox()/ * 创建一个画布 network对象 * @param {ElementBox} box  创建一个画布 network对象 */export const returnNetworkFun = (box) => new twaver.vector.Network(box)/ * 创建一个Group * 用于包裹图元 */export const returnGroupFun = (box, obj = {}) => {    let group = new twaver.Group(obj)    box.add(group)    return group}/ * 创建一个容器dataBox和一个画布 * 并将容器实例化画布 * @returns [box,network] box network */export const returnElementBoxAndNetworkFun = () => {    let box = returnElementBoxFun();    let network = returnNetworkFun(box);    return [box, network]}/ * 用于创建一个节点 * @param {ElementBox} box dataBox  * @param {String} name 当前节点的name * @param {Number} x   当前节点的x坐标 * @param {Number} y 当前节点的y坐标 * @returns {Node} Node */export const returnNodeFun = (box, Obj = {}) => {    let node = new twaver.Node(Obj);    // node.setName(name);    // node.setLocation(x, y);    box.add(node);    return node}/ *  * @param {Node} node1 节点1 * @param {Node} node2 节点2 */export const returnLineFun = (node1, node2) => new twaver.Link(node1, node2)/ * 注册图片 用于设置图元的img setImage * @param {String} url 图片 url * @param {NetWork} svg  NetWork对象 */export function returnRegisterImage(url, svg) {    var image = new Image();    image.src = url;    var views = arguments;    image.onload = function () { // getImageName 获取到的图片name用做 node节点的显示img twaver.Util.registerImage(getImageName(url), image, image.width, image.height, svg === true); image.onload = null; for (var i = 1; i < views.length; i++) {     var view = views[i];     if (view.invalidateElementUIs) {  view.invalidateElementUIs();     }     if (view.invalidateDisplay) {  view.invalidateDisplay();     } }    };    // getImageName 获取到的图片name用做 node节点的显示img    const getImageName = (url) => { var index = url.lastIndexOf('/'); var name = url; if (index >= 0) {     name = url.substring(index + 1); } index = name.lastIndexOf('.'); if (index >= 0) {     name = name.substring(0, index); } return name;    }}/* * @param {*} 告警的Id  * @param {*} 告警网元的Id   * @param {*} 告警级别  * @param {*} alarmBox 网元容器.getAlarmBox() */export const returnAlarmFun = (alarmID, elementID, alarmSeverity, alarmBox) => {    var alarm = new twaver.Alarm(alarmID, elementID, alarmSeverity);    alarmBox.add(alarm);}

react页面代码：

import React, { useEffect, useState } from 'react'import {    // returnElementBoxFun,    // returnNetworkFun,    returnGroupFun,    returnElementBoxAndNetworkFun,    returnNodeFun,    returnLineFun,    returnRegisterImage,    returnAlarmFun, ALARM1, ALARM2, ALARM3, ALARM4, ALARM5} 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 }); let node1 =returnNodeFun(box, { name: '节点1', name2: "节点1name2", location: { x: 100, y: 100 }, }) returnNodeFun(box, { name: '节点2', name2: "节点2name2", location: { x: 500, y: 100 }, })  returnAlarmFun('alarm', node1.getId(), ALARM2,box.getAlarmBox()) var oldAlarmLabel = network.getAlarmLabel; var newAlarmLabel = function (element) {     if (element.getName() == '节点1' || element.getName() == '节点2' ) {  return null;     }     return network.prototype.getAlarmLabel(element); } setInterval(function () {     if (network.getAlarmLabel == oldAlarmLabel) {  network.getAlarmLabel = newAlarmLabel;  network.getInnerColor = function (data) {      return "red";  }     } else if (network.getAlarmLabel === newAlarmLabel) {  network.getAlarmLabel = oldAlarmLabel;  network.getInnerColor = function (data) {      return "#FFF00F";  }     }     network.invalidateElementUIs(); }, 500);     }    useEffect(init, [])    return ( <>     <p style={{ fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>     <ul style={{ fontSize: "20px", paddingLeft: "50px" }}>  <li>alarm.xoffset和alarm.yoffset以及alarm.position </li>  <li>对于Link网元的alarm.xoffset和alarm.yoffset有个特殊的含义,<br />      如果将xoffset的值设置为正负(0-1)之间的值，则代表了alarm在Link上的百分比位置。<br />      当alarm.position设置为”from”，xoffset 取值为”0 – 1”则表示百分比，否则按实际值计算，偏移量均相对于起始from点，<br />      position为”to”，则反之。position为其他任何值，<br />      hotspot点为所有link长度一半的点，xoffset可取正数(0 – 1)、也可取负数(-1-0)，都则按实际值计算。</li>     </ul>     {/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}     <div id="testID" style={{ width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div> </>    )}export default Demo

学习参考：TWaver Documents