Fabric.js - 详细使用教程4（事件监听：与画布、对象进行交互）

2020-03-02 发布：hangge 阅读：3969

四、事件监听

1，与画布进行交互

（1）下面代码对画布常用事件（鼠标按下、弹起、移动）进行监听，并在监听响应中将鼠标的坐标打印到控制台中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        canvas {
            border: 1px dashed black;
        }
    </style>
    <script src="fabric.min.js"></script>
    <script>
        window.onload = function() {
            var canvas = new fabric.Canvas('canvas');

            // 鼠标按下时
            canvas.on('mouse:down', function(options) {
                console.log("鼠标按下了：", options.e.clientX, options.e.clientY);
            })

            // 鼠标抬起时
            canvas.on('mouse:up', function(options) {
                console.log("鼠标抬起了：", options.e.clientX, options.e.clientY);
            })

            // 鼠标移动时
            canvas.on('mouse:move', function(options) {
                console.log("鼠标移动了：", options.e.clientX, options.e.clientY);
            })
        }
    </script>
</head>
<body>
<canvas id="canvas" width="300" height="200"></canvas>
</body>
</html>

（2）运行结果如下：

2，与对象进行交互

（1）下面代码监听矩形对象的选中事件，并在选中后打印出相关信息。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        canvas {
            border: 1px dashed black;
        }
    </style>
    <script src="fabric.min.js"></script>
    <script>
        window.onload = function() {
            var canvas = new fabric.Canvas('canvas');

            var rect = new fabric.Rect({
                top : 50, //距离画布上边的距离
                left : 100, //距离画布左侧的距离，单位是像素
                width : 100, //矩形的宽度
                height : 70, //矩形的高度
                fill : 'red' //填充的颜色
            });

            //选中监听事件
            rect.on('selected', function() {
                console.log('矩形被选中了');
            });

            canvas.add(rect);
        }
    </script>
</head>
<body>
<canvas id="canvas" width="300" height="200"></canvas>
</body>
</html>

（2）对象还有如下一些常用的监听事件：

after:render：画布重绘后
object:selected：对象被选中
object:moving：对象移动
object:rotating：对象被旋转
object:added：对象被加入
object:removed：对象被移除