如何更改fabricjs中的旋转图标

请指导我修改Fabricjs以为Rotation添加自定义图标.

我得到了一些答案,但它没有正常工作.

请让我知道更改特定旋转图标的代码.

像这样改变织物对象原型"drawControls".

这是一个例子和JSFiddle:

fabric.Object.prototype.drawControls = function (ctx) {
    if (!this.hasControls) return this;


    var size = this.cornerSize,
        size2 = size / 2,
        strokeWidth2 = ~~(this.strokeWidth / 2), // half strokeWidth rounded down
        left = -(this.width / 2),
        top = -(this.height / 2),
        paddingX = this.padding / this.scaleX,
        paddingY = this.padding / this.scaleY,
        scaleOffsetY = size2 / this.scaleY,
        scaleOffsetX = size2 / this.scaleX,
        scaleOffsetSizeX = (size2 - size) / this.scaleX,
        scaleOffsetSizeY = (size2 - size) / this.scaleY,
        height = this.height,
        width = this.width,
        methodName = this.transparentCorners ? 'strokeRect' : 'fillRect';

    ctx.save();

    ctx.lineWidth = 1 / Math.max(this.scaleX, this.scaleY);

    ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
    ctx.strokeStyle = ctx.fillStyle = this.cornerColor;

    // top-left
    this._drawControl('tl', ctx, methodName,
        left - scaleOffsetX - strokeWidth2 - paddingX,
        top - scaleOffsetY - strokeWidth2 - paddingY);

    // top-right
    this._drawControl('tr', ctx, methodName,
        left + width - scaleOffsetX + strokeWidth2 + paddingX,
        top - scaleOffsetY - strokeWidth2 - paddingY);

    // bottom-left
    this._drawControl('bl', ctx, methodName,
        left - scaleOffsetX - strokeWidth2 - paddingX,
        top + height + scaleOffsetSizeY + strokeWidth2 + paddingY);

    // bottom-right
    this._drawControl('br', ctx, methodName,
        left + width + scaleOffsetSizeX + strokeWidth2 + paddingX,
        top + height + scaleOffsetSizeY + strokeWidth2 + paddingY);

    if (!this.get('lockUniScaling')) {

        // middle-top
        this._drawControl('mt', ctx, methodName,
            left + width / 2 - scaleOffsetX,
            top - scaleOffsetY - strokeWidth2 - paddingY);

        // middle-bottom
        this._drawControl('mb', ctx, methodName,
            left + width / 2 - scaleOffsetX,
            top + height + scaleOffsetSizeY + strokeWidth2 + paddingY);

        // middle-right
        this._drawControl('mr', ctx, methodName,
            left + width + scaleOffsetSizeX + strokeWidth2 + paddingX,
            top + height / 2 - scaleOffsetY);

        // middle-left
        this._drawControl('ml', ctx, methodName,
            left - scaleOffsetX - strokeWidth2 - paddingX,
            top + height / 2 - scaleOffsetY);
    }

    // middle-top-rotate
    if (this.hasRotatingPoint) {
        /*
         We dont need old corner for rotate :)

         this._drawControl('mtr', ctx, methodName,
         left + width/2 - scaleOffsetX,
         this.flipY
         ? (top + height + (this.rotatingPointOffset / this.scaleY) - this.cornerSize/this.scaleX/2 + strokeWidth2 + paddingY)
         : (top - (this.rotatingPointOffset / this.scaleY) - this.cornerSize/this.scaleY/2 - strokeWidth2 - paddingY));

         Draw rotate custom icon
         */
        var rotate = new Image(), rotateLeft, rotateTop;
        rotate.src = 'http://www.navifun.net/files/pins/tiny/Arrow-Rotate-Clockwise.png';

        rotateLeft = left + width / 2 - scaleOffsetX;
        rotateTop = this.flipY
            ? (top + height + (this.rotatingPointOffset / this.scaleY) - this.cornerSize / this.scaleX / 2 + strokeWidth2 + paddingY)
            : (top - (this.rotatingPointOffset / this.scaleY) - this.cornerSize / this.scaleY / 2 - strokeWidth2 - paddingY);

        ctx.drawImage(rotate, rotateLeft, rotateTop, size / this.scaleX, size / this.scaleY);


    }

    ctx.restore();

    return this;
};

@ hlozancic的答案覆盖了原型的一个重要部分.由社区维护的猴子修补库并不适合我,因为这些方法中的代码可能会发生变化(实际上drawControls自7月2日以来已发生变化),而我并不知情.这是我更喜欢的替代方案:

var _original = fabric.Object.prototype._drawControl;
fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top) {
  var size = this.cornerSize;

  if (this.canvas.hasControlCallback && this.canvas.hasControlCallback[control]) {
    this.canvas.controlCallback[control](ctx, left, top, size);
  } else {
    _original.call(this, control, ctx, methodName, left, top);
  }
};

/* then, when instantiating your fabric canvas  */

var canvas = new fabric.Canvas();

/* callbacks for drawing the controls */
canvas.hasControlCallback = {
    mtr: true
};

canvas.controlCallback = {
    mtr: function mtrControlCallback (ctx, left, top, size) {
        var image = new Image(), x, y;

        image.src = 'http://www.navifun.net/files/pins/tiny/Arrow-Rotate-Clockwise.png';
        x = left - image.width/2 + size/2;
        y = top - image.height/2 + size/2;

        ctx.drawImage(image, x, y);
    }
};

抱歉不提供小提琴,请注意撰写本文的日期.