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

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

<强>ᴅᴇᴍᴏ

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>

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

fabric.js：始终可见的控件

2 个答案: