G

Web Components 允许扩展浏览器内置的 HTML 元素并完成复用。在使用声明式写法的同时，这也是一种与视图层（React Vue Svelte 等）无关的方案。当然如果有需要，视图层也很容易基于它继续封装。

在该中，我们使用 HTML 语法定义，避免了大量诸如这样的命令式调用。而对于各个图形则非常类似 SVG 的用法，属性值都以字符串形式存在。

<g-canvas renderer="canvas" width="400" height="400">
    <g-rect
        fill="#2f54eb"
        radius="0 24px 24px"
        x="12px"
        y="24px"
        width="200px"
        height="50px"
    >
        <g-circle fill="#adc6ff" r="16px" cx="25px" cy="25px"></g-circle>
        <g-text fill="#fff" x="50px" y="20px">我是一段文字</g-text>
    </g-rect>
</g-canvas>

局限性：

自定义元素的属性值只支持 string 和 boolean
事件绑定这样必须要使用命令式 API 的情况下，需要使用 ref

安装方式

同样有以下两种使用方式。

使用 CDN：

<script src="https://unpkg.com/@antv/g"></script>
<script src="https://unpkg.com/@antv/g-canvas"></script>
<script src="https://unpkg.com/@antv/g-web-components"></script>

使用 NPM module:

import '@antv/g';
import '@antv/g-canvas';
import '@antv/g-web-components';

安装完成之后会使用 CustomElementRegistry.define() 自动完成相关组件的注册。

Custom Elements

目前支持以下自定义元素。大部分都可以参考对应图形的命令式 API。

<g-canvas>

<g-circle>

可参考 Circle。

<g-ellipse>

可参考 Ellipse。

<g-rect>

可参考 Rect。

需要注意 radius 需要使用数组字符串形式：

<g-rect
    radius="0 24px 24px"
    x="12px"
    y="24px"
    width="200px"
    height="50px"
></g-rect>

<g-line>

可参考 Line。

<g-path>

可参考 Path。

需要注意路径定义一定要使用字符串形式。

<g-path
    transform="translate(0, 100px)"
    stroke="#2f54eb"
    path="M 0,40 C 5.5555555555555545,40,22.222222222222218,44.44444444444445,33.33333333333333,40 C 44.444444444444436, ..."
></g-path>

使用 Web Components

安装方式

Custom Elements

<g-canvas> type="button" class="ant-btn ant-btn-text ant-btn-icon-only button comment-link">

<g-circle> type="button" class="ant-btn ant-btn-text ant-btn-icon-only button comment-link">

<g-ellipse> type="button" class="ant-btn ant-btn-text ant-btn-icon-only button comment-link">

<g-rect> type="button" class="ant-btn ant-btn-text ant-btn-icon-only button comment-link">