Twaver-HTML5基础学习(11)形状节点(ShapeNode)

形状节点(ShapeNode)

TWaver提供了一个特殊的节点:twaver.ShapeNode。这是一个节点扩展,与普通节点(Node)之间主要区别是:普通节点主要通过图片来表示一个物体,而形状节点通过一个任意形状来表示一个物体。形状节点由一系列点组成,这些点连接成一个形状。通过千变万化的形状,可以用来表示很多特殊的数据,比如一个国家或者地区、一个总线等等。

添加删除控制点相关方法：

get/setPoints:function(points)
addPoint:function(point)
addPointAt:function(point,index)
setPointAt:function(point,index)
removePoint:function(point)

此外还可以指定片段的绘制方式(segments),使ShapeNode表现更丰富的效果，如曲线(QuadTo)，间断(moveTo)等。绘制方式有三种，移动到(moveTo)、直线(lineTo)和曲线(quadto)。

上面的话是官网上的原话，但是一直没理解，官网上例子太少了，以后学习全面了，再回头看。目前先看怎么使用：

设置segments

get/setSegments:function(list)

需要配合上面的形状节点使用，首先创建一个list;

  var shapeNode2 = new twaver.ShapeNode();shapeNode2.setName('shapeNode2');shapeNode2.addPoint({ x: 300, y: 100 });shapeNode2.addPoint({ x: 200, y: 200 });shapeNode2.addPoint({ x: 100, y: 300 });shapeNode2.addPoint({ x: 400, y: 400 });shapeNode2.addPoint({ x: 500, y: 500 });shapeNode2.s('vector.fill.color', '#ec6c00');shapeNode2.s('vector.gradient', 'radial.east');// 创建Listvar segments = new twaver.List();segments.add("moveto");segments.add("quadto");segments.add("quadto");shapeNode2.setSegments(segments);box.add(shapeNode2);

例子：

工具类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.AlarmSeverity
export const ALARM1 = CLEARED
export const ALARM2 = INDETERMINATE
export const ALARM3 = MINOR
export const ALARM4 = MAJOR
export 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节点的显示imgtwaver.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节点的显示imgconst 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);
}/*** * @param {*} box 容器dataBox* @param {*} layer layer对象* @param {*} shape 图层的形状* @param {*} x node点的坐标* @param {*} y node点的坐标* @param {*} width 图层的宽高* @param {*} height 图层的宽高* @param {*} fillColor  图层填充颜色*/
/*** * shape * circle 圆形* diamond 菱形* rectangle 长方形*/
export const createNode = (box, layer, shape, x, y, width, height, fillColor, ) => {var node = new twaver.Node();node.setLayerId(layer.getId());node.setName('layer-' + layer.getId());node.setStyle('body.type', 'vector');node.setStyle('vector.fill.alpha', 0.7);node.setStyle('vector.shape', shape);node.setSize(width, height);node.setLocation(x, y);node.setStyle('vector.fill.color', fillColor);box.add(node); return node;
}
/*** * @param {*} table * @param {*} name * @param {*} propetyName * @param {*} propertyType * @param {*} valueType */
export const returnCreateColumn = (table, name, propetyName, propertyType, valueType) => {var column = new twaver.Column(name);column.setName(name);column.setPropertyName(propetyName);column.setPropertyType(propertyType);if (valueType) {column.setValueType(valueType);}table.getColumnBox().add(column);return column;
}export const returnRandomColor = () => {var r = randomInt(255);var g = randomInt(255);var b = randomInt(255);return '#' + formatNumber((r << 16) | (g << 8) | b);
}
function randomInt(n) {return Math.floor(Math.random() * n);
}function formatNumber(value) {var result = value.toString(16);while (result.length < 6) { result = '0' + result; } return result;
}

react页面

/** @Descripttion: * @version: * @Author: ZhangJunQing* @Date: 2022-04-18 14:44:05* @LastEditors: ZhangJunQing* @LastEditTime: 2022-04-19 18:03:17*/
import React, { useEffect, useState } from 'react'
import {returnElementBoxAndNetworkFun,
} 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: 1000, height: 1000 });initDataBox()function initDataBox() {// ShapeNode 元素才有 addPoint 方法  NOde节点没有这个方法var shapeNode1 = new twaver.ShapeNode({ name: 'ShapeNode1' });// 填充颜色shapeNode1.s('vector.fill.color', 'RED');// 渐变颜色shapeNode1.s('vector.gradient', 'radial.center');// 添加的节点 从哪里开始到哪里结束shapeNode1.addPoint({ x: 30, y: 10 });shapeNode1.addPoint({ x: 80, y: 10 });shapeNode1.addPoint({ x: 100, y: 90 });shapeNode1.addPoint({ x: 10, y: 90 });shapeNode1.addPoint({ x: 30, y: 10 });box.add(shapeNode1);// 创建ShapeNode节点var shapeNode2 = new twaver.ShapeNode();shapeNode2.setName('shapeNode2');shapeNode2.addPoint({ x: 300, y: 100 });shapeNode2.addPoint({ x: 200, y: 200 });shapeNode2.addPoint({ x: 100, y: 300 });shapeNode2.addPoint({ x: 400, y: 400 });shapeNode2.addPoint({ x: 500, y: 500 });shapeNode2.s('vector.fill.color', '#ec6c00');shapeNode2.s('vector.gradient', 'radial.east');// 创建Listvar segments = new twaver.List();segments.add("moveto");segments.add("quadto");segments.add("quadto");shapeNode2.setSegments(segments);box.add(shapeNode2);var link = new twaver.ShapeLink(shapeNode1, shapeNode2);var list = new twaver.List();list.add({x: 250,y: 230});list.add({x: 350,y: 100});link.addPoint(list);box.add(link);}}useEffect(init, [])return (<><p style={{ fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p><ul style={{ fontSize: "20px", paddingLeft: "50px" }}><li>形状节点(ShapeNode)</li></ul>{/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}<div id="testID" style={{ width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div></>)
}
export default Demo

学习参考：TWaver Documents

Twaver-HTML5基础学习(11)形状节点(ShapeNode)相关推荐

HTML5基础学习——列表标签表单标签
学习内容: 1.列表标签表格是用来显示数据的,那么列表就是用来布局的. 列表最大的特点就是整齐.整洁.有序,它作为布局会更加自由和方便. 根据使用场景不同,列表可以分为三大类:无序列表.有序列表和自 ...
【html5基础学习速成】
HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息.HTML5在从前HTML4.01的基础 ...
前端（HTML5基础学习笔记）
以下学习路线都是基于自己看的黑马程序员视频总结而来学习路线:HTML5 -> CSS3 -> H5C3 一.HTML简介 1. 网页 2. 常用游览器 3. Web标准(重点) 二.HT ...
vue.js 基础学习 11天 -- 转载某培训机构学习资料（转载链接未找到-暂定原创 - 非原创）
Vue.js - Day1 课程介绍前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...
Java基础学习(11)---Java注解和反射
文章目录一.注解概述二.内置注解三.元注解四.自定义注解五.反射概述 ★ 静态语言 VS 动态语言反射机制 Java反射机制研究及应用 Java反射优点和缺点六.Class类获取Cla ...
HTML5基础学习（7）：登录表单制作、表单知识补充
一.登录表单制作有的时候用户需要填写信息,然后把填写完的信息交给服务器.把数据提交给服务器的动作就需要一个新的知识点:表单. (1)常见的表单控件大部分的表单控件都是<input>编写 ...
HTML5基础学习（5）：百度云盘制作、简单表格制作
一.百度云盘制作 (1)绝对地址与相对地址绝对地址:在任何情况下,都可以找得到的地址.网页中下面图片所在的路径叫做绝对路径: <img src="http://1000phone.c ...
HTML5 在线学习网站
HTML5 在线学习网站摘要: HTML5的强大,让更多的人想要系统的学习它.但面对网上五花八门的搜索结果,是否无法抉择?文章作者以自己的实践经验,筛选出来11个在线学习HTML5开发的网站,让HT ...
html5从基础到入门,Html5从入门到精通系列2：Html5基础
Html5从入门到精通系列2:Html5基础 (2015-04-04 11:36:53) 标签: html5 html5教程 html5视频教程 html5从入门到精通 2-1.1.HTML5简介.M ...
HTML html5基础详细笔记第一个模块
第01章-前端核心技术-HTML5基础学习目标了解什么是HTML 掌握HTML标签.元素的概念重点掌握HTML常用头部元素的使用重点掌握HTML标题.段落.文本.图片等排版重点难点掌 ...

Twaver-HTML5基础学习(11)形状节点(ShapeNode)

形状节点(ShapeNode)

添加删除控制点相关方法：

设置segments

例子：

工具类js:

react页面

Twaver-HTML5基础学习(11)形状节点(ShapeNode)相关推荐

最新文章

热门文章