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但没有成功。任何能够追踪该错误的指针将不胜感激。
最佳答案
剪辑设置为创建剪辑路径时当前的变换。创建剪辑路径后的任何更改都不会影响路径,从而影响剪辑。
例如
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
关于javascript - 缩放时矩形剪辑不随 Canvas 缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45199059/