javascript - 缩放时矩形剪辑不随 Canvas 缩放

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