Question

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

E.g。生成画布上出现的圆圈的方法。

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>

Answer 2

var canvas = new fabric.Canvas('c');

var mousecursor = new fabric.Circle({ 
  left: 0, 
  top: 0, 
  radius: 50, 
  fill: '#9f9', 
  originX: 'right', 
  originY: 'bottom',
})

canvas.add(mousecursor);
   
canvas.on('mouse:move', function(obj) {
  mousecursor.top = obj.e.y;
  mousecursor.left = obj.e.x;
  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>

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

2 个答案: