基於 HTML5 Canvas 的拓撲元件 ToolTip 應用

圖撲軟體發表於2020-03-26
HTMLCanvas元件

前言

ToolTip 效果是網頁製作中常見的使用特效。當使用者將滑鼠懸浮在某個控制元件上時，ToolTip 顯示並向使用者展示相應的提示資訊；當滑鼠離開時，ToolTip 隱藏。一般情況下，我們使用 ToolTip 只是顯示一句話或幾個字，其實我們還可以展示很多資訊。而今天的重點則是通過 Hightopo 的 **HT for Web **產品來製作多種樣式的 ToolTip。

首頁地址：https://www.hightopo.com/index.html

實現方式

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。

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();

這部分我想額外聊一下幾個點

  • 在使用 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 當前所在的屬性元件中。

使用 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 還能做些什麼後就聯絡我們吧。

相關文章