Question

我对fabricjs1.5有这个问题我已经更改了默认控制角以显示自定义角图标，但在1.4中它工作正常但是当我缩放对象时角度也是1.5？

我也可以将比例绑定到旋转手柄角落吗？

请看看小提琴，看看我的意思。

isVML = function() {
  return typeof G_vmlCanvasManager !== 'undefined';
};

fabric.util.object.extend(fabric.Object.prototype, {
  hasRotatingPoint: true,
  cornerSize: 40,
  _drawControl: function(control, ctx, methodName, left, top) {
    if (!this.isControlVisible(control)) {
      return;
    }
    var size = this.cornerSize,
      size2 = size / 2,
      scaleOffsetY = size2 / this.scaleY,
      scaleOffsetX = size2 / this.scaleX,
      height = this.height,
      width = this.width
      //	left = (this.width / 2),
      //		top = (this.height / 2)

    isVML() || this.transparentCorners || ctx.clearRect(left, top, size / this.scaleX, size / this.scaleY);

    if (control !== 'br')
      ctx['fillRect'](left, top, size / this.scaleX, size / this.scaleY);

    var SelectedIconImage = new Image();
    if (control === 'br') {
      SelectedIconImage.src = 'http://cdn.flaticon.com/svg/56/56433.svg';

      ctx.drawImage(SelectedIconImage, left, top, size / this.scaleX, size / this.scaleY);

      this.setControlsVisibility({
        bl: false,
        br: true,
        tl: true,
        tr: false,
        mt: false,
        mb: false,
        ml: false,
        mr: false,
        mtr: false,
      });

    }

 
  }
 

});

degreesToRadians = fabric.util.degreesToRadians;
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 === 'br') ? 'rotate' : 'scale';
    }
    return action;
  },
  _setCornerCursor: function(corner, target) {
    if ((corner === 'mtr' || corner === 'br') && target.hasRotatingPoint) {
      this.setCursor(this.rotationCursor);
    } else if (corner in cursorOffset) {
      this.setCursor(this._getRotatedCornerCursor(corner, target));
    } else {
      this.setCursor(this.defaultCursor);
      return false;
    }
  }

});

var canvas = new fabric.Canvas("canvas");
canvas.add(new fabric.Rect({
  width: 100,
  height: 100,
  left: 50,
  top: 50,
  fill: 'rgb(255,0,0)'
}));
canvas.renderAll();

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>
<canvas id="canvas" width="300px" height="300px" style="border:1px solid gray"></canvas>

感谢。

http://jsfiddle.net/ibrahimjan/2XZHp/113/

Answer 1

请检查这个答案： Fabric js custom rotate icon is not visible in only iphone's google chrome browser

这是相反的，1.4.0是缩放控件，1.5.0不是。库中存在一些内部差异，您可以找到1.5.0的正确值（以适应您的需求）。检查每帧绘制时是否正在重新加载图像。在那个答案中，我们也在讨论这个问题。

解决问题：

ctx.drawImage(SelectedIconImage, left, top, size / this.scaleX, size / this.scaleY);

从此处删除比例因子

ctx.drawImage(SelectedIconImage, left, top, size, size);

Answer 2

好的，所以我把它修复为AndreaBogazzi，看看更新的小提琴 http://jsfiddle.net/ibrahimjan/2XZHp/125/

但是我仍在努力使用绑定比例和旋转在我原来的帖子中所说的同一个角落？

    _getActionFromCorner: function(target, corner) {

   if (corner && corner === 'br') {
        var action_rotate = (target) ? 'rotate' : 'rotate'
        var action_scale = (target) ? 'scale' : 'scale'
        return action_rotate;
    }

}

我希望action_rotate和action_scale在同一个角落一起工作？任何想法

fabricjs修复旋转角图标

2 个答案: