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

Posted on by

前言

在可視化圖形的展示過程中，節點內部往往不隻是有文字描述，這樣看起來很往往比較枯燥。在這個時候我們就可以在圖形的節點內部加入一些幾何圖形。然後實現圖形和文字的結合使用的話，不僅可以讓節點內的內容更加形象，而且還可以通過圖形標記對不同類型的節點進行一個標記。以達到對節點的一個分類，讓用戶在使用的時候能夠更快的獲取到圖中的信息。

Shape的使用

go.Shape其實是gojs內部封裝的一種繪圖模板,和上文的go.TextBlock類似。

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" }),
)

這裡列舉瞭一些常見的幾個圖形的顯示，其顯示如下

這裡可以看出在指定瞭繪圖模型為go.Shape之後，第一個參數是內置的圖形的名稱。第二個參數和go.TextBlock類似，裡面存放的是幾個圖形繪圖模塊的配置信息，在不同的繪圖模型中，很多的配置屬性是一樣的，並且是通用的。下面列舉一下圖形的一些常用的配置屬性

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

width和height屬性

其中width和height是這個幾何圖形模板的寬高，而不是具體幾何圖形的寬高，例如示例中width為50、heigth為40的正方形的話，會優先設置width和height最小的那個為邊長，也就是會生成一個邊長為40的正方形。

fill屬性

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

$$(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" }),

在顯示內容上兩者顯示一樣，但是如果給這個幾何圖形設置瞭點擊事件之後，設置為null的圖形內部空白無法觸發點擊事件，而設置屬性為transparent的圖形內部點擊則可以觸發點擊事件。說明設置為null之後，圖形內部沒有繪圖元素，而設置為transparent圖形內部則是透明的繪圖元素。

stroke、strokeWidth、strokeDashArray屬性

stroke、strokeWidth、strokeDashArray都是對邊框操作的屬性。stroke為邊框的顏色，默認黑色，其設置為null和transparent的顯示和觸發點擊事件和fill一致，strokeWidth為邊框的寬度，strokeDashArray設置邊框虛線的屬性。該值必須是一個由正數和零組成的數組，否則為 null 表示實線。例如，數組[4,2]將創建4像素的破折號和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屬性

可以通過geometry對圖形進行拓展，例如一段svg代碼。這樣在開發過程中就可以引入很多的矢量圖標庫來進行使用，以一個×的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 }),
)

這樣就實現瞭一個svg圖形的引入，在項目中可以導入自己喜歡的iconfont圖標庫或者公司內部圖標庫，非常方便。

angle、scale屬性

angle是圖形的旋轉屬性，scale為圖形的縮放屬性.在開發過程中，很多的可視化圖形為瞭看起比較好看，信息明朗，小對稱。可能會使用到旋轉和縮放的的屬性。

$$(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設置的是圖形邊框結尾處的樣式,而strokeJoin則是圖形邊框拐角處的樣式，因為上面引入的圖像是一個閉合圖形，所以重新使用一個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'})

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

拓展

利用go.Shape和go.Brush結合使用可以構造出一個顏色漸變的圖形

$$(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的第一個參數為Linear為線性顏色變化，後面的參數則是最上方和最下方的顏色值配置。

結語

對於一個完整的節點來說，文字是主要的信息說明，幾何圖形則可以對節點內部進行標記和分割等等操作，讓節點的顯示更加豐富並且讓文字顯示內容更加有條理。

以上就是GoJs圖形繪圖模板Shape示例詳解的詳細內容，更多關於GoJs Shape圖形繪圖模板的資料請關註WalkonNet其它相關文章！

推薦閱讀：