当缩放时，使用画布缩放的矩形剪辑

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