Question

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

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

任何帮助都将不胜感激。

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

现在，为了添加旋转功能到图标，覆盖，遵循canvas方法：

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

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

1 个答案: