Rectangle clip nicht mit Leinwand skalieren, wenn Zoom

Question

Here is how I created a Rectangular clip Bilder in bestimmten Teil fallen lassen und jetzt ein wenig erweitern. Zoom-Funktionalität hinzugefügt.

Unten ist, wie ich einen Clip erstellt habe.

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(); 
} 

Allerdings wird dieser Clip nicht mit Canvas gezoomt. So sieht es nach dem Zoomen aus.

Voll Code und Demo hier: https://jsfiddle.net/yxuoav39/2/

Es ist wie unten auch nach Zoom aussehen sollte. Hinzufügen eines small video clip, um das Problem zu demonstrieren.

um scaleX und scaleY gespielt und nicht gelingen. Alle Zeiger würden sehr geschätzt werden, um den Fehler zu verfolgen.

Answer 1

Der Clip wird auf die Transformation festgelegt, die aktuell ist, wenn Sie den Pfad für den Clip erstellen. Änderungen nach dem Erstellen des Clip-Pfads wirken sich nicht auf den Pfad und somit auf den Clip aus.

Eg

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