最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to detect when the content of a canvas was changed? - Stack Overflow

programmeradmin1浏览0评论

I need to watch the changes in an canvas object (I'm using fabricjs library).

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

I try out with Object.prototype.watch() like:

canvas.toJSON.watch('objects', function(){ //dosomething});

But that hasn't worked for me, any help?

I need to watch the changes in an canvas object (I'm using fabricjs library).

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

I try out with Object.prototype.watch() like:

canvas.toJSON.watch('objects', function(){ //dosomething});

But that hasn't worked for me, any help?

Share Improve this question asked Sep 8, 2016 at 20:21 Cesar Jr RodriguezCesar Jr Rodriguez 1,8214 gold badges23 silver badges36 bronze badges 0
Add a ment  | 

2 Answers 2

Reset to default 4

Since your example mentioned isDrawingMode:true I think you are looking for a way to detect the drawing on you canvas in free hand mode.

Fabric JS expose a long list of events, as you can read here.

So if you want to detect the free drawing on your canvas you can use path:created event.

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./ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>

The canvas calls it's own events as outlined in this doc: Class: Canvas where you will see lots of events the canvas emits.

The event for checking if the object is modified is below:

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

评论列表(0)

  1. 暂无评论