无法移动fabricjs对象

Question

var canvas = new fabric.Canvas('canvas');
canvas.selection = false;
var circle = new fabric.Circle({
    left: 150,
    top: 150,
    radius: 50,
    originX: 'center',
    originY: 'center',
    selectable: false
});
canvas.add(circle);
circle.on('mousedown',function(){
 console.log('down')
 circle.set({
  selectable: true
 })
 canvas.renderAll();
})
circle.on('mouseout',function(){
 console.log('out')
  circle.set({
  selectable: false
 })
 canvas.renderAll();
})

canvas {
  border: 2px dotted green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js" charset="utf-8"></script>
<canvas id="canvas" width="400" height="400"></canvas>

我想在鼠标按下时创建对象selectable，在鼠标移出时我想创建not selectable。如果我点击里面并拖动它不动。但是如果我在里面点击两次以上，它就可以工作了。但我想让这项工作点击一次。如何达到同样的效果？

--更新--

正如@AndreaBogazzi 所建议的，它适用于桌面上的mouesmove，但同样不适用于触摸设备，因为如果我触摸对象，只有触摸启动才会起作用。

Answer 1

只需删除控件和边框，使其只能拖动

var canvas = new fabric.Canvas('canvas');
canvas.selection = false;
var circle = new fabric.Circle({
  left: 150,
  top: 150,
  radius: 50,
  originX: 'center',
  originY: 'center',
  selectable: true,
  hasControls: false,
  hasBorders: false
});
canvas.add(circle);

canvas {
  border: 2px dotted green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js" charset="utf-8"></script>
<canvas id="canvas" width="400" height="400"></canvas>

Answer 2

这不能在fabricjs 中完成。 鼠标按下事件在选择逻辑已经执行后触发。

您可以在mouseover 上选择它

如果这对您有用，则它等于一个始终可选择的对象，除非您在 mousedown（或 mouseover）事件中运行自定义逻辑以使其在某些情况下可选择。

var canvas = new fabric.Canvas('canvas');
canvas.selection = false;
var circle = new fabric.Circle({
    left: 150,
    top: 150,
    radius: 50,
    originX: 'center',
    originY: 'center',
    selectable: false
});
canvas.add(circle);
circle.on('mouseover',function(){
 console.log('over')
 circle.set({
  selectable: true
 })
 canvas.renderAll();
})
circle.on('mouseout',function(){
 console.log('out')
  circle.set({
  selectable: false
 })
 canvas.renderAll();
})

canvas {
  border: 2px dotted green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js" charset="utf-8"></script>
<canvas id="canvas" width="400" height="400"></canvas>