欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

GoJs節(jié)點(diǎn)繪圖模板之go.Node使用示例詳解

 更新時(shí)間：2023年05月05日 10:31:14   作者：沅芷湘蘭  
這篇文章主要為大家介紹了GoJs節(jié)點(diǎn)繪圖模板go.Node使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

介紹了很多的節(jié)點(diǎn)內(nèi)的繪圖模板，包括go.TextBlock（文字）、go.Shape（幾何圖形）、go.Picture（圖片）。還有這些元素的包裹面板go.Panel。現(xiàn)在我們來(lái)介紹一下整個(gè)節(jié)點(diǎn)的繪圖模板go.Node的一些特性。

go.Node的使用

結(jié)合前面的繪圖模板

在使用go.Node的時(shí)候，我們需要用到實(shí)例上的配置項(xiàng)nodeTemplate來(lái)進(jìn)行對(duì)應(yīng)的配置，因?yàn)?code>go.Node是繼承了go.Panel類。所以上節(jié)中說(shuō)的go.Panel中的類型在go.Node中也可以選擇使用。

import caopi from "../../assets/caopi.jpeg"
import liubei from "../../assets/liubei.jpg"
import sunquan from "../../assets/sunquan.jpeg"
//data
nodes: [
{
  key: "1",
  text: "三國(guó)人物志",
  desc:"滾滾長(zhǎng)江東逝水,浪花淘盡英雄"
},
{
  key: "1-1",
  text: "曹魏",
  desc:"三國(guó)時(shí)期割據(jù)政權(quán)之一，后世史家多稱曹魏"
},
{
  key: "1-1-1",
  text: "曹丕",
  source:caopi,
  desc:"字子桓,曹魏開(kāi)國(guó)皇帝"
},
{
  key: "1-2",
  text: "蜀漢",
  desc:"三國(guó)時(shí)期割據(jù)政權(quán)之一，后世史家多稱蜀漢"
},
{
  key: "1-2-1",
  text: "劉備",
  source:liubei,
  desc:"字玄德,三國(guó)時(shí)期蜀漢開(kāi)國(guó)皇帝"
},
{
  key: "1-3",
  text: "孫吳",
  desc:"三國(guó)時(shí)期割據(jù)政權(quán)之一，后世史家多稱孫吳"
},
{
  key: "1-3-1",
  text: "孫權(quán)",
  source:sunquan,
  desc:"字仲謀,三國(guó)時(shí)期孫吳開(kāi)國(guó)皇帝"
},
],
links: [
{
  from: "1",
  to: "1-1",
},
{
  from: "1-1",
  to: "1-1-1",
},
{
  from: "1",
  to: "1-2",
},
{
  from: "1-2",
  to: "1-2-1",
},
{
  from: "1-3",
  to: "1-3-1",
},
{
  from: "1",
  to: "1-3",
},
],
//methods
this.myDiagram.nodeTemplate = $$(
    go.Node,
    "Horizontal",
    $$(go.Panel,"Auto",
        $$(go.Shape,"RoundedRectangle",
        {
          desiredSize: new go.Size(120, 80),//設(shè)置圖形的尺寸
          strokeWidth: 1,//設(shè)置邊框的寬度
          parameter1: 3,//設(shè)置圖形的圓角
          fill:null,//設(shè)置內(nèi)部填充的顏色
          stroke:"#67B73C"http://設(shè)置邊框的顏色
        }, 
      ),
      $$(go.Panel,"Table",{desiredSize: new go.Size(120, 80)},
            $$(go.TextBlock,{row:0,column: 0,alignment: go.Spot.Top,margin:5,font: "bold 14px sans-serif ",stroke:"#FF0000"},new go.Binding("text")),
            $$(go.TextBlock,{row:1,column: 0,alignment: go.Spot.Left,desiredSize: new go.Size(70, 50),stroke:"#FF9900"},new go.Binding("text","desc")),
            $$(go.Picture,{ row:0,column: 1,rowSpan:2,desiredSize: new go.Size(50, 50) },new go.Binding("source")),
        )
    ),
  );

對(duì)節(jié)點(diǎn)內(nèi)部進(jìn)行簡(jiǎn)單的元素添加之后，就可以看到上圖中顯示的這樣，有一個(gè)title顯示在上面，在下面對(duì)內(nèi)容進(jìn)行一個(gè)描述，而右側(cè)則是添加了對(duì)節(jié)點(diǎn)內(nèi)容表現(xiàn)的圖片，這里放圖片一般都是一個(gè)簡(jiǎn)單的縮略圖，如果需求中需要看對(duì)應(yīng)的大圖的話，也可以通過(guò)圖片的點(diǎn)擊事件結(jié)合模態(tài)框進(jìn)行顯示。節(jié)點(diǎn)內(nèi)部的顯示內(nèi)容也可以根據(jù)需求進(jìn)行個(gè)性化的搭配和布局。

對(duì)go.Node使用進(jìn)行一些個(gè)性化定制拓展

根據(jù)上面圖形的顯示，只有第三級(jí)的具體任務(wù)才有圖片，但是前面兩個(gè)節(jié)點(diǎn)還是對(duì)圖片的位置進(jìn)行了留白，或者說(shuō)需求希望不同的層級(jí)顯示不同的節(jié)點(diǎn)邊框顏色。這個(gè)時(shí)候我們還可以根據(jù)屬性設(shè)置回調(diào)函數(shù)，這樣更加方便我們根據(jù)不同的要求顯示不同的節(jié)點(diǎn)，而不是把所有的節(jié)點(diǎn)都顯示成一種樣式。我們可以稍作調(diào)整，通過(guò)new go.Binding()來(lái)進(jìn)行屬性配置

$$(go.Shape,"RoundedRectangle",
    {
      desiredSize: new go.Size(120, 80),//設(shè)置圖形的尺寸
      strokeWidth: 1,//設(shè)置邊框的寬度
      parameter1: 3,//設(shè)置圖形的圓角
      fill:null,//設(shè)置內(nèi)部填充的顏色
      stroke:"#67B73C"http://設(shè)置邊框的顏色
    }, 
    new go.Binding("stroke", "key", this.strokeSetting)//新增部分
  ),
  $$(go.Panel,"Table",{desiredSize: new go.Size(120, 80)},
        $$(go.TextBlock,{row:0,column: 0,alignment: go.Spot.Top,margin:5,font: "bold 14px sans-serif ",stroke:"#FF0000"},new go.Binding("text")),
        $$(go.TextBlock,{row:1,column: 0,alignment: go.Spot.Left,stroke:"#FF9900",overflow: go.TextBlock.OverflowEllipsis,maxLines: 2,},new go.Binding("text","desc"),new go.Binding("desiredSize", "key", this.descDesiredSize)//新增部分),
        $$(go.Picture,{ row:0,column: 1,rowSpan:2,desiredSize: new go.Size(50, 50) },new go.Binding("source"),new go.Binding("visible", "key", this.pictureVisible)//新增部分),
    )
)
//回調(diào)函數(shù)部分
strokeSetting(key,e){
    let nodeData = e.part.data;
    console.log(key,e,nodeData);
    let nodeLevel = key.split('-').length -1
    if(nodeLevel===0){
        return "#FF0000"
    }else if(nodeLevel===1){
        return "#00FF00"
    }else{
        return "#0000FF"
    }
},
descDesiredSize(key,e){
    let nodeData = e.part.data;
     return nodeData.source?new go.Size(70, 50):new go.Size(120, 50);
},
pictureVisible(key,e){
    let nodeData = e.part.data;
    return nodeData.source?true:false;
},

其打印內(nèi)容如下

通過(guò)new go.Binding()進(jìn)行配置的時(shí)候，一共有三個(gè)參數(shù)。其中第一個(gè)參數(shù)是需要配置的屬性名稱，第二個(gè)則是傳遞的node內(nèi)的參數(shù)的值(如上面例子中的key,1、1-1等)，第三個(gè)參數(shù)則是回調(diào)函數(shù)的函數(shù)名。而回調(diào)函數(shù)有兩個(gè)參數(shù)，第一個(gè)參數(shù)是傳過(guò)來(lái)的node內(nèi)的參數(shù)的值(如上面例子中的key,1、1-1等)。第二個(gè)參數(shù)e則是gojs的渲染對(duì)象，可以根據(jù)e.part.data可以獲取到節(jié)點(diǎn)的所有數(shù)據(jù)，方便在配置不同的屬性值的時(shí)候進(jìn)行分別判斷。

小提示

new go.Binding()在進(jìn)行配置的時(shí)候，其第二個(gè)參數(shù)必須為節(jié)點(diǎn)內(nèi)都存在該字段，如果某些節(jié)點(diǎn)沒(méi)有該字段，其visible屬性會(huì)默認(rèn)返回為true(也就是顯示)，會(huì)造成需求和顯示內(nèi)容不同的情況，一定需要注意.

go.Node的端口(Port)配置

節(jié)點(diǎn)的端口默認(rèn)是一個(gè)，但是可以經(jīng)過(guò)配置顯示很多個(gè)。而默認(rèn)的端口位置也會(huì)居中。因此，對(duì)上面的內(nèi)容進(jìn)行稍加改造，把節(jié)點(diǎn)的Auto屬性修改為Vertical。然后分別在go.Node和go.Shape上設(shè)置端口進(jìn)行一下對(duì)比。

第一種方式(對(duì)go.Node設(shè)置端口)

$$(go.Node,"Vertical",
        $$(go.Shape,"RoundedRectangle",
        { fromSpot: go.Spot.Right, toSpot: go.Spot.Left },
        {
          desiredSize: new go.Size(120, 80),//設(shè)置圖形的尺寸
          strokeWidth: 1,//設(shè)置邊框的寬度
          parameter1: 3,//設(shè)置圖形的圓角
          fill:null,//設(shè)置內(nèi)部填充的顏色
          stroke:"#67B73C",//設(shè)置邊框的顏色
        }, 
        new go.Binding("stroke", "key", this.strokeSetting)
      ),
      $$(go.Panel,"Table",{desiredSize: new go.Size(120, 80)},
            $$(go.TextBlock,{row:0,column: 0,alignment: go.Spot.Top,margin:5,font: "bold 14px sans-serif ",stroke:"#FF0000"},new go.Binding("text")),
            $$(go.TextBlock,{row:1,column: 0,alignment: go.Spot.Left,stroke:"#FF9900",overflow: go.TextBlock.OverflowEllipsis,maxLines: 2,},new go.Binding("text","desc"),new go.Binding("desiredSize", "key", this.descDesiredSize)),
            $$(go.Picture,{ row:0,column: 1,rowSpan:2,desiredSize: new go.Size(50, 50) },new go.Binding("source"),new go.Binding("visible", "key", this.pictureVisible)),
        )
  );

第二種方式，在go.Shpe上設(shè)置端口在普通的繪圖模板中添加端口的時(shí)候,一定要添加portId

$$(go.Node,"Vertical",
        $$(go.Shape,"RoundedRectangle",
        {
          desiredSize: new go.Size(120, 80),//設(shè)置圖形的尺寸
          strokeWidth: 1,//設(shè)置邊框的寬度
          parameter1: 3,//設(shè)置圖形的圓角
          fill:null,//設(shè)置內(nèi)部填充的顏色
          stroke:"#67B73C",//設(shè)置邊框的顏色
          portId: "",
          fromSpot: go.Spot.Right, 
          toSpot: go.Spot.Left
        }, 
        new go.Binding("stroke", "key", this.strokeSetting)
      ),
      $$(go.Panel,"Table",{desiredSize: new go.Size(120, 80)},
            $$(go.TextBlock,{row:0,column: 0,alignment: go.Spot.Top,margin:5,font: "bold 14px sans-serif ",stroke:"#FF0000"},new go.Binding("text")),
            $$(go.TextBlock,{row:1,column: 0,alignment: go.Spot.Left,stroke:"#FF9900",overflow: go.TextBlock.OverflowEllipsis,maxLines: 2,},new go.Binding("text","desc"),new go.Binding("desiredSize", "key", this.descDesiredSize)),
            $$(go.Picture,{ row:0,column: 1,rowSpan:2,desiredSize: new go.Size(50, 50) },new go.Binding("source"),new go.Binding("visible", "key", this.pictureVisible)),
        )
  );

其端點(diǎn)片在go.shape的中心位置.根據(jù)需求，方便調(diào)整。

結(jié)語(yǔ)

可視化圖形主要是由節(jié)點(diǎn)和節(jié)點(diǎn)之間的關(guān)系連線組成，節(jié)點(diǎn)內(nèi)主要是顯示的關(guān)系角色、部門等主角對(duì)象，內(nèi)部必然有很多的信息?？梢愿鶕?jù)自己的需求，進(jìn)行定制化的顯示。

以上就是GoJs節(jié)點(diǎn)繪圖模板--Node的詳細(xì)內(nèi)容，更多關(guān)于GoJs節(jié)點(diǎn)繪圖模板Node的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論