javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > GoJs使用HTML

GoJs中使用HTML方法示例

作者:沅芷湘兰

这篇文章主要为大家介绍了GoJs中使用HTML方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

gojs中因为有自己的绘图模板和一些语法限制,实际上都是在canvas标签的特性上进行的封装。但是有些时候其拓展就不能满足需求的时候,可以对其和html结构进行一些交互,达到自己显示上的特殊需求的展示。

使用html的方式

本文将从提示信息、右键菜单、和文本编辑三个方面来体现gojshtml之间的交互。而对于html的使用交互过程中,最主要考虑到的就是html信息何时展示,何时隐藏.展示的时候展示到什么位置。而触发的这个在gojs中是HTMLInfoshowhide属性。给showhide绑定对应的回调函数。

提示信息的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。从而实现一个文本编辑选择的过程。

总结

在很多时候。有canvas拓展封装的gojs无法满足提示信息的样式或者用html实现起来更加简单,可以用gojshtml的交互来实现,gojs是通过JavaScript来控制html元素的显示隐藏和显示的位置。

以上就是GoJs中使用HTML方法示例的详细内容,更多关于GoJs使用HTML的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文