當縮放時，使用畫布縮放的矩形剪輯

Question

Here is how I created a Rectangular clip將圖像拖放到特定部分，現在將其擴展一點。增加了縮放功能。

下面是我如何創建一個剪輯。

function clipByName(ctx) { 
    this.setCoords(); 
    var clipRect = findByClipName(this.clipName); 
    var scaleXTo1 = (canvasScale/ this.scaleX); 
    var scaleYTo1 = (canvasScale/this.scaleY); 
    ctx.save(); 

    var ctxLeft = -(this.width/2) + clipRect.strokeWidth; 
    var ctxTop = -(this.height/2) + clipRect.strokeWidth; 
    var ctxWidth = clipRect.width - clipRect.strokeWidth; 
    var ctxHeight = clipRect.height - clipRect.strokeWidth; 

    ctx.translate(ctxLeft, ctxTop); 
    ctx.scale(scaleXTo1, scaleYTo1); 
    ctx.rotate(degToRad(this.angle * -1)); 

    ctx.beginPath(); 
    ctx.rect(
     clipRect.left - this.oCoords.tl.x, 
     clipRect.top - this.oCoords.tl.y, 
     clipRect.width, 
     clipRect.height 
    ); 
    ctx.closePath(); 
    ctx.restore(); 
} 

但是這個剪輯沒有被Canvas放大。這是放大後的樣子。

全部代碼和演示是在這裏：https://jsfiddle.net/yxuoav39/2/

應該即使放大後看起來像下面。添加small video clip來演示該問題。

玩過周圍的scaleX和scaleY並沒有成功。任何指針將非常感謝追蹤錯誤。

Answer 1

將剪輯設置爲創建剪輯路徑時的當前變換。剪輯路徑創建後的任何更改都不會影響路徑，從而影響剪輯。

如

ctx.save() 
ctx.scale(2,2); 
ctx.beginPath(); 
ctx.rect(10,10,20,20); // scale makes the clip 20,20,40,40 
// no transforms from here on will change the above rect 
ctx.scale(0.5,0.5); // << this does not change the above rect 
ctx.clip(); //<< clip is at the scale of when rect was called