当前位置：首页 > news >正文

01-Canvas-使用fabric初始

news 来源：原创 2025/5/18 2:57:28

fabric官网：

https://fabric5.fabricjs.com/demos/

创建画布并绘制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fabric.js Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
</head>

<body>
    <canvas id="canvas" width="500" height="500" style="border: 1px solid #000;"></canvas>
    <script>
        const canvas = new fabric.Canvas('canvas');

        // 添加矩形
        const rect = new fabric.Rect({
          left: 100,
          top: 100,
          width: 200,
          height: 100,
          fill: 'red',
          stroke: 'black',
          strokeWidth: 2,
        });
        canvas.add(rect);

        // 添加文本
        const text = new fabric.Text('Hello Fabric.js', {
          left: 50,
          top: 50,
          fontSize: 30,
          fill: 'green'
        });
        canvas.add(text);

        // 监听对象选中事件
        canvas.on('object:selected', function(e) {
          console.log('对象被选中:', e.target);
        });
    </script>
</body>

</html>

在这里插入图片描述

canvas相关内容

canvas.on 是用于监听画布（Canvas）或画布上对象（Object）事件的方法。通过 canvas.on，你可以监听用户交互（如点击、拖拽、缩放等）或对象状态变化（如选中、移动、旋转等）的事件。

canvas.on('事件名称', 回调函数);

事件名称：要监听的事件名称，例如 ‘mouse:down’、‘object:selected’ 等。

回调函数：事件触发时执行的回调函数，通常接收一个事件对象 e 作为参数。

 - 画布事件:   
 mouse:down：鼠标在画布上按下时触发。
 mouse:move：鼠标在画布上移动时触发。
 mouse:up：鼠标在画布上释放时触发。
 object:added：对象被添加到画布时触发。
 object:removed：对象从画布中移除时触发。

 - 对象事件:
 object:selected：对象被选中时触发。
 object:moving：对象正在移动时触发。
 object:scaling：对象正在缩放时触发。
 object:rotating：对象正在旋转时触发。
 object:modified：对象被修改（移动、缩放、旋转等）后触发。

 - 选择事件:
 selection:created：创建选择（选中一个或多个对象）时触发。
 selection:updated：选择更新时触发。
 selection:cleared：选择被清除时触发。 


- 在回调函数中，事件对象 e 通常包含以下常用属性：
e.target：触发事件的对象（例如被选中的对象）。
e.pointer：鼠标的坐标（{ x, y }）。
e.button：鼠标按钮（左键、右键等）。
e.e：原生事件对象（如 MouseEvent）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fabric.js Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
</head>

<body>
    <canvas id="canvas" width="500" height="500" style="border: 1px solid #000;"></canvas>
    <script>
        const canvas = new fabric.Canvas('canvas');

        // 添加矩形
        const rect = new fabric.Rect({
            left: 100,
            top: 100,
            width: 200,
            height: 100,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 2,
        });
        canvas.add(rect);
        
        // 监听画布点击事件
        canvas.on('mouse:down', function (e) {
            console.log('画布被点击，坐标:', e.pointer);
        });

        // 监听对象选中事件
        canvas.on('object:selected', function (e) {
            console.log('对象被选中:', e.target);
        });

        // 监听对象移动事件
        canvas.on('object:moving', function (e) {
            console.log('对象正在移动:', e.target);
        });

        // 监听选择事件
        canvas.on('selection:created', function (e) {
            console.log('选择被创建:', e.target);
        });

        canvas.on('selection:updated', function (e) {
            console.log('选择被更新:', e.target);
        });

        canvas.on('selection:cleared', function (e) {
            console.log('选择被清除');
        });

    </script>
</body>

</html>