Question

我需要观察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（）{ // DoSomething的}）;

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

Answer 1

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

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

因此，如果您想在画布上检测到免费绘图，可以使用path:created事件。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

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

2 个答案: