javascript - Fabric .js : Always visible controls

Question

我使用fabric.js 进行图像处理，它效果很好，但我需要控件始终可见，即使当我在对象/图像外部单击时也是如此。

默认情况下，仅当您单击对象/图像时它们才可见，如果您单击其外部，控件就会消失。

可以这样做吗？

谢谢。

Answer 1

不幸的是，FabricJS 中目前没有内置方法来实现这一点。

但是，这里有一个解决方法(function)，它将模拟此功能...

function showControls(...objs) {
   objs.forEach(obj => {
      obj.set('active', true);
      canvas.renderAll();
      canvas.on('mouse:down', function(e) {
         obj.set('active', true);
      });
   })
}

在 Canvas 上添加图像对象后，调用上述函数，并将图像对象作为参数传递，您希望显示控件。

ᴅᴇᴍᴏ

var canvas = new fabric.Canvas('c');
// add rectangle (for demo purposes only)
var rect = new fabric.Rect({
   top: 100,
   left: 290,
   width: 100,
   height: 100,
   fill: '#07C',
   originX: 'center',
   originY: 'center',
   transparentCorners: false
});
canvas.add(rect);
// add image (for demo purposes only)
fabric.Image.fromURL('https://i.imgur.com/Q6aZlme.jpg', function(img) {
   img.set({
      top: 100,
      left: 110,
      width: 100,
      height: 100,
      originX: 'center',
      originY: 'center',
      transparentCorners: false
   })
   canvas.add(img);
   showControls(img);	// pass an object that you wish to show controls for
});

// always show controls (multi-object support)
function showControls(...objs) {
   objs.forEach(obj => {
      obj.set('active', true);
      canvas.renderAll();
      canvas.on('mouse:down', function(e) {
         obj.set('active', true);
      });
   })
}

canvas{border:1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="c" width="400" height="200"></canvas>