您好,登錄后才能下訂單哦!
這篇文章主要介紹“GoJs中怎么使用HTML方法”,在日常操作中,相信很多人在GoJs中怎么使用HTML方法問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”GoJs中怎么使用HTML方法”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
本文將從提示信息、右鍵菜單、和文本編輯三個方面來體現(xiàn)gojs
和html
之間的交互。而對于html
的使用交互過程中,最主要考慮到的就是html
信息何時展示,何時隱藏.展示的時候展示到什么位置。而觸發(fā)的這個在gojs
中是HTMLInfo
的show
和hide
屬性。給show
和hide
綁定對應的回調(diào)函數(shù)。
在前面的文章中提到過提示信息的展示(toolTip)
,并且講到了toolTip
內(nèi)部的不同繪圖模板的的自定義類型。但是很多時候還是無法滿足一些特殊的展示的樣式,因此可以使用html
渲染之后動態(tài)展示因此就可以了。使用方法如下
//data nodes: [ { key: "1", color: "#99FFFF", text: "三國", 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é)點的key為" + obj.data.key; toolTipDIV.style.display = "block"; }, hideToolTip(diagram) { let toolTipDIV = document.getElementById('toolTipDIV'); toolTipDIV.style.display = "none"; }
show的回調(diào)函數(shù)showToolTip
的兩個參數(shù),第一個是obj
,通過obj.data
可以獲取到對應鼠標移入的節(jié)點數(shù)據(jù)。第二個參數(shù)為diagram
,前面的文章中我們提到過,可以通過diagram.lastInput.viewPoint
獲取到鼠標觸發(fā)該回調(diào)函數(shù)時候的位置對象數(shù)據(jù),其內(nèi)部為x,y
屬性。然后給該位置一個偏移量顯示提示信息,就可以保證在鼠標的旁邊展示。
右鍵菜單和html
的交互和提示信息的相似,都是通過綁定方法來控制位置的顯示和隱藏。因此我們把contextMenu
也配置成myToolTip
。示例如下
{ toolTip: myToolTip, contextMenu:myToolTip }
由上圖可以看出在鼠標移出或者右鍵點擊都可以觸發(fā)提示信息,但是不同的是提示信息有默認顯示的時間,并且會自動消失。但是右鍵點擊的時候因為沒有觸發(fā)hideToolTip
回調(diào)函數(shù),因此不會自動消失,需要點擊畫布才能把提示消息顯示消失。
文本編輯的交互和提示信息略有不同。因為是文本編輯,所以必須是輸入框類型的,但是還可以選select
選擇器進行有選項的編輯。下面以select
為例,可以選擇所有節(jié)點的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 = ['三國','魏','蜀','吳']; 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;
文本編輯的交互首先需要對new go.HTMLInfo()
進行一個實例化,和上面一樣也是通過show
方法和hide
方法進行一個顯示隱藏的操作。然后通過go.Spot.TopLeft
獲取點擊文本的左上角的位置。然后給創(chuàng)建的select
定位一個相對的位置。然后通過new go.HTMLInfo()
的valueFunction
方法把select
選中的option
的值賦給編輯的文本TextBlock
。從而實現(xiàn)一個文本編輯選擇的過程。
到此,關(guān)于“GoJs中怎么使用HTML方法”的學習就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。