结构 js 如何设置百分比对象的位置

Question

我正在使用 Fabric.js并且我动态更改画布大小，所以我需要使用适当的对象缩进(百分比取决于画布大小(上下缩放所有画布对象。如何以百分比设置顶部和左侧对象位置？

就像在 CSS 中一样：

顶部：32%左： 10%

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

Answer 1

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

initialCanvasWidth 和 finalCanvasWidth。

假设您在页面加载中具有初始画布宽度值。您可以通过如下函数计算每次调整大小的大小比率：

          window.onresize = utility.debounce(() => {
            const finalCanvasWidth = canvasWrapper.clientWidth
            const resizeRatio = (finalCanvasWidth / initialCanvasWidth).toFixed(3)
            setCanvasSizeAndPosition()
            scaleObjectsOnCanvas(resizeRatio)
        }, 250)

通过使用div包裹画布

并在调整大小后使用其新宽度，您可以设置新的画布宽度和高度(在setCanvasSizeAndPosition函数中(

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

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

设置新的画布大小后，您可以继续在画布上缩放和定位对象(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()
    }

希望有帮助。

这是响应式画布/织物.js用法的真实工作示例