@antv/g6
Version:
graph visualization frame work
1 lines • 24.9 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-8a7d38df47a7f5fde05dba781029aff7-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<h3 id=\"通用属性\"><a href=\"#%E9%80%9A%E7%94%A8%E5%B1%9E%E6%80%A7\" aria-label=\"通用属性 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>通用属性</h3>\n<p><strong>属性</strong></p>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>含义</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>fill</td>\n<td>设置用于填充绘画的颜色、渐变或模式</td>\n<td>对应canvas属性<code class=\"language-text\">fillStyle</code></td>\n</tr>\n<tr>\n<td>stroke</td>\n<td>设置用于笔触的颜色、渐变或模式</td>\n<td>对应canvas属性<code class=\"language-text\">strokeStyle</code></td>\n</tr>\n<tr>\n<td>shadowColor</td>\n<td>设置用于阴影的颜色</td>\n<td></td>\n</tr>\n<tr>\n<td>shadowBlur</td>\n<td>设置用于阴影的模糊级别</td>\n<td>数值越大，越模糊</td>\n</tr>\n<tr>\n<td>shadowOffsetX</td>\n<td>设置阴影距形状的水平距离</td>\n<td></td>\n</tr>\n<tr>\n<td>shadowOffsetY</td>\n<td>设置阴影距形状的垂直距离</td>\n<td></td>\n</tr>\n<tr>\n<td>opacity</td>\n<td>设置绘图的当前 alpha 或透明值</td>\n<td>对应canvas属性<code class=\"language-text\">globalAlpha</code></td>\n</tr>\n</tbody>\n</table>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'rect'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">,</span>\n shadowOffsetX<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n shadowOffsetY<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n shadowColor<span class=\"token punctuation\">:</span> <span class=\"token string\">'blue'</span><span class=\"token punctuation\">,</span>\n shadowBlur<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n opacity<span class=\"token punctuation\">:</span> <span class=\"token number\">0.8</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"圆图形-circle\"><a href=\"#%E5%9C%86%E5%9B%BE%E5%BD%A2-circle\" aria-label=\"圆图形 circle permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>圆图形 Circle</h3>\n<p><strong>属性</strong></p>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>含义</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>x</td>\n<td>圆心的 x 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>y</td>\n<td>圆心的 y 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>r</td>\n<td>圆的半径</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'circle'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n r<span class=\"token punctuation\">:</span> <span class=\"token number\">50</span><span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'blue'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"椭圆图形-ellipse\"><a href=\"#%E6%A4%AD%E5%9C%86%E5%9B%BE%E5%BD%A2-ellipse\" aria-label=\"椭圆图形 ellipse permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>椭圆图形 Ellipse</h3>\n<p><strong>属性</strong></p>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>含义</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>x</td>\n<td>圆心的 x 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>y</td>\n<td>圆心的 y 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>rx</td>\n<td>水平半径</td>\n<td></td>\n</tr>\n<tr>\n<td>ry</td>\n<td>垂直半径</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'ellipse'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n rx<span class=\"token punctuation\">:</span> <span class=\"token number\">50</span><span class=\"token punctuation\">,</span>\n ry<span class=\"token punctuation\">:</span> <span class=\"token number\">50</span><span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'blue'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"扇形图形-fan\"><a href=\"#%E6%89%87%E5%BD%A2%E5%9B%BE%E5%BD%A2-fan\" aria-label=\"扇形图形 fan permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>扇形图形 Fan</h3>\n<p><strong>属性</strong></p>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>含义</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>x</td>\n<td>扇形圆心的 x 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>y</td>\n<td>扇形圆心的 y 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>rs</td>\n<td>水平半径</td>\n<td></td>\n</tr>\n<tr>\n<td>re</td>\n<td>垂直半径</td>\n<td></td>\n</tr>\n<tr>\n<td>startAngle</td>\n<td>起点弧度</td>\n<td>弧度是弧度，即使用Math.PI表示</td>\n</tr>\n<tr>\n<td>endAngle</td>\n<td>终点弧度</td>\n<td></td>\n</tr>\n<tr>\n<td>clockwise</td>\n<td>为<code class=\"language-text\">true</code>时顺时针渲染，为<code class=\"language-text\">false</code>时逆时针渲染</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'fan'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">50</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">50</span><span class=\"token punctuation\">,</span>\n re<span class=\"token punctuation\">:</span> <span class=\"token number\">40</span><span class=\"token punctuation\">,</span>\n rs<span class=\"token punctuation\">:</span> <span class=\"token number\">30</span><span class=\"token punctuation\">,</span>\n startAngle<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">(</span><span class=\"token number\">1</span> <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> Math<span class=\"token punctuation\">.</span><span class=\"token constant\">PI</span><span class=\"token punctuation\">,</span>\n endAngle<span class=\"token punctuation\">:</span> Math<span class=\"token punctuation\">.</span><span class=\"token constant\">PI</span><span class=\"token punctuation\">,</span>\n clockwise<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'#b7eb8f'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"图片图形-image\"><a href=\"#%E5%9B%BE%E7%89%87%E5%9B%BE%E5%BD%A2-image\" aria-label=\"图片图形 image permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>图片图形 Image</h3>\n<p><strong>属性</strong></p>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>含义</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>x</td>\n<td>图片左上角的 x 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>y</td>\n<td>图片左上角的 y 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>width</td>\n<td>图片宽度</td>\n<td></td>\n</tr>\n<tr>\n<td>height</td>\n<td>图片高度</td>\n<td></td>\n</tr>\n<tr>\n<td>img</td>\n<td>图片源</td>\n<td>G6支持多种格式的图片：<br />- url<br />- ImageData<br />- Image<br />- canvas<br /></td>\n</tr>\n</tbody>\n</table>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'image'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n img<span class=\"token punctuation\">:</span>\n <span class=\"token string\">'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"标记图形-marker\"><a href=\"#%E6%A0%87%E8%AE%B0%E5%9B%BE%E5%BD%A2-marker\" aria-label=\"标记图形 marker permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>标记图形 Marker</h3>\n<p><strong>属性</strong></p>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>含义</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>x</td>\n<td>中心的 x 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>y</td>\n<td>中心的 y 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>r</td>\n<td>形状半径</td>\n<td></td>\n</tr>\n<tr>\n<td>symbol</td>\n<td>指定形状</td>\n<td>内置了一些常用形状，如圆形<code class=\"language-text\">circle</code>, 矩形 <code class=\"language-text\">square</code>, 菱形 <code class=\"language-text\">diamond</code>,三角形 <code class=\"language-text\">triangle</code>, 倒三角形<code class=\"language-text\">triangle-down</code>，也可以是自定义的path路径。</td>\n</tr>\n</tbody>\n</table>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'marker'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n r<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n <span class=\"token function-variable function\">symbol</span><span class=\"token punctuation\">:</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">x<span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">,</span> r</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span> <span class=\"token string\">'M'</span><span class=\"token punctuation\">,</span> x<span class=\"token punctuation\">,</span> y <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span> <span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> x <span class=\"token operator\">+</span> r<span class=\"token punctuation\">,</span> y <span class=\"token operator\">+</span> r <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span> <span class=\"token string\">'L'</span>，x <span class=\"token operator\">+</span> r <span class=\"token operator\">*</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> y <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span> <span class=\"token string\">'Z'</span> <span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<h3 id=\"多边形图形-polygon\"><a href=\"#%E5%A4%9A%E8%BE%B9%E5%BD%A2%E5%9B%BE%E5%BD%A2-polygon\" aria-label=\"多边形图形 polygon permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>多边形图形 Polygon</h3>\n<p><strong>属性</strong></p>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>含义</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>points</td>\n<td>多边形的所有端点坐标</td>\n<td>数组形式</td>\n</tr>\n</tbody>\n</table>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'polygon'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n points<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">30</span><span class=\"token punctuation\">,</span> <span class=\"token number\">30</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">40</span><span class=\"token punctuation\">,</span> <span class=\"token number\">20</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">30</span><span class=\"token punctuation\">,</span> <span class=\"token number\">50</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">60</span><span class=\"token punctuation\">,</span> <span class=\"token number\">100</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"矩形图形-rect\"><a href=\"#%E7%9F%A9%E5%BD%A2%E5%9B%BE%E5%BD%A2-rect\" aria-label=\"矩形图形 rect permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>矩形图形 Rect</h3>\n<p><strong>属性</strong></p>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>含义</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>x</td>\n<td>矩形左上角的 x 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>y</td>\n<td>矩形左上角的 y 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>width</td>\n<td>矩形的宽度</td>\n<td></td>\n</tr>\n<tr>\n<td>height</td>\n<td>矩形的高度</td>\n<td></td>\n</tr>\n<tr>\n<td>radius</td>\n<td>定义圆角</td>\n<td>支持整数或数组形式， 分别对应左上、右上、右下、左下角的半径：<br />- radius缩写为 1或 [ 1 ] 相当于 [ 1, 1, 1, 1 ]<br />- radius 缩写为 [ 1, 2 ] 相当于 [ 1, 2, 1, 2 ]<br />- radius 缩写为 [ 1, 2, 3 ] 相当于 [ 1, 2, 3, 2 ]<br /></td>\n</tr>\n</tbody>\n</table>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'rect'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">150</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">150</span><span class=\"token punctuation\">,</span>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">150</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">150</span><span class=\"token punctuation\">,</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'black'</span><span class=\"token punctuation\">,</span>\n radius<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">4</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>"}