Question

脚本通过AJAX请求获取JSON数据，然后在Canvas上呈现。问题是在同一页面上有多个带有画布的按钮，每个按钮触发一个新的AJAX请求并呈现返回的JSON数据。

每隔一秒渲染就会出现问题（这很奇怪）。例如，在第一个渲染鼠标：向下事件工作，在第二个渲染它激发两次，在第三渲染它工作，在第四渲染它激发两次，依此类推..

以下是每次点击按钮时触发的脚本：

// objects variable is the JSON returned from AJAX request and
// all of it fabricJS objects.
var drawing = JSON.parse(objects);

for (var i = 0; i < drawing.objects.length; i++) {
    drawing.objects[i]['left'] += 50;
}

canvas.clear();
canvas.loadFromJSON(drawing, canvas.renderAll.bind(canvas));

canvas.setZoom(0.66);
canvas.setZoom(canvas.getZoom() * 1.3);

canvas.on('mouse:down', function (el) {
    console.log(el.target);
}

编辑显然我在每个渲染上使用相同的事件侦听器。这就是为什么它会在第二次渲染时触发两次，在第三次渲染时触发三次等等。

Answer 1

在向画布添加另一个canvas.off('mouse:down')事件之前使用mouse:down。如果你只想要一个活动。 canvas.off将删除附加到画布的事件。

<强>样本

＆＃13;

var canvas = new fabric.Canvas('c');
function addEvent(){
 canvas.on('mouse:down',function(){
  console.log('mouseDown');
 })
}
function removeEvent(){
 canvas.off('mouse:down');
}

＆＃13;

canvas {
    border: 1px solid #999;
}

＆＃13;

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick='addEvent()'>addEvent</button>
<button onclick='removeEvent()'>removeEvent</button>
<canvas id="c" width="500" height="500"></canvas>

＆＃13;

Fabricjs鼠标：向下事件触发两次

1 个答案: