如何在默认情况下显示自定义控件图标，即使未在 fabricjs 中选择图像

Question

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

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

请参考此代码笔

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

查看此演示