GoJs中使用HTML方法示例
前言
在gojs
中因?yàn)橛凶约旱睦L圖模板和一些語(yǔ)法限制,實(shí)際上都是在canvas
標(biāo)簽的特性上進(jìn)行的封裝。但是有些時(shí)候其拓展就不能滿(mǎn)足需求的時(shí)候,可以對(duì)其和html
結(jié)構(gòu)進(jìn)行一些交互,達(dá)到自己顯示上的特殊需求的展示。
使用html的方式
本文將從提示信息、右鍵菜單、和文本編輯三個(gè)方面來(lái)體現(xiàn)gojs
和html
之間的交互。而對(duì)于html
的使用交互過(guò)程中,最主要考慮到的就是html
信息何時(shí)展示,何時(shí)隱藏.展示的時(shí)候展示到什么位置。而觸發(fā)的這個(gè)在gojs
中是HTMLInfo
的show
和hide
屬性。給show
和hide
綁定對(duì)應(yīng)的回調(diào)函數(shù)。
提示信息的html交互
在前面的文章中提到過(guò)提示信息的展示(toolTip)
,并且講到了toolTip
內(nèi)部的不同繪圖模板的的自定義類(lèi)型。但是很多時(shí)候還是無(wú)法滿(mǎn)足一些特殊的展示的樣式,因此可以使用html
渲染之后動(dòng)態(tài)展示因此就可以了。使用方法如下
//data nodes: [ { key: "1", color: "#99FFFF", text: "三國(guó)", figure: "Rectangle" }, { key: "1-1", color: "#FF0000", text: "魏", figure: "Circle" }, { key: "1-2", color: "#FFFF66", text: "蜀", figure: "Circle" }, { key: "1-3", color: "#0000FF", text: "吳", figure: "Circle" }, ], links: [ { from: "1", to: "1-1", }, { from: "1", to: "1-2", }, { from: "1", to: "1-3", }, ], //methods this.myDiagram.nodeTemplate = $$( go.Node, "Vertical", { toolTip: myToolTip }, $$( go.Shape, "Circle", { width: 30, height: 30, name: "ICON" }, // new go.AnimationTrigger('stroke'), new go.Binding("fill", "color"), new go.Binding("figure", "figure") ), $$(go.TextBlock, new go.Binding("text", "text")) ); showToolTip(obj, diagram) { let toolTipDIV = document.getElementById('toolTipDIV'); let pt = diagram.lastInput.viewPoint; toolTipDIV.style.left = (pt.x + 10) + "px"; toolTipDIV.style.top = (pt.y + 10) + "px"; document.getElementById('toolTipParagraph').textContent = "此節(jié)點(diǎn)的key為" + obj.data.key; toolTipDIV.style.display = "block"; }, hideToolTip(diagram) { let toolTipDIV = document.getElementById('toolTipDIV'); toolTipDIV.style.display = "none"; }
show的回調(diào)函數(shù)showToolTip
的兩個(gè)參數(shù),第一個(gè)是obj
,通過(guò)obj.data
可以獲取到對(duì)應(yīng)鼠標(biāo)移入的節(jié)點(diǎn)數(shù)據(jù)。第二個(gè)參數(shù)為diagram
,前面的文章中我們提到過(guò),可以通過(guò)diagram.lastInput.viewPoint
獲取到鼠標(biāo)觸發(fā)該回調(diào)函數(shù)時(shí)候的位置對(duì)象數(shù)據(jù),其內(nèi)部為x,y
屬性。然后給該位置一個(gè)偏移量顯示提示信息,就可以保證在鼠標(biāo)的旁邊展示。
右鍵菜單的html交互
右鍵菜單和html
的交互和提示信息的相似,都是通過(guò)綁定方法來(lái)控制位置的顯示和隱藏。因此我們把contextMenu
也配置成myToolTip
。示例如下
{ toolTip: myToolTip, contextMenu:myToolTip }
由上圖可以看出在鼠標(biāo)移出或者右鍵點(diǎn)擊都可以觸發(fā)提示信息,但是不同的是提示信息有默認(rèn)顯示的時(shí)間,并且會(huì)自動(dòng)消失。但是右鍵點(diǎn)擊的時(shí)候因?yàn)闆](méi)有觸發(fā)hideToolTip
回調(diào)函數(shù),因此不會(huì)自動(dòng)消失,需要點(diǎn)擊畫(huà)布才能把提示消息顯示消失。
文本編輯的html交互
文本編輯的交互和提示信息略有不同。因?yàn)槭俏谋揪庉?所以必須是輸入框類(lèi)型的,但是還可以選select
選擇器進(jìn)行有選項(xiàng)的編輯。下面以select
為例,可以選擇所有節(jié)點(diǎn)的text
信息。其示例代碼如下
let customEditor = new go.HTMLInfo(); let customSelectBox = document.createElement("select"); customEditor.show = function(textBlock, diagram, tool) { if (!(textBlock instanceof go.TextBlock)) return; customSelectBox.innerHTML = ""; let list = ['三國(guó)','魏','蜀','吳']; for (let i = 0; i < list.length; i++) { let op = document.createElement("option"); op.text = list[i]; op.value = list[i]; customSelectBox.add(op, null); } customSelectBox.value = textBlock.text; customSelectBox.addEventListener("keydown", function(e) { var keynum = e.which; if (keynum == 13) { tool.acceptText(go.TextEditingTool.Enter); return; } else if (keynum == 9) { tool.acceptText(go.TextEditingTool.Tab); e.preventDefault(); return false; } else if (keynum === 27) { tool.doCancel(); if (tool.diagram) tool.diagram.focus(); } }, false); let loc = textBlock.getDocumentPoint(go.Spot.TopLeft); let pos = _this.myDiagram.transformDocToView(loc); customSelectBox.style.left = pos.x + "px"; customSelectBox.style.top = pos.y+ 30 + "px"; customSelectBox.style.position = 'absolute'; customSelectBox.style.zIndex = 100; _this.myDiagram.div.appendChild(customSelectBox); } customEditor.hide = function(diagram, tool) { diagram.div.removeChild(customSelectBox); } customEditor.valueFunction = function() { return customSelectBox.value; } this.myDiagram.toolManager.textEditingTool.defaultTextEditor = customEditor;
文本編輯的交互首先需要對(duì)new go.HTMLInfo()
進(jìn)行一個(gè)實(shí)例化,和上面一樣也是通過(guò)show
方法和hide
方法進(jìn)行一個(gè)顯示隱藏的操作。然后通過(guò)go.Spot.TopLeft
獲取點(diǎn)擊文本的左上角的位置。然后給創(chuàng)建的select
定位一個(gè)相對(duì)的位置。然后通過(guò)new go.HTMLInfo()
的valueFunction
方法把select
選中的option
的值賦給編輯的文本TextBlock
。從而實(shí)現(xiàn)一個(gè)文本編輯選擇的過(guò)程。
總結(jié)
在很多時(shí)候。有canvas
拓展封裝的gojs
無(wú)法滿(mǎn)足提示信息的樣式或者用html
實(shí)現(xiàn)起來(lái)更加簡(jiǎn)單,可以用gojs
和html
的交互來(lái)實(shí)現(xiàn),gojs
是通過(guò)JavaScript
來(lái)控制html
元素的顯示隱藏和顯示的位置。
以上就是GoJs中使用HTML方法示例的詳細(xì)內(nèi)容,更多關(guān)于GoJs使用HTML的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Flutter實(shí)現(xiàn)仿微信底部菜單欄功能
這篇文章主要介紹了Flutter實(shí)現(xiàn)仿微信底部菜單欄,需要的朋友可以參考下2019-09-09JS實(shí)現(xiàn)讓訪(fǎng)問(wèn)者自助選擇網(wǎng)頁(yè)文字顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)讓訪(fǎng)問(wèn)者自助選擇網(wǎng)頁(yè)文字顏色的方法,涉及javascript針對(duì)radio表單控件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02JavaScript動(dòng)態(tài)操作表格實(shí)例(添加,刪除行,列及單元格)
這篇文章主要是對(duì)JavaScript動(dòng)態(tài)操作表格實(shí)例(添加,刪除行,列及單元格)進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11前端頁(yè)面適配之postcss-px-to-viewport實(shí)現(xiàn)步驟
postcss-px-to-viewport是一個(gè)PostCSS插件,它可以將px單位轉(zhuǎn)換為視口單位(vw、vh?或?vmin),這篇文章主要給大家介紹了關(guān)于前端頁(yè)面適配之postcss-px-to-viewport的實(shí)現(xiàn)步驟,需要的朋友可以參考下2024-03-03javascript創(chuàng)建對(duì)象的3種方法
這篇文章主要介紹了javascript創(chuàng)建對(duì)象的3種方法,對(duì)比分析js創(chuàng)建對(duì)象三種方式的優(yōu)缺點(diǎn),感興趣的小伙伴們可以參考一下2016-11-11javascript自動(dòng)給文本url地址增加鏈接的方法分享
這篇文章主要介紹了javascript自動(dòng)給文本url地址增加鏈接的方法,有需要的朋友可以參考一下2014-01-01JavaScript基于ChatGPT?API實(shí)現(xiàn)劃詞翻譯瀏覽器腳本
最近?GitHub?上有個(gè)基于?ChatGPT?API?的瀏覽器腳本,openai-translator,?短時(shí)間內(nèi)?star?沖到了?9.7k,拋開(kāi)?tauri?是使用?rust?部分,那瀏覽器部分實(shí)現(xiàn)還是比較簡(jiǎn)單的,今天我們就來(lái)手動(dòng)實(shí)現(xiàn)一下2023-03-03