开发者

GoJs中使用HTML方法示例

开发者 https://www.devze.com 2023-05-05 11:45 出处:网络 作者: 沅芷湘兰
目录前言使用html的方式提示信息的html交互右键菜单的html交互文本编辑的html交互总结前言
目录
  • 前言
  • 使用html的方式
    • 提示信息的html交互
    • 右键菜单的html交互
    • 文本编辑的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('too开发者_Go入门lTipDIV');
        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";
    }
    

    GoJs中使用HTML方法示例

    show的回调函数showToolTip的两个参数,第一个是obj,通过obj.data可以获取到对应鼠标移入的节点数据。第二个参数为diagram,前面的文章中我们提到过,可以通过diagram.lastInput.viewPoint获取到鼠标触发该回调函数时候的位置对象数据,其内部为x,y属性。然后给该位置一个偏移量显示提示信息,就可以保证在鼠标的旁边展示。

    右键菜单的html交互

    右键菜单和html的交互和提示信息的相似,都是通过绑定方法来控制位置的显示和隐藏。因此我们把contextMenu也配置成myToolTip。示例如下

    {
        toolTip: myToolTip,
        contextMenu:myToolTip
    }
    

    GoJs中使用HTML方法示例

    由上图可以看出在鼠标移出或者右键点击都可以触发提示信息,但是不同的是提示信息有默认显示的时间,并且会自android动消失。但是右键点击的时候因为没有触发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);
    }
    customandroidEditor.valueFunction = function() { return customSelectBox.value; }
    this.myDiagram.toolManager.textEditingTool.defaultTextEditor = customEditor;
    

    GoJs中使用HTML方法示例

    文本编辑的交互首先需要对new go.HTMLInfo()进行一个实例化,和上面一样也是通过show方法和hide方法进行一个显示隐藏的操作。然后通过go.Spot.TopLeft获取点击文本的左上角的位置。然后js给创建的select定位一个相对的位置。然后通过new go.HTMLInfo()valueFunction方法把select选中的option的值赋给编辑的文本TextBlock。从而实现一个文本编辑选择的过程。

    总结

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

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

    0

    精彩评论

    暂无评论...
    验证码 换一张
    取 消

    关注公众号