如何检测画布的内容何时更改？答案

【问题标题】：How to detect when the content of a canvas was changed?如何检测画布的内容何时更改？
【发布时间】：2017-01-16 21:29:24
【问题描述】：

我需要观察画布对象的变化（我使用的是 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(){ //dosomething});

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

【问题讨论】：

标签： javascript json canvas fabricjs

【解决方案1】：

由于您提到了isDrawingMode:true 的示例，我认为您正在寻找一种方法来检测画布上的手绘模式。

Fabric JS 公开了一长串事件，您可以阅读here。

因此，如果您想检测画布上的免费绘图，您可以使用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】：

画布调用它自己的事件，如本文档中所述：Class: Canvas 您将在其中看到画布发出的许多事件。

检查对象是否被修改的事件如下：

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

【讨论】：

我错过了 isDrawingMode 参数。 path:created 可能是更好的绑定事件。您可以随时参加此页面上列出的活动：fabricjs.com/docs/fabric.Canvas.html