快速上手

在本教程中，我们将介绍如何使用 VRender 绘制一个圆形。VRender 是一款简单易用、跨平台、高性能的前端可视化渲染库。

获取 VRender

你可以通过以下几种方式获取 VRender。

使用 NPM 包

首先，你需要在项目根目录下使用以下命令安装 VRender：

# 使用 npm 安装
npm install @visactor/vrender

# 使用 yarn 安装
yarn add @visactor/vrender

使用 CDN

你还可以通过 CDN 获取构建好的 VRender 文件。将以下代码添加到 HTML 文件的 <head> 标签中：

<script src="https://unpkg.com/@visactor/vrender/build/index.min.js"></script>

引入 VRender

通过 NPM 包引入

在 JavaScript 文件顶部引入浏览器 App 入口和图元创建函数：

import { createBrowserVRenderApp, createCircle } from '@visactor/vrender';

使用 script 标签引入

通过直接在 HTML 文件中添加 <script> 标签，引入构建好的 vchart 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入 vchart 文件 -->
    <script src="https://unpkg.com/@visactor/vrender/build/index.min.js"></script>
  </head>
</html>

绘制一个圆形

在绘图前我们可以为 VRender 准备一个具备高宽的 DOM 容器。

<body>
  <!-- 为 vchart 准备一个具备大小（宽高）的 DOM，当然你也可以在 spec 配置中指定 -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

接下来，先创建一个浏览器 App，再通过 app.createStage() 创建 Stage，最后创建一个圆形并添加到 Stage 中：

// 创建 app 和 stage
const app = createBrowserVRenderApp();
const stage = app.createStage({
  canvas: 'main',
  autoRender: true // 开启自动渲染
});
// 创建一个circle图元
const circle = createCircle({
  radius: 60,
  x: 200,
  y: 200,
  fill: 'red'
});
// 添加到 stage 中
stage.defaultLayer.add(circle);

至此，你已经成功绘制出了一个红色的圆形！

// 创建 app 和 stage
const app = createBrowserVRenderApp();
const stage = app.createStage({
  canvas: 'main',
  autoRender: true // 开启自动渲染
});
// 创建一个circle图元
const circle = createCircle({
  radius: 60,
  x: 200,
  y: 200,
  fill: 'red'
});
// 监听点击事件，然后填充色变成绿色
circle.addEventListener('click', () => {
  circle.setAttribute('fill', 'green');
});
// 添加到 stage 中
stage.defaultLayer.add(circle);

希望这篇教程对你学习如何使用 VRender 有所帮助。现在，你可以尝试绘制不同类型的图元，并通过深入了解 VRender 的各种配置选项，定制出更加丰富多样的绘图效果。勇敢开始你的 VRender 之旅吧！