GoJs圖形繪圖模板Shape示例詳解
前言
在可視化圖形的展示過程中，節(jié)點內部往往不只是有文字描述，這樣看起來很往往比較枯燥。在這個時候我們就可以在圖形的節(jié)點內部加入一些幾何圖形。然后實現圖形和文字的結合使用的話，不僅可以讓節(jié)點內的內容更加形象，而且還可以通過圖形標記對不同類型的節(jié)點進行一個標記。以達到對節(jié)點的一個分類，讓用戶在使用的時候能夠更快的獲取到圖中的信息。
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"http://設置圖形拐角處樣式，miter、bevel、round。
}
),
width和height屬性
其中width和height是這個幾何圖形模板的寬高，而不是具體幾何圖形的寬高，例如示例中width為50、heigth為40的正方形的話，會優(yōu)先設置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的圖形內部空白無法觸發(fā)點擊事件，而設置屬性為transparent的圖形內部點擊則可以觸發(fā)點擊事件。說明設置為null之后，圖形內部沒有繪圖元素，而設置為transparent圖形內部則是透明的繪圖元素。
stroke、strokeWidth、strokeDashArray屬性
stroke、strokeWidth、strokeDashArray都是對邊框操作的屬性。stroke為邊框的顏色，默認黑色，其設置為null和transparent的顯示和觸發(fā)點擊事件和fill一致，strokeWidth為邊框的寬度，strokeDashArray設置邊框虛線的屬性。該值必須是一個由正數和零組成的數組，否則為 null 表示實線。例如，數組[4,2]將創(chuàng)建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代碼。這樣在開發(fā)過程中就可以引入很多的矢量圖標庫來進行使用，以一個×的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為圖形的縮放屬性.在開發(fā)過程中，很多的可視化圖形為了看起比較好看，信息明朗，小對稱?？赡軙褂玫叫D和縮放的的屬性。
$$(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為線性顏色變化，后面的參數則是最上方和最下方的顏色值配置。
結語
對于一個完整的節(jié)點來說，文字是主要的信息說明，幾何圖形則可以對節(jié)點內部進行標記和分割等等操作，讓節(jié)點的顯示更加豐富并且讓文字顯示內容更加有條理。
以上就是GoJs圖形繪圖模板Shape示例詳解的詳細內容，更多關于GoJs Shape圖形繪圖模板的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了20個實用的JavaScript技巧分享,本文講解的都是開發(fā)中總結出的編碼技巧、和最佳實踐,需要的朋友可以參考下2014-11-11
本文主要介紹了原生js實現圖片放大縮小計時器效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細介紹了如何利用HTML+CSS+JS實現中國象棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了JavaScript實現通過select標簽跳轉網頁的方法,涉及javascript事件響應及窗口操作相關技巧,需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細介紹了js+html+css實現簡單電子時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了JS注入eval, Function系統(tǒng)函數并截獲動態(tài)代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
本文主要介紹了uniapp中實現App自動檢測版本升級的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
IE8的JavaScript點擊事件(onclick)不兼容的解決方法
這篇文章主要介紹了IE8的JavaScript點擊事件(onclick)不兼容的解決方法,大家參考使用吧2013-11-11
這篇文章主要介紹了JS選項卡效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
今天小編就為大家分享一篇解決layui頁面按鈕點擊無反應,也不報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09