Twaver-HTML5基础学习(38)劈分面板SplitPane

SplitPane

劈分面板

是用于将一块面板劈分成两块的面板，两块面板所占的比例大小是由劈分条的位置来决定的，并且可以通过移动劈分条来动态改变这两块面板的大小。
劈分面板通过设置orientation来进行水平和垂直劈分

使用：

  var BottomPane = new twaver.controls.SplitPane(tree, overview, 'horizontal', 0.3);var pane = new twaver.controls.SplitPane(network, BottomPane, 'vertical', 0.6);

四个参数：

Constructor
twaver.controls.SplitPane ( [firstView] [nextView] [orientation] [position] ) twaver.controls.SplitPane
Parameters:
[firstView] Object optional
劈分面版的第一块面板，面板可以为DIV或ControlBase类型的对象[nextView] Object optional
劈分面版的第二块面板，面板可以为DIV或ControlBase类型的对象
[orientation] String optional
劈分的方向，可以为’horizontal’或 ‘vertical’
[position] Number optional
劈分的百分比

horizontal：横向分开两个pane
vertical：纵向分开两个pane;
最后一个参数代表第一个参数对象的大小比例，范围是0-1；

分割好之后，将最终的paneObj设置如下：

 var BottomPane = new twaver.controls.SplitPane(tree, overview, 'horizontal', 0.3);var pane = new twaver.controls.SplitPane(network, BottomPane, 'vertical', 0.6);var view = pane.getView();view.style.left = '0px';view.style.top = '0px';view.style.right = '0px';view.style.bottom = '0px';document.getElementById("testID").appendChild(view);

例子代码:

/** @Descripttion: * @version: * @Author: ZhangJunQing* @Date: 2022-04-18 14:44:05* @LastEditors: ZhangJunQing* @LastEditTime: 2022-05-06 14:30:46*/
import React, { useEffect, useState } from 'react'const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {const [network, setnetwork] = useState({})const [src, setsrc] = useState("")const init = () => {var box = new twaver.ElementBox();var network = new twaver.vector.Network(box);setnetwork(network)network.invalidateElementUIs();var autoLayouter = new twaver.layout.AutoLayouter(box);network.setScrollBarVisible(false)var tree = new twaver.controls.Tree(box);var overview = new twaver.vector.Overview(network);var BottomPane = new twaver.controls.SplitPane(tree, overview, 'horizontal', 0.3);var pane = new twaver.controls.SplitPane(network, BottomPane, 'vertical', 0.6);var view = pane.getView();view.style.left = '0px';view.style.top = '0px';view.style.right = '0px';view.style.bottom = '0px';document.getElementById("testID").appendChild(view);var from1 = new twaver.Node();from1.setName('from1');box.add(from1);var to = new twaver.Node();to.setName('To');box.add(to);var from2 = new twaver.Node();from2.setName('from2');box.add(from2);var from3 = new twaver.Node();from3.setName('from3');box.add(from3);var from4 = new twaver.Node();from4.setName('from4');box.add(from4);var link = new twaver.Link(from1, to);var link2 = new twaver.Link(from2, to);var link3 = new twaver.Link(from3, to);var link4 = new twaver.Link(from4, to);link.setName('Link');link2.setName('link2');link3.setName('link3');link4.setName('link4');box.add(link);box.add(link2);box.add(link3);box.add(link4);autoLayouter.doLayout('symmetry', function () {network.zoomOverview(false);});}useEffect(init, [])return (<><p style={{ fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p><ul style={{ fontSize: "20px", paddingLeft: "50px" }}><li>Overview</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

Twaver-HTML5基础学习(38)劈分面板SplitPane相关推荐

PR基础学习(六) 时间轴面板
下面就单独简单介绍时间轴面板,所使用的的截图也只截时间轴面板部分. 音频轨道,视频轨道一个视频,由视频轨道(video track)和音频轨道(audio track)组成,在时间轴面板里面,编辑也 ...
【html5基础学习速成】
HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息.HTML5在从前HTML4.01的基础 ...
HTML5基础学习——列表标签表单标签
学习内容: 1.列表标签表格是用来显示数据的,那么列表就是用来布局的. 列表最大的特点就是整齐.整洁.有序,它作为布局会更加自由和方便. 根据使用场景不同,列表可以分为三大类:无序列表.有序列表和自 ...
前端（HTML5基础学习笔记）
以下学习路线都是基于自己看的黑马程序员视频总结而来学习路线:HTML5 -> CSS3 -> H5C3 一.HTML简介 1. 网页 2. 常用游览器 3. Web标准(重点) 二.HT ...
HTML5基础学习（7）：登录表单制作、表单知识补充
一.登录表单制作有的时候用户需要填写信息,然后把填写完的信息交给服务器.把数据提交给服务器的动作就需要一个新的知识点:表单. (1)常见的表单控件大部分的表单控件都是<input>编写 ...
HTML5基础学习（5）：百度云盘制作、简单表格制作
一.百度云盘制作 (1)绝对地址与相对地址绝对地址:在任何情况下,都可以找得到的地址.网页中下面图片所在的路径叫做绝对路径: <img src="http://1000phone.c ...
HTML html5基础详细笔记第一个模块
第01章-前端核心技术-HTML5基础学习目标了解什么是HTML 掌握HTML标签.元素的概念重点掌握HTML常用头部元素的使用重点掌握HTML标题.段落.文本.图片等排版重点难点掌 ...
HTML5 在线学习网站
HTML5 在线学习网站摘要: HTML5的强大,让更多的人想要系统的学习它.但面对网上五花八门的搜索结果,是否无法抉择?文章作者以自己的实践经验,筛选出来11个在线学习HTML5开发的网站,让HT ...
html5代码_干货篇！零基础学习HTML5要用到的6款开发工具
HTML5不是一种编程语言,而是一种标记语言,是程序员开发网页必用的一种开发工具.目前来说HTML5技术是非常火爆的,而且有专家预估在未来的10年HTML技术都不会过时.HTML5前景好,来学HTML ...
html5语句大全,html5基础语句（学习）
起风了兼容性问题文档类型设定字符设定常用新标签新增的input type属性值: 常用新属性综合案例兼容性问题文档类型设定 document HTML http://blog.sina ...

Twaver-HTML5基础学习(38)劈分面板SplitPane

SplitPane

使用：

分割好之后，将最终的paneObj设置如下：

Twaver-HTML5基础学习(38)劈分面板SplitPane相关推荐

最新文章

热门文章