18禁美女黄网站色大片免费看,铁矿石期货实时行情,猛烈h继攵禁忌h,乱人伦人妻精品一区二区

首頁 > 要聞 >

GoJs的文本繪圖模板TextBlock使用實(shí)例-今日視點(diǎn)

2023-04-16 05:52:00 腳本之家
目錄
前言TextBlock的使用TextBlock的配置屬性節(jié)點(diǎn)內(nèi)文本的雙擊編輯

前言

文接上回,我們已經(jīng)使用gojs實(shí)現(xiàn)了一個(gè)最最最基本的樹形布局。這次我們開始對(duì)圖形的骨架進(jìn)行一個(gè)內(nèi)容展示上的豐富和顯示風(fēng)格上的美化??梢哉f我們圖形的節(jié)點(diǎn)部分是我們整個(gè)圖形大部分信息的一個(gè)展示載體。而我們的需求當(dāng)中,為了使一些信息更加形象,醒目。我們會(huì)用到文本,圖標(biāo),圖片,和節(jié)點(diǎn)的背景的顏色等等來顯示不同類型的節(jié)點(diǎn)。

TextBlock的使用

本次的介紹便是通過TextBlock的屬性來控制節(jié)點(diǎn)內(nèi)的文本顯示內(nèi)容和一些樣式的修改,對(duì)我們的關(guān)系圖進(jìn)行進(jìn)一步的豐富。首先我們先準(zhǔn)備一些數(shù)據(jù)


(資料圖片)

nodes: [
        {
          key: "1",
          text: "三國(guó)人物志",
          nodeBs: "root",
        },
        {
          key: "1-1",
          text: "曹操",
          nodeBs: "cc",
        },
        {
          key: "1-2",
          text: "劉備",
          nodeBs: "lb",
        },
        {
          key: "1-3",
          text: "孫權(quán)",
          nodeBs: "sq",
        },
      ],
      links: [
        {
          from: "1",
          to: "1-1",
        },
        {
          from: "1",
          to: "1-2",
        },
        {
          from: "1",
          to: "1-3",
        },
      ],

其中nodes中的key字段為節(jié)點(diǎn)的唯一標(biāo)識(shí),為必須。而text字段則是我們希望顯示到節(jié)點(diǎn)上的內(nèi)容,nodeBs主要是一個(gè)節(jié)點(diǎn)的標(biāo)識(shí),方便批量處理一些節(jié)點(diǎn)的時(shí)候進(jìn)行判斷。links中存放的為必須的from(起點(diǎn))和to(終點(diǎn))字段。

this.myDiagram = $$(go.Diagram, "myDiagramDiv", {
    layout: $$(go.TreeLayout),//在初始化時(shí)畫布的布局方式
});
this.myDiagram.nodeTemplate = $$(
    go.Node,  //節(jié)點(diǎn)的node配置項(xiàng)
    "Horizontal", //節(jié)點(diǎn)內(nèi)部的布局方式
    $$(
        go.TextBlock,//指定為gojs規(guī)定的文本顯示形式
        new go.Binding("text", "text") //將我們的text字段顯示到節(jié)點(diǎn)中
    )
)
this.myDiagram.model = new go.GraphLinksModel(this.nodes, this.links);

在這里我們可以看一下,通過我們實(shí)例化之后的nodeTemplate屬性來實(shí)現(xiàn)我們的node的模板進(jìn)行一個(gè)自定義的填充內(nèi)容,來實(shí)現(xiàn)節(jié)點(diǎn)內(nèi)部不同內(nèi)容的顯示。其中go.Node是固定搭配,就是我們是對(duì)node模板進(jìn)行一個(gè)配置,然后就需要我們我們的操作對(duì)象為node,然后再內(nèi)部嵌套各種其他的模板。Horizontal是節(jié)點(diǎn)內(nèi)部的一種布局方式,這個(gè)我們后面會(huì)統(tǒng)一進(jìn)行分析。

當(dāng)然你也可以寫成這種形式

this.myDiagram.nodeTemplate = new go.Node().add(new go.TextBlock().bind("text"));

因?yàn)榈谝环N的寫法比較清晰,因此我們主要是采用第一種方式進(jìn)行節(jié)點(diǎn)內(nèi)的布局填充,這樣我們就得到了這樣一個(gè)圖形

TextBlock的配置屬性

在這里對(duì)顯示的文字修改一下樣式,這里列舉一些常用的屬性

$$(
    go.TextBlock,//指定為gojs規(guī)定的文本顯示形式
    {
        stroke: "red",//設(shè)置字體顏色,默認(rèn)為黑色
        background:"yellow",//字體的背景顏色,默認(rèn)透明
        font: "14px,sans-serif ",//字體的名稱,大小,是否加粗等
        margin:8,//類似css,外邊距
        width:20,//寬度
        height:20,//高度
        textAlign:"left",//文本的對(duì)齊方式,有l(wèi)eft,center,right三種屬性
        alignment:go.Spot.Left, // 文本在父級(jí)結(jié)構(gòu)中的對(duì)齊方式,有g(shù)o.Spot.Left,go.Spot.Center,go.Spot.Right三種屬性
        minSize: new go.Size(10, 14),//文本的最小尺寸,兩個(gè)參數(shù)分別為寬和高
        maxSize: new go.Size(NaN, NaN), //文本的最大寬度,如果我們?cè)O(shè)置為NaN,其尺寸會(huì)進(jìn)行自適應(yīng)
        overflow: go.TextBlock.OverflowClip,//文本溢出寬度之后的顯示方式,OverflowClip為換行.OverflowEllipsis是顯示省略號(hào)
        maxLines: 2,//換行之后最多顯示幾行
        verticalAlignment:"Top"http://垂直方向上的的對(duì)齊方式,有Top,Center,Bottom三種屬性
       },
)

既然textAlignalignment都是文本的對(duì)齊方式,那他們之間有什么區(qū)別呢?我們把節(jié)點(diǎn)單獨(dú)給拿出來,然后分別對(duì)添加這兩種屬性的三個(gè)參數(shù)值進(jìn)行對(duì)比一下。

$$(go.Panel, "Vertical",{width:300,background:"#67B73C"},//父級(jí)模板,相當(dāng)于外層html標(biāo)簽,然后我們給外層標(biāo)簽一個(gè)寬度
    $$(go.TextBlock,{textAlign:"left",text:"textAlignLeft",width:200,background:"#FF9900",margin:5}),
    $$(go.TextBlock,{textAlign:"center",text:"textAlignCenter",width:200,background:"#FF9900",margin:5}),
    $$(go.TextBlock,{textAlign:"right",text:"textAlignRight",width:200,background:"#FF9900",margin:5}),
    $$(go.TextBlock,{alignment:go.Spot.Left,text:"alignmentLeft",width:200,background:"#FF9900",margin:5}),
    $$(go.TextBlock,{alignment:go.Spot.Center,text:"alignmentCenter",width:200,background:"#FF9900",margin:5}),
    $$(go.TextBlock,{alignment:go.Spot.Right,text:"alignmentRight",width:200,background:"#FF9900",margin:5})
),

我們?cè)谕鈱釉黾右粋€(gè)模板并且添加寬度之后,分別在內(nèi)層的文本標(biāo)簽設(shè)置不同的屬性和屬性值,顯示內(nèi)容可以知道。textAlign屬性是如果設(shè)置了文本區(qū)域的寬度,在文本顯示區(qū)域內(nèi)部居左、居中、居右顯示。而alignment屬性則是以文本區(qū)域?yàn)橐粋€(gè)整體,全部?jī)?nèi)容在父級(jí)模板中的相對(duì)位置居左、居中、居右。

然后我們看一下overflow的兩種文本溢出方式的區(qū)別

$$(go.Panel, "Vertical",{width:300,background:"#67B73C"},
    $$(go.TextBlock,{text:"go textBlock overflowDefult overflowDefult",width:100,background:"#FF9900",margin:5}),
    $$(go.TextBlock,{text:"go textBlock overflowDefult overflowDefult",maxLines: 2,width:100,background:"#FF9900",margin:5}),
    $$(go.TextBlock,{overflow: go.TextBlock.OverflowClip,text:"go textBlock overflowClip overflowClip",width:100,background:"#FF9900",margin:5}),
    $$(go.TextBlock,{overflow: go.TextBlock.OverflowClip,maxLines: 2,text:"go textBlock overflowClip overflowClip",width:100,background:"#FF9900",margin:5}),
    $$(go.TextBlock,{overflow: go.TextBlock.OverflowEllipsis,text:"go textBlock overflowEllipsis overflowEllipsis",width:100,background:"#FF9900",margin:5}),
    $$(go.TextBlock,{overflow: go.TextBlock.OverflowEllipsis,maxLines: 2,text:"go textBlock overflowEllipsis overflowEllipsis",width:100,background:"#FF9900",margin:5}),
),

由此我們可以發(fā)現(xiàn)overflow的兩種屬性go.TextBlock.OverflowClipgo.TextBlock.OverflowEllipsis在單獨(dú)設(shè)置的時(shí)候是和默認(rèn)效果沒有區(qū)別的,都是會(huì)默認(rèn)進(jìn)行一個(gè)換行。而如果我們?cè)偌由闲袛?shù)的限制maxLines: 2之后就出現(xiàn)了區(qū)別go.TextBlock.OverflowClip屬性是和默認(rèn)情況是一樣的,會(huì)對(duì)我們的文本進(jìn)行一個(gè)整詞切割,而go.TextBlock.OverflowEllipsis則是出現(xiàn)了超出部門內(nèi)容顯示...,因此在開發(fā)過程中我們可以可以對(duì)超長(zhǎng)文本進(jìn)行go.TextBlock.OverflowEllipsis屬性和maxLines的結(jié)合使用,保證項(xiàng)目中的的節(jié)點(diǎn)的規(guī)格不至于過長(zhǎng)而導(dǎo)致圖形的顯示冗余。

節(jié)點(diǎn)內(nèi)文本的雙擊編輯

gojs還為我們提供了editable屬性,可以在節(jié)點(diǎn)內(nèi)直接雙擊出現(xiàn)的輸入框?qū)ξ覀兊墓?jié)點(diǎn)內(nèi)的文本顯示進(jìn)行一個(gè)編輯,在編輯完成之后,只需要點(diǎn)擊畫布就可以把編輯后的內(nèi)容顯示到節(jié)點(diǎn)之中。

$$(
    go.TextBlock,
    {
        editable:true,//是否開啟雙擊編輯節(jié)點(diǎn)內(nèi)部文本功能
        textEdited: function (tb, olds, news) {//編輯文本成功之后的回調(diào)函數(shù)
            console.log(tb.part.data,olds,news)
        }
    },
    new go.Binding("text", "text")
),

在節(jié)點(diǎn)的文本框雙擊之后就可以出現(xiàn)一個(gè)輸入框的彈出,可以輸入新的內(nèi)容之后點(diǎn)擊畫布,然后在編輯成功之后的回調(diào)函數(shù)textEdited分別有三個(gè)參數(shù),我們可以通過第一個(gè)參數(shù)的tb.part.data來獲取我們操作的節(jié)點(diǎn)的全部數(shù)據(jù),而第二個(gè)參數(shù)則是編輯之前的內(nèi)容(也就是我們示例中的曹操),而第三個(gè)參數(shù)則是我們編輯之后的內(nèi)容(也就是我們示例中的曹操阿瞞)。因此我們可以通過獲取之后的新值來更改我們的數(shù)據(jù)來保證數(shù)據(jù)和圖中內(nèi)容對(duì)應(yīng)。

以上就是GoJs的文本繪圖模板TextBlock使用實(shí)例的詳細(xì)內(nèi)容,更多關(guān)于GoJs TextBlock文本繪圖模板的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

關(guān)鍵詞

相關(guān)推薦

亚洲国产精品无码专区网站| 丫头打开腿我想尝尝你的味道| 电击惩罚花蒂榨乳调教小说| 欧美黑人乱大交bd| 无码刺激性a片短视频| 国产在线视频| 啊轻点灬太粗嗯太深了| 啊轻点灬大巴太粗太长了视频免费| 久久精品无码av| 中文字幕无码他人妻味| 国产看黄网站又黄又爽又色| 美国十次导航| 挺进邻居丰满少妇的身体| 中文人妻av久久人妻水| 国产看黄网站又黄又爽又色| 国产又黄又大又粗视频| 苍井空在线av播放| 被老师摸着jj勃起有14厘米| 奶头好大揉着好爽GIF动态图| 无码任你躁久久久久久老妇| 狼色精品人妻在线视频网站| 小秘书夹得真紧好爽h调视频 | 日本精品无码特级毛片 | 夜夜精品无码一区二区三区| 精品人妻无码专区在线视频不卡| 美式忌讳1~4经典电影2| 绿帽娇妻肚子被灌满精怀孕| 国产精品日本无码久久一老a| 被黑人伦流澡到高潮hnp动漫| 肉干欢乐颂五美| 日韩精品无码视频一区二区蜜桃| 大炕上的性满足| 息与子猛烈交尾在线播放| 含着jing液去上课h| 亚洲人成电影在线观看| chinese老女人老熟妇hd| 粗一硬一长一进一爽一a级小说| 色偷偷国色天香在线观看免费视频| 中文字幕乱码亚洲∧v日本1| 色偷偷av老熟女色欲涩爱| 二人扑克剧烈运动视频|