01-Canvas-使用fabric初始

发布于:2025-03-16 ⋅ 阅读:(17) ⋅ 点赞:(0)

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>

网站公告

今日签到

点亮在社区的每一天
去签到