Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)
告警位置
Node等网元
网元中Alarm的位置可以参考Alarm样式属性alarm.position一栏。具体位置可与下图一一对应。注意Node网元中Alarm的Position位置属性没有from和to选项,因为概念上是讲不通的。
对于Node网元alarm.xoffset和alarm.yoffset分别代表了相对于alarm当前位置的x轴和y轴偏移量。
Link等网元
Link网元中alarm.position除了具有fron和to两个特殊的位置外,其他和上面的Node网元完全是一致的。在此着重介绍hotspot、from、to三个位置。
对于Link网元的alarm.xoffset和alarm.yoffset有个特殊的含义:
如果将xoffset的值设置为正负(0-1)之间的值,则代表了alarm在Link上的百分比位置。
当alarm.position设置为”from”,xoffset 取值为”0 – 1”则表示百分比,否则按实际值计算,偏移量均相对于起始from点,
position为”to”,则反之。
position为其他任何值,hotspot点为所有link长度一半的点,xoffset可取正数(0 – 1)、也可取负数(-1-0),都则按实际值计算。
例子
工具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) document.getElementById("testID").appendChild(network.getView()); // 设置最初的大小 network.adjustBounds({ x: 0, y: 0, width: 800, height: 800 }); let positions = ["from", "hotspot", "to"]; let alarmSeverity = [ALARM1, ALARM2, ALARM3, ALARM4, ALARM5]; let node1 = returnNodeFun(box, { name: '节点1', name2: "节点1name2", location: { x: 100, y: 100 }, }) let node2 = returnNodeFun(box, { name: '节点2', name2: "节点2name2", location: { x: 540, y: 300 }, }) let group1 = returnGroupFun(box, { name: "group1" }) group1.addChild(node1) group1.addChild(node2) var line1 = returnLineFun(node1, node2) box.add(line1); line1.s('alarm.position', positions[0]); line1.s('alarm.xoffset', .3); returnAlarmFun("link" + 1, line1.getId(), alarmSeverity[1], box.getAlarmBox()); var link = new twaver.ShapeLink(node1, node2); box.add(link); let node3 = returnNodeFun(box, { name: '节点3', location: { x: 300, y: 300 }, }) let node4 = returnNodeFun(box, { name: '节点4', location: { x: 440, y: 400 }, }) let group2 = returnGroupFun(box, { name: "group2" }) group2.addChild(node3) group2.addChild(node4) var link2 = new twaver.ShapeLink(node3, node4); box.add(link2); var list = new twaver.List(); list.add({ x: 250, y: 500 }); list.add({ x: 400, y: 500 }); link2.addPoint(list); link2.s('alarm.position', positions[1]); link2.s('alarm.xoffset', .5); returnAlarmFun("shapelink" + 1, link2.getId(), alarmSeverity[2], box.getAlarmBox()); returnAlarmFun("group2" + 1, group2.getId(), alarmSeverity[3], box.getAlarmBox()); group2.s('alarm.position','right') // ==================== var groupline = returnLineFun(group1, group2) box.add(groupline) } 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
总结:
对于Node网元,直接设置alarm.position为对应值即可;
对于Link网元,alarm.position有三种值:from hotspot to
Link可以设置偏移量属性alarm.xoffset、alarmyoffset;
当为from to的时候,
1:from 到 to的时候是正值 即 0-1 from为起点按照百分比换算长度
2:to 到 from的时候是正值 即 0-1 to为起点按照百分比换算长度
3:hotspot 可以为0-1 -1-0,从from到to为正,to到from为负;默认为中点,比如上面的例子:
link2.s('alarm.position', positions[1]); //1 ===》 hotspot link2.s('alarm.xoffset', .5);
那么他的意思就是向to方向再次移动一半距离的0.5,其相当于from 的 0.75;
学习参考:TWaver Documents