Fabric js如何设置百分比对象的位置答案

【问题标题】：Fabric js How to set percentage object's positionFabric js如何设置百分比对象的位置
【发布时间】：2017-08-05 00:38:06
【问题描述】：

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

就像在 css 中一样：

顶部：32% 剩余：10%

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

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案1】：

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

initialCanvasWidth 和 finalCanvasWidth。

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

          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()
    }

希望对您有所帮助。

这是一个 real world working example 的响应式 canvas/fabric.js 用法

【讨论】：

所以......最初，我想到了这个想法......使用了我自己的代码......元素位置有问题，但调整大小不够奇怪......来到SO并找到了这个。 ..对照我的检查...仍然有问题...最终解决方案：绘制一个与画布一样大的矩形并将其居中...选择所有内容...调整画布大小...缩放矩形（自然内容将被缩放到大小）...使矩形居中（自然而然，内容将被放置在适当的位置）...删除矩形...全部渲染。