即使在fabric.js中未选择图像，如何默认显示自定义控件图标

Question

当图像是活动对象时，我想显示该图像的自定义控件图标。

当选择并移动图像时，我能够获得控件，但是我想默认显示。

请参阅此codepen

var canvas = new fabric.Canvas('canvas');
var DIMICON = 15;
var HideControls = {
  'tl': true,
  'tr': true,
  'bl': true,
  'br': true,
  'ml': false,
  'mt': false,
  'mr': false,
  'mb': false,
  'mtr': false
};

var dataImage = [
  "https://cdn1.iconfinder.com/data/icons/streamline-interface/60/cell-8-10-120.png", /*scale*/
  "https://cdn1.iconfinder.com/data/icons/ui-color/512/Untitled-12-128.png", /*delete*/
  "https://cdn2.iconfinder.com/data/icons/social-messaging-productivity-1/128/sync-16.png", /*rotate*/
  "https://cdn2.iconfinder.com/data/icons/social-messaging-productivity-1/128/write-compose-16.png", /*change text*/
  "https://cdn3.iconfinder.com/data/icons/social-messaging-productivity-1/128/save-16.png" /*save*/
];
//********override*****//
fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top) {
  if (!this.isControlVisible(control)) {
    return;
  }
  var SelectedIconImage = new Image();
  var size = this.cornerSize;
  /*  fabric.isVML() ||*/
  this.transparentCorners || ctx.clearRect(left, top, size, size);
  switch (control) {
    case 'tl':
      /*delete*/
      SelectedIconImage.src = dataImage[1];
      break;
    case 'tr':
      /*scale*/
      SelectedIconImage.src = dataImage[0];
      break;
    case 'bl':
      /*scale*/
      SelectedIconImage.src = dataImage[0];
      break;
    case 'br':
      /*rotate*/
      SelectedIconImage.src = dataImage[2];
      break;
    default:
      ctx[methodName](left, top, size, size);
  }

  if (control == 'tl' || control == 'tr' || control == 'bl' || control == 'br') {
    try {
      ctx.drawImage(SelectedIconImage, left, top, DIMICON, DIMICON);
    } catch (e) {
      ctx[methodName](left, top, size, size);
    }
  }
}

//override prorotype _setCornerCursor to change the corner cusrors
fabric.Canvas.prototype._setCornerCursor = function(corner, target) {
  if (corner === 'mtr' && target.hasRotatingPoint) {
    this.setCursor(this.rotationCursor);
    /*ADD*/
  } else if (corner == "tr" || corner == "bl") {
    this.setCursor('sw-resize');

  } else if (corner == "tl" || corner == "br") {
    this.setCursor('pointer');
  }
  /*ADD END*/
  else {
    this.setCursor(this.defaultCursor);
    return false;
  }
};
fabric.Canvas.prototype._getActionFromCorner = function(target, corner, e) {

  var action = 'drag';
  if (corner) {
    switch (corner) {
      case 'ml':
      case 'mr':
        action = 'scaleX';
        break;
      case 'mt':
      case 'mb':
        action = 'scaleY';
        break;
      case 'mtr':
        action = 'rotate';
        break;
        /**ADD **/
      case 'br':
        action = 'rotate';
        break;
      case 'tl': //delete function if mouse down
        action = 'delete';
        canvas.remove(canvas.getActiveObject());
        break;
        /**ADD END**/
      default:
        action = 'scale';
    }

  }
  return action;
}

fabric.Canvas.prototype._performTransformAction = function(e, transform, pointer) {

  var y = pointer.y,
    x = pointer.x,
    action = transform.action,
    actionPerformed = false,
    options = {
      target: transform.target,
      e: e,
      transform: transform,
      pointer: pointer
    };

  if (action === 'rotate') {

    (actionPerformed = this._rotateObject(x, y)) && this._fire('rotating', options);
  } else if (action === 'scale') {
    (actionPerformed = this._onScale(e, transform, x, y)) && this._fire('scaling', options);

  } else if (action === 'scaleX') {

    (actionPerformed = this._scaleObject(x, y, 'x')) && this._fire('scaling', options);
  } else if (action === 'scaleY') {
    (actionPerformed = this._scaleObject(x, y, 'y')) && this._fire('scaling', options);
  }
  /**ADD**/
  else if (action === 'delete') {
    //do nothing, because here function executed when mouse moves
  }
  /**ADD END**/
  else {
    actionPerformed = this._translateObject(x, y);
    if (actionPerformed) {
      this._fire('moving', options);
      this.setCursor(options.target.moveCursor || this.moveCursor);
    }
  }
  transform.actionPerformed = transform.actionPerformed || actionPerformed;
}
//********override END*****//

fabric.Image.fromURL('http://serio.piiym.net/CVBla/txtboard/thumb/1260285874089s.jpg', function(img) {
  img.top = 0;
  img.left = 0;
  img.setControlsVisibility(HideControls);
  canvas.add(img);
});

canvas.renderAll();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="canvas-container" class="over">
  <div class="canvas-container" style="width: 800px; height: 600px; position: relative; -webkit-user-select: none;">
    <canvas id="canvas" width="400" height="300"></canvas>
  </div>
</div>

Answer 1

首先将canvas.setActiveObject用于img

 canvas.add(img);
 canvas.setActiveObject(img);

然后，在加载图像后重新渲染画布。

  var SelectedIconImage = new Image();
  SelectedIconImage.onload = function(){
      canvas.requestRenderAll();
  }

选中此demo