基于 HTML5 Canvas 的拓扑组件 ToolTip 应用

时间 2020-03-27

标签基于 html5 html canvas 拓扑组件 tooltip 应用栏目 HTML5 繁體版

原文原文链接

前言

ToolTip 效果是网页制做中常见的使用特效。当用户将鼠标悬浮在某个控件上时，ToolTip 显示并向用户展现相应的提示信息；当鼠标离开时，ToolTip 隐藏。通常状况下，咱们使用 ToolTip 只是显示一句话或几个字，其实咱们还能够展现不少信息。而今天的重点则是经过 Hightopo 的 HT for Web 产品来制做多种样式的 ToolTip。html

首页地址：https://www.hightopo.com/index.htmlnode

实现方式

HT 共有八种具备可配置 ToolTip 功能的的视图组件，分别是 ht.graph.GraphView、ht.graph3d.Graph3dView、ht.widget.ListView、ht.widget.PropertyView、ht.widget.TableView、ht.widget.TreeView、ht.widget.TreeTableView、ht.widget.Toolbar。json

ht.Data 是 HT 最基础的数据类型，用户可将业务信息存储在 Data 对象属性上，目前提供了 Node、Edge、Column等子类应用于不一样视图组件中，本文中会用 data 来统称。缓存

显示基础的文本信息

首先创建一个视图组件（这里咱们以 ht.graph.GraphView 为例，其他组件基本与之相同），经过调用组件的 enableToolTip() 方法能够启用 ToolTip 功能，以后建立一个测试用的 node，并调用它的 setToolTip() 方法设置它的 ToolTip 要显示的内容。这样就能够实现上图中的效果，当个人鼠标移动到图标上，ToolTip 就会显示出来。具体实现代码以下：框架

var dataModel = new ht.DataModel();
// 创建视图组件
var graphView = new ht.graph.GraphView(dataModel);     
dataModel.setBackground('black');
// 开启 ToolTip
graphView.enableToolTip();                             

var node = new ht.Node();
node.setPosition(600, 150);
node.setImage('symbols/ht.json');
// 设置 ToolTip 内容
node.setToolTip('HT for Web');                         
dataModel.add(node);

graphView.addToDOM();

这部分我想额外聊一下几个点ide

在使用 HT 默认设置的 ToolTip 格式时，经过 setToolTip() 设置好的内容，不管内容多长都会显示为一行，“\n” 换行符和 “\r” 回车符将不会起到做用。
在使用 HT 默认设置的 ToolTip 格式时，若是开启了 ToolTip，可是并无对目标进行相应的设置，那么将不会显示 ToolTip。
enableToolTip() 为开启，diableToolTip() 为关闭，上图中我经过右上角的按钮调用这两个方法进行了 ToolTip 的开启和关闭，须要注意的是 ToolTip 默认是处于关闭状态的。
node 能够经过 getToolTip() 方法来查看当前已设置的 ToolTip 内容。
在 ht.Default 对象中包含了六个 ToolTip 的配置参数，若是想要更改这些配置，须要经过全局的 htconfig 变量名指定，因为 HT 系统只在初始化时读取 htconfig 的配置信息，所以 htconfig 必须在引入 ht.js 包以前初始化好，运行状态时修改 htconfig 变量不会再起做用，示例代码以下：

<script> htconfig = {
        Default: {
            // 组件的ToolTip显示的延迟间隔
            toolTipDelay: 100,              
            // 组件的ToolTip显示的状况下，若是鼠标移动到新的位置时，ToolTip是否实时持续跟进
            toolTipContinual: true,
            // ToolTip的背景颜色
            toolTipBackground: 'yellow',     
            // ToolTip的文字颜色
            toolTipLabelColor: '#000',       
            // ToolTip的文字字体
            toolTipLabelFont: '12px arial, sans-serif',    
            // ToolTip的阴影颜色
            toolTipShadowColor: 'rgba(0,0,0,0.35)' }
    };
</script> 
<script src="js/ht.js"></script>

显示自定义内容

除了默认的文本信息，HT 也提供了自定义 ToolTip 的功能，大部分视图组件也有一个 getToolTip() 方法，该方法可重载返回自定义的 toolTip 文字。在下图的这个例子中，左侧部分继续使用了 ht.graph.GraphView，右侧部分的上方则是采用了 ht.widget.PropertyView，下方采用了 ht.widget.FormPane。性能

首先咱们先来看一下左侧部分，因为大部分组件的在 ToolTip 上的使用方法相似，因此咱们仍是以 GraphView 来做为表明例子。从图中咱们能够看到，ToolTip 的内容变为了两行，可是在上一部分提到过使用 HT 默认设置的格式是没法对内容进行换行的。这里就是由于重载了 graphView 的 getToolTip()，getToolTip() 会传入一个交互事件 event 参数，经过 getDataAt() 方法来获取产生交互事件的 data，以后咱们就能够根据 data 进行相应的设置。示例代码以下：测试

getColor = function(value) {
    if (value < 40)
        return '#00A406';
    if (value < 70)
        return '#FFCC00';
    return '#A60000';
};

graphView.getToolTip = function(e){
    var data = graphView.getDataAt(e);
    if(data){
        var cpu = data.a('cpu'),
            mem = data.a('mem'),
            html = '<div >' + 
                '<span >CPU:&nbsp;&nbsp;</span> ' 
                + '<span >' + cpu + '%</span>'
                + '<br>' +
                '<span >MEM:&nbsp;&nbsp;</span>' 
                + '<span >' + mem + '%</span>'
                + '</div>';  
        return {html: html};  
    }    
};

从以上代码中能够看出本例是经过 innerHTML 将自定义的 html 效果加入到了 tooltip 的 div 中从而展现了当前 data 数据绑定中的内容，鉴于 graphView 中只设置一个 data，因此重载方法中并无对 data 做更严格的判断，只要 data 存在就会进行呈现，在正式的项目开发中可能会有多个 data 须要不一样的自定义格式。在此状况下，咱们能够去判断 getDataAt() 获取到的 data 是哪个，从而对不一样的 data 进行不一样的设置；也能够继续使用 setToolTip()，而后对 getDataAt() 获取到的 data 调用 getToolTip()，对获取的值进行处理。字体

propertyView.addProperties([
    {
        name: 'name',
        displayName: 'Name' },
    {
        displayName: 'CPU',
        drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view) {
            drawFunc(g, data.a('cpu'), x, y, w, h);
        },
        getToolTip: function(data, isValue, propertyView){
            return isValue ? data.a('cpu') + '%' : 'CPU usage percentage';
        }
    },
    {
        displayName: 'MEM',
        drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view) {
            drawFunc(g, data.a('mem'), x, y, w, h);
        },
        getToolTip: function(data, isValue, propertyView){
            return isValue ? data.a('mem') + '%' : 'Memory usage percentage';
        }        
    }
]);

上述代码为右上方 propertyView 的部分配置代码，ht.widget.PropertyView 和其他七种组件则有些不一样，它的每个子元素 ht.Property 能够经过 getToolTip 方法设置不一样的自定义内容。因为它的特殊性，getToolTip 会传入三个参数：data 表明 dataModel 中当前被选中的 data 对象，同时也是 propertyView 当前展现的 data 对象；isValue 表明当前鼠标位置是否在右侧属性值范围内，若值为 false 则表明在左侧属性名范围内；propertyView 则表明 property 当前所在的属性组件中。 ui

使用 HT UI 的 Popover 插件

UI 库是一款功能强大的界面组件库，基于 HT 核心包的优秀框架和 HTML5 先进的 Canvas 机制，具备易上手、高性能、易扩展、组件丰富、跨平台等特色。弹出框容器 ht.ui.Popover 和 ToolTip 相似，能够在宿主组件周围显示一些提示信息。在使用时须要引入 ht-ui.js 文件。

在 HT UI 中使用 Popover 插件。

在这个例子中，添加了三个 UI 中的 Button 组件，并分别设置了三种不一样的 Popover。

第一种是经过 ht.ui.HtmlView 嵌套了一个 iframe，HtmlView 能够包装任意 HTML 内容，如 HTML 文本、DOM 对象。
右侧的第二个例子则是经过 ht.ui.HTView 包装了 HT 核心包中的组件 ht.graph3d.Graph3dView。
最后一个例子显示的是 Echarts 的图表。与前两种使用 UI 自带的组件不一样，这里咱们自定义了一个 ht.ui.EchartView 组件实现 Echarts 的显示功能，UI 库提供了自定义组件的功能，像上图中的 Button 也能够去本身定义，不过这里咱们就不详谈了。

// htmlView
var button = new ht.ui.Button();
button.setText('hover me');

var htmlView = new ht.ui.HtmlView();
htmlView.setContent('<iframe border="0"  src="http://www.hightopo.com"></iframe>');

var popover = new ht.ui.Popover();
popover.setContentView(htmlView);
button.setPopover(popover1, 'hover');

button.addToDOM(window, { x: 70, y: 20, width: 80, height: 24 });

这里我只贴出了第一种的完整代码做为示例。首先咱们定义了一个 button 对象做为宿主组件，而后定义一个 htmlView 并调用它的 setContent 方法去包装要显示的内容，最后将其加入到 popover 中，设置给 button。若是须要点击显示的话，也能够将 hover 改成 click。

在 HT 中使用 Popover 插件

在 HT 中也是可使用 Popover 插件的，接下来我仍是以 graphView 为例来介绍一下。

上图内容是在 graphView 中添加了两个 node，并为它们设置了内容相同的两个 Popover。和在 UI 中不一样，Popover 并无经过宿主调用 setPopover 进行配置，而是缓存在了 node 的私有变量 _popover 上，经过控制 Popover 的 hide() 和 show() 进行隐藏和显示。

function getScreenRect(graphView, node) {
    var tx = graphView.tx(),
        ty = graphView.ty(),
        zoom = graphView.getZoom(),
        pos = node.getPosition(),
        width = node.getWidth() * zoom,
        height = node.getHeight() * zoom;

    return {
        x: tx + pos.x * zoom - width / 2,
        y: ty + pos.y * zoom - height / 2,
        width: width,
        height: height
    }
}

function init() {
    graphView = new ht.graph.GraphView();
    dataModel = graphView.dm();

    node1 = new ht.Node();
    node1.setPosition(200, 100);
    node1.setName('Device1');
    node1._popover = createPopover('top');
    dataModel.add(node1); graphView.getView().addEventListener('mousemove', function (e) {
        var oldHoverNode = graphView._hoverNode;
        var newNode = graphView.getDataAt(e);
        if (oldHoverNode !== newNode) {
            if (oldHoverNode) {
                oldHoverNode._popover.hide();
            }
            if (newNode && newNode._popover) {
                var newPopover = newNode._popover;
                var rect = getScreenRect(graphView, newNode);
                newPopover.setMaster(rect);
                newNode._popover.show();
            }
            graphView._hoverNode = newNode;
        }
    });

    graphView.addToDOM();
}

经过 getView() 能够获取到拓扑组件的根层 div，对其监听鼠标移动事件，当鼠标移动到一个新节点上就会显示其 Popover，同时对原节点的 Popover 进行隐藏，以后在 graphView 上添加私有变量进行记录。在事件监听中 Popover 调用了 setMaster() 方法，并传入了当前节点的矩形范围，这是由于 Popover 须要根据宿主的矩形范围进行定位显示。

总结

ToolTip 的使用大多数状况下是显示一张图片的名称，或是一个 logo 的做用。但 HT 除了提供 ToolTip 的基本功能，还给予了扩展的空间，能够显示一个图表，也能够显示一个 3D 界面。除此以外，也许你还会有其余想展现的东西。若是你感兴趣，就请点击文章开头的连接，看一看 HT 还能作些什么后就联系咱们吧。