FabricJS中的缩放/缩放画布？

Question

我是FabricJS的新手，我遇到了一些我不太确定如何修复的东西。我一直在努力工作几个小时，所以希望一双新鲜的眼睛可以很快发现问题。

我正在尝试缩放画布元素（在加载图像后 - 让我们说1920x1080）并且我可以使用滑块缩放它。

以下是我对此方法的实现：

function zoomCanvas(scale) {
    canvas.setZoom(scale);
    canvas.setWidth(editor.backgroundImage.getWidth() * canvas.getZoom());
    canvas.setHeight(editor.backgroundImage.getHeight() * canvas.getZoom());
}

我在我的canvas.setBackgroundImage函数中调用它，如下所示：

var canvasParent = canvas.getElement().parentElement.parentElement;
zoomCanvas((canvasParent.offsetWidth / canvas.backgroundImage.getWidth()) - 0.05);

这实际上正是我想要的。它会将较大的图像缩放到父级的宽度（对于填充也需要额外的一点 - 不确定这是否是一种好方法）;但是，我的画布/图像的底部 - 有时是右侧 - 出现了轻微的问题。显然他们没有完全相互缩放，我得到这样的东西：

我已经尝试过四舍五入的位置，但这没用，我不知道该怎么办。

更新：以下是此问题的JSFIDDLE。向上和向侧面缩放窗口，直到你看到底部出现一条红线（在我看来它会出现在右边或底部）。

更新2：我想我已经找到了问题。我被放大到我的浏览器110％，Chrome使用由Fabric生成的Canvas元素有一些奇怪的渲染效果。但是，我不希望在浏览器缩放时发生这种情况。这是我的CSS中的错误还是Chrome中的错误？我仍然遇到问题，但不太常见。在某些情况下，有时较低的画布比较高画布高。

Answer 1

在重新审视了我的所有代码并进行了大量测试之后，我发现这对FlexBox和 NOT fabricjs来说尤其严重。

在我的代码中，我试图将Canvas垂直居中于div和flexbox导致这些奇怪的问题。有关更多信息，请查看JSFIDDLE并从CSS中删除flexbox。