【问题标题】:How to center FabricJS canvas background image?如何使 FabricJS 画布背景图像居中?
【发布时间】:2014-06-20 08:34:53
【问题描述】:

使用 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'
    });

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

更新:是否有一种方法可以在调整画布大小时动态更新?希望对顶部和左侧使用百分比值,但这似乎不起作用。

谢谢!

【问题讨论】:

    标签: javascript canvas fabricjs


    【解决方案1】:

    我找到了一个可行的解决方案,但如果调整画布大小,它不会自动更新:

    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'
    });
    

    【讨论】:

    • 对于何时调整画布大小有什么建议吗?
    猜你喜欢
    • 1970-01-01
    • 2015-09-23
    • 2016-08-25
    • 2016-06-18
    • 2016-05-30
    • 1970-01-01
    • 1970-01-01
    • 2018-03-30
    • 1970-01-01
    相关资源
    最近更新 更多