Fabric.js - 详细使用教程4（事件监听：与画布、对象进行交互）
作者：hangge | 2020-03-02 08:10
四、事件监听
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：对象被移除
全部评论（0）