gpt4 book ai didi

javascript - Fabric js 如何设置百分比对象的位置

转载 作者:行者123 更新时间:2023-12-03 04:33:01 25 4
gpt4 key购买 nike

我正在使用 Fabric.js 并且动态更改 Canvas 大小,因此我需要使用适当的对象缩进(取决于 Canvas 大小的百分比)顶部和左侧缩放所有 Canvas 对象。我如何以百分比设置顶部和左侧对象位置?

就像CSS中的那样:

顶部:32%剩余:10%

// set canvas size dynamically by resize event
this.canvas.setWidth(size.width);
this.canvas.setHeight(size.height);

最佳答案

在我看来,您应该有两个值来计算调整大小比率。

initialCanvasWidth 和 FinalCanvasWidth。

假设您在页面加载中有initialCanvasWidth 值。您可以通过如下函数计算每次调整大小的调整比率:

          window.onresize = utility.debounce(() => {
const finalCanvasWidth = canvasWrapper.clientWidth
const resizeRatio = (finalCanvasWidth / initialCanvasWidth).toFixed(3)

setCanvasSizeAndPosition()
scaleObjectsOnCanvas(resizeRatio)
}, 250)

通过用 div 包裹 Canvas 并在调整大小后使用其新宽度,您可以设置新 Canvas 的宽度和高度(在 setCanvasSizeAndPosition 函数中)

    this.canvas.setWidth(newWidth).setHeight(newHeight)

我认为您还需要在开始时存储 Canvas 的纵横比,以便计算 newHeight 值

设置新的 Canvas 尺寸后,您可以继续在 Canvas 上缩放和定位对象(scaleObjectsOnCanvas 函数)

    scaleObjectsOnCanvas(resizeRatio) {
const objects = canvas.getObjects()
for (let i = 0; i < objects.length; i++) {
objects[i].left = objects[i].left * resizeRatio
objects[i].top = objects[i].top * resizeRatio
objects[i].scaleX = objects[i].scaleX * resizeRatio
objects[i].scaleY = objects[i].scaleY * resizeRatio
}
this.canvas.renderAll()
}

希望有帮助。

这是一个real world working example响应式 canvas/fabric.js 使用情况

关于javascript - Fabric js 如何设置百分比对象的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43410981/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com