如何居中FabricJS画布背景图像

How to center FabricJS canvas background image?

本文关键字：背景 图像 布背景 何居中 FabricJS      更新时间：2023-09-26

使用setBackgroundImage()将backgroundImage添加到画布时，我无法找到将背景图像居中的方法。我需要将其居中，使其与画布中的居中路径对齐。

文档http://fabricjs.com/docs/fabric.StaticCanvas.html#setBackgroundImage显示了各种信息，但似乎没有指定背景图像相对于画布的位置。

    canvas.setOverlayImage('http://fabricjs.com/assets/honey_im_subtle.png',
        canvas.renderAll.bind(canvas), {
            scaleX:1,
            scaleY:1,
            top: 0,
            left: 0,
            originX: 'center',
            originY: 'center'
    });

这将使图像居中到画布的左上角。我现在如何指定画布上的起始点应该是中心/中心而不是上/左?

Update:是否有一个方法，将动态更新，如果画布是调整大小?我希望使用百分比值的顶部和左侧，但这似乎不工作。

谢谢!

我能够找到一个解决方案，工作，但不会自动更新，如果画布是调整大小:

var center = deviceCanvas.getCenter();
canvas.setOverlayImage('http://fabricjs.com/assets/honey_im_subtle.png',
    canvas.renderAll.bind(canvas), {
        scaleX:1,
        scaleY:1,
        top: center.top,
        left: center.left,
        originX: 'center',
        originY: 'center'
});
相关文章：