fabric.js：始终可见的控件答案

【问题标题】：fabric.js: Always visible controlsfabric.js：始终可见的控件
【发布时间】：2017-11-11 03:50:14
【问题描述】：

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

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

可以吗？

谢谢。

【问题讨论】：

最近我经历了同样的场景，我使用setActiveObject()属性解决了这个问题：canvas.setActiveObject(fabricObject)

标签： javascript canvas fabricjs

【解决方案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);
      });
   })
}

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

ᴅᴇᴍᴏ

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>

【讨论】：

非常感谢您的时间和回答，效果很好。
当我使用 cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js 时，上面的代码不起作用

【解决方案2】：

不完美，只是一个开始


// fabricjs object - always show controls

//fabric.Object.prototype.render = (function (render) {
fabric.Image.prototype.render = (function (render) {
    return function (ctx) {
        render.apply(this, arguments)

        // show controls
        // but most controls are not usable
        // until you activate [click] the object
        this._renderControls(ctx)

        // activate this object
        // to make all controls usable
        // only one active object per canvas
        // when another object is active
        // the controls become not usable
        if (!this.canvas._activeObject)
            this.canvas._activeObject = this
    }
//})(fabric.Object.prototype.render)
})(fabric.Image.prototype.render)



// fabricjs object - activate on mouseover
// this is just a quick hack
// to make controls always usable

//fabric.Object.prototype.initialize = (function (initialize) {
fabric.Image.prototype.initialize = (function (initialize) {
    return function () {
        initialize.apply(this, arguments)

        this.on('mouseover',
        function(event) {
            this.canvas.setActiveObject(this)
            this.canvas.renderAll() // TODO cheaper?
        })
    }
//})(fabric.Object.prototype.initialize)
})(fabric.Image.prototype.initialize)

【讨论】：