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

GoJs圖形繪圖模板Shape示例詳解

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

前言

在可視化圖形的展示過(guò)程中，節(jié)點(diǎn)內(nèi)部往往不只是有文字描述，這樣看起來(lái)很往往比較枯燥。在這個(gè)時(shí)候我們就可以在圖形的節(jié)點(diǎn)內(nèi)部加入一些幾何圖形。然后實(shí)現(xiàn)圖形和文字的結(jié)合使用的話，不僅可以讓節(jié)點(diǎn)內(nèi)的內(nèi)容更加形象，而且還可以通過(guò)圖形標(biāo)記對(duì)不同類(lèi)型的節(jié)點(diǎn)進(jìn)行一個(gè)標(biāo)記。以達(dá)到對(duì)節(jié)點(diǎn)的一個(gè)分類(lèi)，讓用戶在使用的時(shí)候能夠更快的獲取到圖中的信息。

Shape的使用

go.Shape其實(shí)是gojs內(nèi)部封裝的一種繪圖模板,和上文的go.TextBlock類(lèi)似。

this.myDiagram.nodeTemplate = $$(
    go.Node,
    "Horizontal",
    $$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5, fill: "#67B73c",stroke:"#FF9900" }),
    $$(go.Shape, 'Square', { width: 50, height: 40, margin: 5, fill: "#67B73c",stroke:"#FF9900" }),
    $$(go.Shape, 'Ellipse', { width: 50, height: 40, margin: 5, fill: "#67B73c",stroke:"#FF9900" }),
    $$(go.Shape, 'Circle', { width: 50, height: 40, margin: 5, fill: "#67B73c",stroke:"#FF9900" }),
    $$(go.Shape, 'TriangleDown', { width: 50, height: 40, margin: 5, fill: "#67B73c",stroke:"#FF9900" }),
    $$(go.Shape, 'Diamond', { width: 50, height: 40, margin: 5, fill: "#67B73c",stroke:"#FF9900" }),
    $$(go.Shape, 'PlusLine', { width: 50, height: 40, margin: 5, fill: "#67B73c",stroke:"#FF9900" }),
    $$(go.Shape, 'MinusLine', { width: 50, height: 40, margin: 5, fill: "#67B73c",stroke:"#FF9900" }),
)

這里列舉了一些常見(jiàn)的幾個(gè)圖形的顯示，其顯示如下

這里可以看出在指定了繪圖模型為go.Shape之后，第一個(gè)參數(shù)是內(nèi)置的圖形的名稱。第二個(gè)參數(shù)和go.TextBlock類(lèi)似，里面存放的是幾個(gè)圖形繪圖模塊的配置信息，在不同的繪圖模型中，很多的配置屬性是一樣的，并且是通用的。下面列舉一下圖形的一些常用的配置屬性

$$(go.Shape, 'Rectangle', 
    { 
        width: 50,//幾何圖形模板的寬度
        height: 40, //幾何圖形模板的高度
        margin: 5, //幾個(gè)圖形的外邊距
        fill: "#67B73c",//幾何圖形的內(nèi)容填充顏色
        stroke:"#FF9900", //幾何圖形的邊框顏色
        strokeWidth:3, //外面邊框的寬度
        strokeDashArray: [4, 2],//圖形的裁剪,可以設(shè)置數(shù)值然后做成虛線邊框
        cursor: "pointer",//類(lèi)似css,鼠標(biāo)小手樣式
        geometry:geo,//對(duì)圖形進(jìn)行拓展,可以是svg代碼
        angle:90,//圖形的旋轉(zhuǎn)角度
        scale: 1,//圖形的縮放比例,默認(rèn)為1,原始尺寸
        strokeCap:"butt",//設(shè)置圖形線尾的樣式，有butt、round、square。
        strokeJoin:"miter"http://設(shè)置圖形拐角處樣式，miter、bevel、round。
    }
),

width和height屬性

其中width和height是這個(gè)幾何圖形模板的寬高，而不是具體幾何圖形的寬高，例如示例中width為50、heigth為40的正方形的話，會(huì)優(yōu)先設(shè)置width和height最小的那個(gè)為邊長(zhǎng)，也就是會(huì)生成一個(gè)邊長(zhǎng)為40的正方形。

fill屬性

fill屬性為幾何圖形的填充顏色，默認(rèn)為黑色。如果設(shè)置fill的屬性為null的時(shí)候其內(nèi)部填充為透明，另外fill的另一個(gè)值為transparent也是設(shè)置內(nèi)部填充透明。其設(shè)置完成之后分別顯示為

$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5, fill: null,stroke:"#FF9900" }),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5, fill: "transparent",stroke:"#FF9900" }),

在顯示內(nèi)容上兩者顯示一樣，但是如果給這個(gè)幾何圖形設(shè)置了點(diǎn)擊事件之后，設(shè)置為null的圖形內(nèi)部空白無(wú)法觸發(fā)點(diǎn)擊事件，而設(shè)置屬性為transparent的圖形內(nèi)部點(diǎn)擊則可以觸發(fā)點(diǎn)擊事件。說(shuō)明設(shè)置為null之后，圖形內(nèi)部沒(méi)有繪圖元素，而設(shè)置為transparent圖形內(nèi)部則是透明的繪圖元素。

stroke、strokeWidth、strokeDashArray屬性

stroke、strokeWidth、strokeDashArray都是對(duì)邊框操作的屬性。stroke為邊框的顏色，默認(rèn)黑色，其設(shè)置為null和transparent的顯示和觸發(fā)點(diǎn)擊事件和fill一致，strokeWidth為邊框的寬度，strokeDashArray設(shè)置邊框虛線的屬性。該值必須是一個(gè)由正數(shù)和零組成的數(shù)組，否則為 null 表示實(shí)線。例如，數(shù)組[4,2]將創(chuàng)建4像素的破折號(hào)和2像素的空格。

$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5, fill: null,stroke:"#FF9900",strokeWidth:1 }),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5, fill: null,stroke:"#FF9900",strokeWidth:2 }),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5, fill: null,stroke:"#FF9900",strokeDashArray:[4,2] }),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5, fill: null,stroke:"#FF9900",strokeDashArray:[4,5] }),

geometry屬性

可以通過(guò)geometry對(duì)圖形進(jìn)行拓展，例如一段svg代碼。這樣在開(kāi)發(fā)過(guò)程中就可以引入很多的矢量圖標(biāo)庫(kù)來(lái)進(jìn)行使用，以一個(gè)×的svg代碼為例。

//data
cancal:"M284.284 256l157.858 157.858c3.619 3.62 5.858 8.62 5.858 14.142 0 11.046-8.954 20-20 20-5.523 0-10.523-2.238-14.142-5.858l-157.857-157.857-157.858 157.858c-3.618 3.613-8.614 5.848-14.132 5.848-11.046 0-20-8.954-20-20 0-5.518 2.234-10.514 5.849-14.133v0l157.857-157.858-157.857-157.857c-3.62-3.62-5.858-8.62-5.858-14.142 0-11.046 8.955-20 20-20 5.523 0 10.523 2.238 14.142 5.858l157.858 157.858 157.858-157.858c3.619-3.616 8.617-5.853 14.137-5.853 11.046 0 20 8.954 20 20 0 5.52-2.236 10.518-5.853 14.137v0z"
//methods
let geo = go.Geometry.parse(this.cancal, true);
this.myDiagram.nodeTemplate = $$(
    go.Node,
    "Horizontal",
    $$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5, fill: null,stroke:"#FF9900",geometry:geo }),
)

這樣就實(shí)現(xiàn)了一個(gè)svg圖形的引入，在項(xiàng)目中可以導(dǎo)入自己喜歡的iconfont圖標(biāo)庫(kù)或者公司內(nèi)部圖標(biāo)庫(kù)，非常方便。

angle、scale屬性

angle是圖形的旋轉(zhuǎn)屬性，scale為圖形的縮放屬性.在開(kāi)發(fā)過(guò)程中，很多的可視化圖形為了看起比較好看，信息明朗，小對(duì)稱?？赡軙?huì)使用到旋轉(zhuǎn)和縮放的的屬性。

$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5, fill: null,stroke:"#FF9900",angle:30}),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5, fill: null,stroke:"#FF9900",angle:60}),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5, fill: null,stroke:"#FF9900",scale:1}),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5, fill: null,stroke:"#FF9900",scale:2}),

strokeCap strokeJoin屬性

strokeCap設(shè)置的是圖形邊框結(jié)尾處的樣式,而strokeJoin則是圖形邊框拐角處的樣式，因?yàn)樯厦嬉氲膱D像是一個(gè)閉合圖形，所以重新使用一個(gè)svg圖形。

//data
d:"M150 0 L75 200 L225 200"
//methods
let geo = go.Geometry.parse(this.d, true);
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5,strokeWidth:10, fill: null,stroke:"#FF9900",geometry:geo,strokeCap:"butt",strokeJoin: 'miter'}),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5,strokeWidth:10, fill: null,stroke:"#FF9900",geometry:geo,strokeCap:"round",strokeJoin: 'miter'}),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5,strokeWidth:10, fill: null,stroke:"#FF9900",geometry:geo,strokeCap:"square",strokeJoin: 'miter'}),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5,strokeWidth:10, fill: null,stroke:"#FF9900",geometry:geo,strokeCap:"butt",strokeJoin: 'bevel'}),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5,strokeWidth:10, fill: null,stroke:"#FF9900",geometry:geo,strokeCap:"round",strokeJoin: 'bevel'}),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5,strokeWidth:10, fill: null,stroke:"#FF9900",geometry:geo,strokeCap:"square",strokeJoin: 'bevel'}),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5,strokeWidth:10, fill: null,stroke:"#FF9900",geometry:geo,strokeCap:"butt",strokeJoin: 'round'}),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5,strokeWidth:10, fill: null,stroke:"#FF9900",geometry:geo,strokeCap:"round",strokeJoin: 'round'}),
$$(go.Shape, 'Rectangle', { width: 50, height: 40, margin: 5,strokeWidth:10, fill: null,stroke:"#FF9900",geometry:geo,strokeCap:"square",strokeJoin: 'round'})

其屬性分別可以改變圖形結(jié)尾和拐角處的圓角、尖角、平角。

拓展

利用go.Shape和go.Brush結(jié)合使用可以構(gòu)造出一個(gè)顏色漸變的圖形

$$(go.Shape, 'Rectangle', { width: 50, height: 100, margin: 5, fill: $$(go.Brush, "Linear", {0.0: "#155247", 1.0: "#0B1A22"}),stroke:"#FF9900"},),
$$(go.Shape, 'Rectangle', { width: 50, height: 100, margin: 5, fill: $$(go.Brush, "Linear", {0.0: "#67541F", 1.0: "#211F1C"}),stroke:"#FF9900"},),
$$(go.Shape, 'Rectangle', { width: 50, height: 100, margin: 5, fill:  $$(go.Brush, "Linear", {0.0: "#662A33", 1.0: "#1D0F1B"}),stroke:"#FF9900"},),

go.Brush的第一個(gè)參數(shù)為Linear為線性顏色變化，后面的參數(shù)則是最上方和最下方的顏色值配置。

結(jié)語(yǔ)

對(duì)于一個(gè)完整的節(jié)點(diǎn)來(lái)說(shuō)，文字是主要的信息說(shuō)明，幾何圖形則可以對(duì)節(jié)點(diǎn)內(nèi)部進(jìn)行標(biāo)記和分割等等操作，讓節(jié)點(diǎn)的顯示更加豐富并且讓文字顯示內(nèi)容更加有條理。

以上就是GoJs圖形繪圖模板Shape示例詳解的詳細(xì)內(nèi)容，更多關(guān)于GoJs Shape圖形繪圖模板的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論