---

title: 圖形 Shape 及其屬性
order: 0

G6 中的元素（節點/邊）是由一個或多個圖形 Shape組成，主要通過自定義節點或自定義邊時在 draw 方法中使用 group.addShape 添加，G6 中支持以下的圖形 Shape：

• circle：圓；
• rect：矩形；
• ellipse：橢圓；
• polygon：多邊形；
• fan：扇形；
• image：圖片；
• marker：標記；
• path：路徑；
• text：文本；
• dom(svg)：DOM（圖渲染方式 renderer 為 'svg' 時可用）。

各圖形 Shape 的通用屬性

屬性名含義備注

fill	設置用于填充繪畫的顏色、漸變或模式	對應 Canvas 屬性 fillStyle
stroke	設置用于筆觸的顏色、漸變或模式	對應 Canvas 屬性 strokeStyle
lineWidth	描邊寬度
lineDash	描邊虛線	Number[] 類型代表實、虛長度
shadowColor	設置用于陰影的顏色
shadowBlur	設置用于陰影的模糊級別	數值越大，越模糊
shadowOffsetX	設置陰影距形狀的水平距離
shadowOffsetY	設置陰影距形狀的垂直距離
opacity	設置繪圖的當前 alpha 或透明值	對應 Canvas 屬性 globalAlpha
fillOpacity	設置填充的 alpha 或透明值
cursor	鼠標在該節點上時的鼠標樣式，CSS 的 cursor 選項都支持

用法

group.addShape('rect', {attrs: {fill: 'red',shadowOffsetX: 10,shadowOffsetY: 10,shadowColor: 'blue',shadowBlur: 10,opacity: 0.8,},// must be assigned in G6 3.3 and later versions. it can be any value you wantname: 'rect-shape', });

各圖形 Shape 的通用方法

attr()

設置或獲取實例的繪圖屬性。

attr(name)

獲取實例的屬性值。

const width = shape.attr('width');

attr(name, value)

更新實例的單個繪圖屬性。

attr({…})

批量更新實例繪圖屬性。

rect.attr({fill: '#999',stroke: '#666' });

圓圖形 Circle

屬性

屬性名含義

x	圓心的 x 坐標
y	圓心的 y 坐標
r	圓的半徑

用法

group.addShape('circle', {attrs: {x: 100,y: 100,r: 50,fill: 'blue',},// must be assigned in G6 3.3 and later versions. it can be any value you wantname: 'circle-shape', });

矩形圖形 Rect

屬性

屬性名含義備注

x	矩形左上角的 x 坐標
y	矩形左上角的 y 坐標
width	矩形的寬度
height	矩形的高度
radius	定義圓角	支持整數或數組形式， 分別對應左上、右上、右下、左下角的半徑： - radius 縮寫為 1 或 [ 1 ] 相當于 [ 1, 1, 1, 1 ] - radius 縮寫為 [ 1, 2 ] 相當于 [ 1, 2, 1, 2 ] - radius 縮寫為 [ 1, 2, 3 ] 相當于 [ 1, 2, 3, 2 ]

用法

group.addShape('rect', {attrs: {x: 150,y: 150,width: 150,height: 150,stroke: 'black',radius: [2, 4],},// must be assigned in G6 3.3 and later versions. it can be any value you wantname: 'rect-shape', });

橢圓圖形 Ellipse

屬性

屬性名含義

x	圓心的 x 坐標
y	圓心的 y 坐標
rx	水平半徑
ry	垂直半徑

用法

group.addShape('ellipse', {attrs: {x: 100,y: 100,rx: 50,ry: 50,fill: 'blue',},// must be assigned in G6 3.3 and later versions. it can be any value you wantname: 'ellipse-shape', });

多邊形圖形 Polygon

屬性

屬性名含義備注

points	多邊形的所有端點坐標	數組形式

用法

group.addShape('polygon', {attrs: {points: [[30, 30],[40, 20],[30, 50],[60, 100],],fill: 'red',},// must be assigned in G6 3.3 and later versions. it can be any value you wantname: 'polygon-shape', });

圖片圖形 Image

屬性

屬性名含義備注

x	圖片左上角的 x 坐標
y	圖片左上角的 y 坐標
width	圖片寬度
height	圖片高度
img	圖片源	G6 支持多種格式的圖片：url、ImageData、Image、canvas

用法

group.addShape('image', {attrs: {x: 0,y: 0,img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',},// must be assigned in G6 3.3 and later versions. it can be any value you wantname: 'image-shape', });

標記圖形 Marker

屬性

屬性名含義備注

x	中心的 x 坐標
y	中心的 y 坐標
r	形狀半徑
symbol	指定形狀	內置了一些常用形狀，如圓形 circle ， 矩形 ?square ， 菱形 ?diamond ，三角形 ?triangle ， 倒三角形 triangle-down ，也可以是自定義的 path 路徑。

用法

group.addShape('marker', {attrs: {x: 10,y: 10,r: 10,symbol: function(x, y, r) {return [['M', x, y], ['L', x + r, y + r], ['L', x + r * 2, y], ['Z']];},},// must be assigned in G6 3.3 and later versions. it can be any value you wantname: 'marker-shape', });

路徑 Path

???? 注意: 當邊太細交互不易命中時，請設置 lineAppendWidth 屬性值。

屬性

屬性名含義備注

path	線條路徑	可以是 String 形式，也可以是線段的數組。
startArrow	起始端的箭頭	為 true 時在邊的結束端繪制默認箭頭，為 false 時不繪制結束端箭頭。也可以是一個通過 path 自定義的箭頭
endArrow	末尾端的箭頭	為 true 時在邊的開始端繪制默認箭頭，為 false 時不繪制開始端箭頭。也可以是一個通過 path 自定義的箭頭
lineAppendWidth	邊的擊中范圍	提升邊的擊中范圍，擴展響應范圍，數值越大，響應范圍越廣
lineCap	設置線條的結束端點樣式
lineJoin	設置兩條線相交時，所創建的拐角形狀
lineWidth	設置當前的線條寬度
miterLimit	設置最大斜接長度
lineDash	設置線的虛線樣式，可以指定一個數組	一組描述交替繪制線段和間距（坐標空間單位）長度的數字。 如果數組元素的數量是奇數， 數組的元素會被復制并重復。例如， [5, 15, 25] 會變成 [5, 15, 25, 5, 15, 25]。

用法

group.addShape('path', {attrs: {startArrow: {// 自定義箭頭指向(0, 0)，尾部朝向 x 軸正方向的 pathpath: 'M 0,0 L 20,10 L 20,-10 Z',// 箭頭的偏移量，負值代表向 x 軸正方向移動// d: -10,},endArrow: {// 自定義箭頭指向(0, 0)，尾部朝向 x 軸正方向的 pathpath: 'M 0,0 L 20,10 L 20,-10 Z',// 箭頭的偏移量，負值代表向 x 軸正方向移動// d: -10,},path: [['M', 100, 100],['L', 200, 200],],stroke: '#000',lineWidth: 8,lineAppendWidth: 5,},// must be assigned in G6 3.3 and later versions. it can be any value you wantname: 'path-shape', });

文本 Text

屬性

屬性名含義備注

fill	設置用于填充繪畫的顏色、漸變或模式	對應 Canvas 屬性 fillStyle
stroke	設置用于筆觸的顏色、漸變或模式	對應 Canvas 屬性 strokeStyle
shadowColor	設置用于陰影的顏色
shadowBlur	設置用于陰影的模糊級別	數值越大，越模糊
shadowOffsetX	設置陰影距形狀的水平距離
shadowOffsetY	設置陰影距形狀的垂直距離
opacity	設置繪圖的當前 alpha 或透明值	對應 Canvas 屬性 globalAlpha
textAlign	設置文本內容的當前對齊方式	支持的屬性：center / end / left / right / start，默認值為 start
textBaseline	設置在繪制文本時使用的當前文本基線	支持的屬性: top / middle / bottom?/ alphabetic / hanging。默認值為 bottom
fontStyle	字體樣式	對應 font-style
fontVariant	設置為小型大寫字母字體	對應 font-variant
fontWeight	字體粗細	對應 font-weight
fontSize	字體大小	對應 font-size
fontFamily	字體系列	對應 font-family
lineHeight	行高	對應 line-height

用法

group.addShape('text', {attrs: {text: 'test text',x: 0,y: 10,fontSize: 14,textAlign: 'left',textBaseline: 'middle',fill: '#0000D9',},// must be assigned in G6 3.3 and later versions. it can be any value you wantname: 'text-shape', });

DOM (svg)

僅在 Graph 的 renderer 為 'svg' 時可以使用。

?? 注意:

• 只支持原生 HTML DOM，不支持各類 react、vue 組件；
• 使用 dom 進行自定義的節點或邊，不支持 G6 的交互事件，請使用原生 DOM 的交互事件。

特殊屬性

屬性名含義備注

html	DOM 的 html 值

用法

group.addShape('dom', {attrs: {width: cfg.size[0],height: cfg.size[1],// DOM's htmlhtml: `<div style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${cfg.size[0]-5}px; height: ${cfg.size[1]-5}px; display: flex;"><div style="height: 100%; width: 33%; background-color: #CDDDFD"><img alt="img" style="line-height: 100%; padding-top: 6px; padding-left: 8px;" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" width="20" height="20" /> </div><span style="margin:auto; padding:auto; color: #5B8FF9">${cfg.label}</span></div>`},// must be assigned in G6 3.3 and later versions. it can be any value you wantname: 'dom-shape',draggable: true, });

總結

以上是生活随笔為你收集整理的高级指引——概念解释——图形 Shape 及其属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。