javascript - 如何检测 canvas 的内容何时被更改？

我需要监控画布对象的变化（我正在使用 fabricjs 库）。

var canvas = this.__canvas = new fabric.Canvas('canvas', {isDrawingMode:true});
//I need to watch the changes here -> 
canvas.toJSON();

我尝试使用 Object.prototype.watch() 如下：

canvas.toJSON.watch('objects', function(){ //做某事});

但那对我没有用，有什么帮助吗？

答案＃1

既然你的示例提到了 isDrawingMode:true，我认为你是在寻找一种方法来检测画布上的自由手绘模式绘图。

Fabric JS 提供了一个长长的事件列表，你可以在这里查看。

所以如果你想检测画布上的自由绘图，你可以使用 path:created 事件。

var canvas = new fabric.Canvas('canvas',{isDrawingMode:true});
canvas.on('path:created', function(event) {
    //log the svg path  info
   console.log(event.path.path);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>

答案＃2

画布会调用自身的事件，如本文件所述：类：Canvas，在这里你将看到画布触发的许多事件。

用于检查对象是否被修改的事件如下:

canvas.on('object:modified', function(event) {
    // the object that has been modified is in:
    event.target
})