Fabric.js-将对象创建附加到鼠标单击

Question

创建新的结构对象时，可以指定其在画布上显示的位置。 有没有一种方法可以将生成的对象附加到鼠标，然后将其放置在单击（或触摸）上？

例如，生成在画布上显示的圆圈的方法。

var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});

Answer 1

更新对象的位置以使其与鼠标的位置相匹配是很容易的，并且在mouse:up克隆该对象并将其放置在画布上。

 var canvas = new fabric.Canvas('c'); var mousecursor = new fabric.Circle({ left: 0, top: 0, radius: 5, fill: '#9f9', originX: 'right', originY: 'bottom', }) canvas.add(mousecursor); canvas.on('mouse:move', function(obj) { mousecursor.top = obj.ey - mousecursor.radius; mousecursor.left = obj.ex - mousecursor.radius; canvas.renderAll() }) canvas.on('mouse:out', function(obj) { // put circle off screen mousecursor.top = -100; mousecursor.left = -100; canvas.renderAll() }) canvas.on('mouse:up', function(obj) { canvas.add(mousecursor.clone()) canvas.renderAll() }) 

 canvas { border: 1px solid #ccc; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script> <canvas id="c" width="600" height="600"></canvas>