@antv/g6
Version:
graph visualization frame work
1 lines • 24.9 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-7b357bb16be307026e7f06844681be76-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<h2 id=\"image\"><a href=\"#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</h2>\n<p>G6 内置了 image 节点，其默认样式如下。标签文本位于图片下方。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570871887871-f6d9d589-f89c-4223-b19e-7e3704fd2a7b.png#align=left&display=inline&height=182&name=image.png&originHeight=364&originWidth=338&search=&size=73813&status=done&width=169\" alt=\"image.png\"></p>\n<h2 id=\"使用方法\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95\" 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>使用方法</h2>\n<p>如 <a href=\"../defaultNode\">内置节点</a> 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。</p>\n<h3 id=\"1-实例化图时全局配置\"><a href=\"#1-%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%9B%BE%E6%97%B6%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE\" aria-label=\"1 实例化图时全局配置 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>1 实例化图时全局配置</h3>\n<p>用户在实例化 Graph 时候可以通过 <code class=\"language-text\">defaultNode</code> 指定 <code class=\"language-text\">shape</code> 为 <code class=\"language-text\">'image'</code>，即可使用 <code class=\"language-text\">image</code> 节点。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n container<span class=\"token punctuation\">:</span> <span class=\"token string\">'mountNode'</span><span class=\"token punctuation\">,</span>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">800</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">600</span><span class=\"token punctuation\">,</span>\n defaultNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'image'</span><span class=\"token punctuation\">,</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'AntV Team'</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 其他配置</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=\"2-在数据中动态配置\"><a href=\"#2-%E5%9C%A8%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8A%A8%E6%80%81%E9%85%8D%E7%BD%AE\" aria-label=\"2 在数据中动态配置 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>2 在数据中动态配置</h3>\n<p>如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node0'</span><span class=\"token punctuation\">,</span>\n \timg<span class=\"token punctuation\">:</span> <span class=\"token string\">'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000'</span><span class=\"token punctuation\">,</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'image'</span><span class=\"token punctuation\">,</span>\n size<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span><span class=\"token punctuation\">,</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'AntV Team'</span><span class=\"token punctuation\">,</span>\n labelCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n position<span class=\"token punctuation\">:</span> <span class=\"token string\">'bottom'</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 裁剪图片配置</span>\n clipCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n show<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'circle'</span><span class=\"token punctuation\">,</span>\n r<span class=\"token punctuation\">:</span> <span class=\"token number\">15</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token operator\">...</span> <span class=\"token comment\">// 其他节点</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token operator\">...</span> <span class=\"token comment\">// 边</span>\n <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h2 id=\"配置项说明\"><a href=\"#%E9%85%8D%E7%BD%AE%E9%A1%B9%E8%AF%B4%E6%98%8E\" 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>配置项说明</h2>\n<p>image 节点支持以下的配置项：</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">img<span class=\"token punctuation\">:</span> <span class=\"token string\">'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000'</span><span class=\"token punctuation\">,</span>\nsize<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span><span class=\"token punctuation\">,</span>\n labelCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n position<span class=\"token punctuation\">:</span> <span class=\"token string\">'bottom'</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 裁剪图片配置</span>\n clipCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n show<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'circle'</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// circle</span>\n r<span class=\"token punctuation\">:</span> <span class=\"token number\">15</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// ellipse</span>\n rx<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n ry<span class=\"token punctuation\">:</span> <span class=\"token number\">15</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// rect</span>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">15</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">15</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 坐标</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>\n <span class=\"token punctuation\">}</span></code></pre></div>\n<table>\n<thead>\n<tr>\n<th>名称</th>\n<th>含义</th>\n<th>类型</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><strong>img</strong></td>\n<td><strong>图片 URL 地址</strong></td>\n<td><strong>String</strong></td>\n<td><strong>image 节点特有</strong></td>\n</tr>\n<tr>\n<td>size</td>\n<td>图片大小</td>\n<td>Number</td>\n<td>Array</td>\n</tr>\n<tr>\n<td>labelCfg</td>\n<td>文件配置项</td>\n<td>Object</td>\n<td></td>\n</tr>\n<tr>\n<td><strong>clipCfg</strong></td>\n<td><strong>裁剪图片的配置项</strong></td>\n<td><strong>Object</strong></td>\n<td><strong>默认不裁剪，image 节点特有</strong></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"剪裁\"><a href=\"#%E5%89%AA%E8%A3%81\" 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><code class=\"language-text\">clipCfg</code></p>\n<table>\n<thead>\n<tr>\n<th>名称</th>\n<th>含义</th>\n<th>类型</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>type</td>\n<td>裁剪的图片形状</td>\n<td>String</td>\n<td>支持 <code class=\"language-text\">'circle'</code>、<code class=\"language-text\">'rect'</code>、<code class=\"language-text\">'ellipse'</code></td>\n</tr>\n<tr>\n<td>x</td>\n<td>裁剪图形的 x 坐标</td>\n<td>Number</td>\n<td>默认为 0，类型为 <code class=\"language-text\">'circle'</code>、<code class=\"language-text\">'rect'</code>、<code class=\"language-text\">'ellipse'</code> 时生效</td>\n</tr>\n<tr>\n<td>y</td>\n<td>裁剪图形的 y 坐标</td>\n<td>Number</td>\n<td>默认为 0，类型为 <code class=\"language-text\">'circle'</code>、<code class=\"language-text\">'rect'</code>、<code class=\"language-text\">'ellipse'</code> 时生效</td>\n</tr>\n<tr>\n<td>show</td>\n<td>是否启用裁剪功能</td>\n<td>Boolean</td>\n<td>默认不裁剪，值为 <code class=\"language-text\">false</code></td>\n</tr>\n<tr>\n<td>r</td>\n<td>剪裁圆形的半径</td>\n<td>Number</td>\n<td>剪裁 type 为 <code class=\"language-text\">'circle'</code> 时生效</td>\n</tr>\n<tr>\n<td>width</td>\n<td>剪裁矩形的宽度</td>\n<td>Number</td>\n<td>剪裁 type 为 <code class=\"language-text\">'rect'</code> 时生效</td>\n</tr>\n<tr>\n<td>height</td>\n<td>剪裁矩形的长度</td>\n<td>Number</td>\n<td>剪裁 type 为 <code class=\"language-text\">'rect'</code> 时生效</td>\n</tr>\n<tr>\n<td>rx</td>\n<td>剪裁椭圆的长轴半径</td>\n<td>Number</td>\n<td>剪裁 type 为 <code class=\"language-text\">'ellipse'</code> 时生效</td>\n</tr>\n<tr>\n<td>ry</td>\n<td>剪裁椭圆的短轴半径</td>\n<td>Number</td>\n<td>剪裁 type 为 <code class=\"language-text\">'ellipse'</code> 时生效</td>\n</tr>\n</tbody>\n</table>\n<p>所有的裁剪类型都提供了默认值。下面代码演示在实例化图时全局配置 <code class=\"language-text\">clipCfg</code> 的最简形式：</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <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 shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'image'</span><span class=\"token punctuation\">,</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'image'</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>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n container<span class=\"token punctuation\">:</span> <span class=\"token string\">'mountNode'</span><span class=\"token punctuation\">,</span>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">800</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">600</span><span class=\"token punctuation\">,</span>\n defaultNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// shape: 'image', // 在数据中已经指定 shape，这里无需再次指定</span>\n clipCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n show<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'circle'</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>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"裁剪类型\"><a href=\"#%E8%A3%81%E5%89%AA%E7%B1%BB%E5%9E%8B\" 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>裁剪类型</h4>\n<h5 id=\"圆形剪裁\"><a href=\"#%E5%9C%86%E5%BD%A2%E5%89%AA%E8%A3%81\" 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>圆形剪裁</h5>\n<p><code class=\"language-text\">circle</code>\n当剪裁配置 <code class=\"language-text\">clipCfg</code> 中的裁剪类型 <code class=\"language-text\">type</code> 为 <code class=\"language-text\">'circle'</code> 时，如下配置可以得到下图效果：</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">clipCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n show<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'circle'</span><span class=\"token punctuation\">,</span>\n r<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/244306/1569832291192-34209829-114c-495e-973a-e6cdbfeec0c1.png#align=left&display=inline&height=231&name=image.png&originHeight=462&originWidth=472&search=&size=125144&status=done&width=236\" alt=\"image.png\"></p>\n<h5 id=\"矩形剪裁\"><a href=\"#%E7%9F%A9%E5%BD%A2%E5%89%AA%E8%A3%81\" 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>矩形剪裁</h5>\n<p><code class=\"language-text\">rect</code></p>\n<p>当剪裁配置 <code class=\"language-text\">clipCfg</code> 中的裁剪类型 <code class=\"language-text\">type</code> 为 <code class=\"language-text\">'rect'</code> 时，如下配置可以得到下图效果：</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">clipCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n show<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'rect'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span><span class=\"token number\">50</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span><span class=\"token number\">50</span><span class=\"token punctuation\">,</span>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> \n height<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/244306/1569832291263-32c9b20f-e374-42a7-874a-5c33a13e8b85.png#align=left&display=inline&height=204&name=image.png&originHeight=408&originWidth=310&search=&size=51708&status=done&width=155\" alt=\"image.png\"></p>\n<h5 id=\"椭圆剪裁\"><a href=\"#%E6%A4%AD%E5%9C%86%E5%89%AA%E8%A3%81\" 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>椭圆剪裁</h5>\n<p><code class=\"language-text\">ellipse</code></p>\n<p>当剪裁配置 <code class=\"language-text\">clipCfg</code> 中的裁剪类型 <code class=\"language-text\">type</code> 为 <code class=\"language-text\">'ellipse'</code> 时，如下配置可以得到下图效果：</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">clipCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n show<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'ellipse'</span><span class=\"token punctuation\">,</span>\n rx<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n ry<span class=\"token punctuation\">:</span> <span class=\"token number\">60</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/244306/1569832291204-bd1e7dbe-a3b5-47c6-9b46-143ed018226d.png#align=left&display=inline&height=199&name=image.png&originHeight=398&originWidth=486&search=&size=88894&status=done&width=243\" alt=\"image.png\"></p>"}