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.e.y - mousecursor.radius;
  mousecursor.left = obj.e.x - 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>