这篇文章主要介绍“GoJs中怎么使用HTML方法”，在日常操作中，相信很多人在GoJs中怎么使用HTML方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”GoJs中怎么使用HTML方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
使用html的方式
本文将从提示信息、右键菜单、和文本编辑三个方面来体现
gojs和
html之间的交互。而对于
html的使用交互过程中，最主要考虑到的就是
html信息何时展示，何时隐藏.展示的时候展示到什么位置。而触发的这个在
gojs中是
HTMLInfo的
show和
hide属性。给
show和
hide绑定对应的回调函数。
提示信息的html交互
在前面的文章中提到过提示信息的展示
(toolTip)，并且讲到了
toolTip内部的不同绘图模板的的自定义类型。但是很多时候还是无法满足一些特殊的展示的样式，因此可以使用
html渲染之后动态展示因此就可以了。使用方法如下
//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 = "此节点的key为" + obj.data.key;
toolTipDIV.style.display = "block";
},
hideToolTip(diagram) {
let toolTipDIV = document.getElementById('toolTipDIV');
toolTipDIV.style.display = "none";
}show的回调函数
showToolTip的两个参数，第一个是
obj，通过
obj.data可以获取到对应鼠标移入的节点数据。第二个参数为
diagram，前面的文章中我们提到过，可以通过
diagram.lastInput.viewPoint获取到鼠标触发该回调函数时候的位置对象数据，其内部为
x,y属性。然后给该位置一个偏移量显示提示信息，就可以保证在鼠标的旁边展示。
右键菜单的html交互
右键菜单和
html的交互和提示信息的相似，都是通过绑定方法来控制位置的显示和隐藏。因此我们把
contextMenu也配置成
myToolTip。示例如下
{
toolTip: myToolTip,
contextMenu:myToolTip
}由上图可以看出在鼠标移出或者右键点击都可以触发提示信息，但是不同的是提示信息有默认显示的时间，并且会自动消失。但是右键点击的时候因为没有触发
hideToolTip回调函数，因此不会自动消失，需要点击画布才能把提示消息显示消失。
文本编辑的html交互
文本编辑的交互和提示信息略有不同。因为是文本编辑,所以必须是输入框类型的，但是还可以选
select选择器进行有选项的编辑。下面以
select为例，可以选择所有节点的
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获取点击文本的左上角的位置。然后给创建的
select定位一个相对的位置。然后通过
new go.HTMLInfo()的
valueFunction方法把
select选中的
option的值赋给编辑的文本
TextBlock。从而实现一个文本编辑选择的过程。