Le clip rectangle n'est pas mis à l'échelle avec la toile lors du zoom

Question

Here is how I created a Rectangular clip pour déposer des images dans une partie spécifique et maintenant l'étendre un peu. Ajout de la fonctionnalité de zoom.

Voici comment j'ai créé un 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(); 
} 

Cependant, ce clip n'est pas agrandi avec Canvas. C'est comme ça après l'avoir zoomé.

code complet et démo est ici: https://jsfiddle.net/yxuoav39/2/

Il devrait ressembler à ceci même après le zoom. Ajout d'un small video clip pour illustrer le problème.

autour scaleX et Joués scaleY et ne réussirez pas. Tous les pointeurs seraient très appréciés pour tracer le bug.

Answer 1

Le clip est défini sur la transformation en cours lorsque vous créez le chemin du clip. Tout changement après la création du clip n'affecte pas le chemin et donc le clip.

Par exemple,

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