如何将旋转图标移动到左角 - FabricJS答案

【问题标题】：How to move rotation icon to left corner - FabricJS如何将旋转图标移动到左角 - FabricJS
【发布时间】：2015-10-28 15:16:41
【问题描述】：

当一个对象（在画布中）被选中时，旋转图标显示在对象的顶部。有没有办法将该图标移动到对象的左（或右）角？

目前我正在使用this method替换FabricJS的默认旋转图标图像，但没有找到任何移动操作图标位置的东西。

任何帮助将不胜感激。

【问题讨论】：

你会在 jsFiddle 中分享你当前的代码吗？

标签： javascript jquery canvas prototype fabricjs

【解决方案1】：

您可以通过覆盖默认的_drawControl()方法来实现。您当前关注的method 正在编写冗余代码。

isVML = function() { return typeof G_vmlCanvasManager !== 'undefined'; };
// overriding _drawControl method
fabric.util.object.extend(fabric.Object.prototype, {   
hasRotatingPoint: true,   
cornerSize: 10,
_drawControl: function(control, ctx, methodName, left, top) {
    if (!this.isControlVisible(control)) {
        return;
    }
    var size = this.cornerSize;
    isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);

    if(control !== 'tl')
        ctx['fillRect'](left, top, size, size);

    var SelectedIconImage = new Image();
    if(control === 'tl') {
        SelectedIconImage.src = 'http://www.navifun.net/files/pins/tiny/Arrow-Rotate-Clockwise.png';
        ctx.drawImage(SelectedIconImage, left, top, size, size);
    }
  }
});

现在，为了向图标添加旋转功能，覆盖以下画布方法：

var cursorOffset = {
mt: 0, // n
tr: 1, // ne
mr: 2, // e
br: 3, // se
mb: 4, // s
bl: 5, // sw
ml: 6 // w    
}

fabric.util.object.extend(fabric.Canvas.prototype, {  
setCursor: function (value) {
  this.upperCanvasEl.style.cursor = value;
},
_getActionFromCorner: function(target, corner) {
   var action = 'drag';
  if (corner) {
    action = (corner === 'ml' || corner === 'mr')
      ? 'scaleX'
      : (corner === 'mt' || corner === 'mb')
        ? 'scaleY'
        : (corner === 'mtr' || corner === 'tl' )
          ? 'rotate'
          : 'scale';
  }
  return action;
},    
 _setCornerCursor: function(corner, target) {      
 if ((corner === 'mtr' || corner === 'tl') && target.hasRotatingPoint) {
    this.setCursor(this.rotationCursor);
  }
   else if (corner in cursorOffset) {
    this.setCursor(this._getRotatedCornerCursor(corner, target));
  }
  else {
    this.setCursor(this.defaultCursor);
    return false;
  }
 }
});

See the Fiddle

【讨论】：