替換fabric.js調整大小並使用自定義圖像旋轉控件？

Question

我正在尋找關於如何替換fabric.js調整大小和旋轉矩形與自定義圖像的例子....有任何人這樣做？

謝謝。

Answer 1

您可以通過重寫原型是這樣做的：

var topLeftImage = new Image(); 
topLeftImage.src = 'images/tl.png'; 

var topRightImage = new Image(); 
topRightImage.src = 'images/tr.png'; 

var bottomRightImage = new Image(); 
bottomRightImage.src = 'images/br.png'; 

//Warning I modified some other things here as well, please copy this from the sources and modify it then 
fabric.Object.prototype.drawCorners = function(ctx) { 
    if (!this.hasControls) return; 

    var size = this.cornersize, 
     size2 = size/2, 
     strokeWidth2 = this.strokeWidth/2, 
     left = -(this.width/2), 
     top = -(this.height/2), 
     _left, 
     _top, 
     sizeX = size/this.scaleX, 
     sizeY = size/this.scaleY, 
     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; 

    ctx.save(); 

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

    ctx.globalAlpha = 1; //this.isMoving ? this.borderOpacityWhenMoving : 1; 
    ctx.strokeStyle = ctx.fillStyle = '#333333'; 

    // top-left 
    _left = left - scaleOffsetX - strokeWidth2 - paddingX; 
    _top = top - scaleOffsetY - strokeWidth2 - paddingY; 

    ctx.clearRect(_left, _top, sizeX, sizeY); 
    ctx.drawImage(topLeftImage, _left, _top, sizeX, sizeY); 

    // top-right 
    _left = left + width - scaleOffsetX + strokeWidth2 + paddingX; 
    _top = top - scaleOffsetY - strokeWidth2 - paddingY; 

    ctx.clearRect(_left, _top, sizeX, sizeY); 
    ctx.drawImage(topRightImage, _left, _top, sizeX, sizeY); 

    // bottom-left 
    _left = left - scaleOffsetX - strokeWidth2 - paddingX; 
    _top = top + height + scaleOffsetSizeY + strokeWidth2 + paddingY; 

    ctx.clearRect(_left, _top, sizeX, sizeY); 
    ctx.strokeRect(_left, _top, sizeX, sizeY); 

    // bottom-right 
    _left = left + width + scaleOffsetSizeX + strokeWidth2 + paddingX; 
    _top = top + height + scaleOffsetSizeY + strokeWidth2 + paddingY; 

    ctx.clearRect(_left, _top, sizeX, sizeY); 
    ctx.drawImage(bottomRightImage, _left, _top, sizeX, sizeY); 

    ctx.restore(); 

    return this; 
};