javascript - 无法移动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>

我想让对象在鼠标按下时可选择，而在鼠标移出时我想让对象不可选择。如果我单击内部并拖动它不会移动。但如果我点击里面两次以上，它就可以工作。但我想让这个工作点击一次。如何达到同样的效果？

--更新--

正如 @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>