[英]How to center FabricJS canvas background image?
When adding a backgroundImage to a canvas using setBackgroundImage(), I haven't been able to find a way to center the background image. 使用setBackgroundImage()将backgroundImage添加到画布时,我无法找到将背景图像居中的方法。 I need to center it to line it up with the centered paths in the canvas.
我需要将它居中,使其与画布中的中心路径对齐。
The docs http://fabricjs.com/docs/fabric.StaticCanvas.html#setBackgroundImage show various information, but don't seem to specify positioning of the background image in relation to the canvas. 文档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'
});
This will center the image to the top left corner of the canvas. 这会将图像居中放在画布的左上角。 How do I now specify that the origination point on the canvas should be center/center instead of top/left?
我现在如何指定画布上的原点应该是中心/中心而不是上/下?
Update: is there a method that will update dynamically if the canvas is resized? 更新:是否有一个方法,如果调整画布大小,将动态更新? Was hoping to use percentage values for top and left, but that doesn't seem to work.
希望使用顶部和左侧的百分比值,但这似乎不起作用。
Thanks! 谢谢!
I was able to find a solution that works, but will not update automatically if the canvas is resized: 我能够找到一个有效的解决方案,但如果调整画布大小,它将不会自动更新:
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'
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.