高高高

LeaferJS 使用教程

LeaferJS 是一个基于 Canvas 的 2D 图形库，适用于创建交互式的图形和动画。以下是一个简单的使用示例。

1. 引入 LeaferJS

首先，你需要在 HTML 文件中引入 LeaferJS 库。你可以通过 CDN 来引入：

<script src="https://unpkg.com/leaferjs@latest/dist/leafer.js"></script>

2. 创建画布

接下来，创建一个画布元素，并初始化 Leafer 实例：

<div id="canvasContainer"></div>

3. 绘制图形

使用 LeaferJS 绘制图形非常简单。以下是一个绘制矩形和圆形的示例：

<script>
    // 初始化 Leafer
    const leafer = new Leafer({
        view: '#canvasContainer',
        width: 500,
        height: 500
    });

    // 创建一个矩形
    const rect = new Rectangle({
        x: 50,
        y: 50,
        width: 100,
        height: 100,
        fill: 'blue'
    });

    // 创建一个圆形
    const circle = new Circle({
        x: 200,
        y: 100,
        radius: 50,
        fill: 'red'
    });

    // 将图形添加到画布
    leafer.add(rect);
    leafer.add(circle);
</script>

4. 添加交互

LeaferJS 支持多种交互事件。你可以为图形添加点击事件：

<script>
    rect.on('click', () => {
        alert('矩形被点击了！');
    });

    circle.on('click', () => {
        alert('圆形被点击了！');
    });
</script>

5. 运行效果

将上述代码整合到一个 HTML 文件中，打开浏览器即可看到效果。