快速上手
在本教程中，我们将介绍如何使用 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 之旅吧！