缩放画布与剪辑不起作用

zoom canvas with clipto not working

本文关键字:不起作用 缩放      更新时间:2023-09-26

使用织物.js,当我使用setZoom()时,clipTo()没有响应并保持相同的宽度和高度。代码适用于画布中的对象。我已经使用zoomToPoint进行了测试,但没有解决我的问题。

function zoomIn() {
zoomLevel += .2;
canvas.setZoom(zoomLevel);
canvas.setDimensions({
    width: my_canvas_width * zoomLevel,
    height: my_canvas_height * zoomLevel
});
}

clipTo()我正在使用的代码:

canvas.clipTo = function(ctx) {
 ctx.rect(0,0,300,300);
}

任何想法为什么clipTo没有回应setZoom()?谢谢。

指定使用的是 fabric.js 非常重要。我不确定我是否正确理解了您的问题,clipTo保持不变的原因是因为线条

canvas.setDimensions({
    width: my_canvas_width * zoomLevel,
    height: my_canvas_height * zoomLevel
});

设置图像尺寸几乎是剪切图像,clipTo()设置尺寸后将不起作用。

我认为你不需要这些行,看看这个JSFiddle的例子,那里的500x500图像总是被剪裁为300x300。