Question

＆＃13;

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();
})

＆＃13;

canvas {
  border: 2px dotted green;
}

＆＃13;

<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>

＆＃13;

我想在鼠标按下时创建对象selectable，在鼠标输出时我想创建not selectable。如果我在里面点击并拖动它不动。但如果我点击两次以上，它的工作。但我想让这项工作点击一次。如何实现同样的目标？

- 更新 -

根据@AndreaBogazzi的建议，它适用于桌面上的mouesmove，但同样不适用于触摸设备，因为只有触摸对象才能触摸启动。

Answer 1

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

您可以做的是在mouseover

上选择它

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

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>

Answer 2

只需移除控件和边框即可使其仅可拖动

＆＃13;

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);

＆＃13;

canvas {
  border: 2px dotted green;
}

＆＃13;

<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>

＆＃13;

无法移动fabricjs对象

2 个答案: