缩放时，矩形剪辑不会使用画布缩放

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