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,但同样不适用于触摸设备,因为如果我触摸对象,则只有触摸启动才有效。
最佳答案
只需删除控件和边框即可使其只能拖动
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>
关于javascript - 无法移动fabricjs对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46078046/