Scaling/Zooming Canvas 在 FabricJS 中？

Question

我对 FabricJS 非常陌生，我运行遇到了一些我不太确定如何修复的问题。我已经为此工作了几个小时，所以希望新的眼睛可以快速发现问题。

我正在尝试缩放 canvas 元素（加载图像后 - 比方说 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);

这实际上完全符合我的要求。它将更大的图像缩小到父级的宽度（还有一些额外的填充 - 不确定这是否是一个好方法）；但是，我的 canvas/image 的底部 - 有时是右侧 - 出现了一个小问题。显然，它们之间的缩放比例并不完美，我得到这样的结果：

我试过四舍五入小数位，但没有用，我不知道该怎么办。

更新： 这是一个 JSFIDDLE 的问题。向上和向侧面缩放 window，直到您看到底部出现一条红线（在我的身上，它会出现在右侧或底部）。

更新 2： 我想我已经解决了这个问题。我将浏览器放大了 110%，Chrome 对 fabric 生成的 Canvas 元素产生了一些奇怪的渲染效果。但是，我不希望在浏览器缩放时发生这种情况。这是我的 CSS 中的错误还是 Chrome 中的错误？我仍然遇到这个问题，但它不那么频繁了。有时候下面的-canvas在某些情况下比上面的要高。

Answer 1

重新审视我的所有代码并进行一些广泛的测试后，我发现这尤其是 FlexBox 和 NOT fabricjs 的问题。

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

Scaling/Zooming Canvas 在 FabricJS 中？

Scaling/Zooming Canvas in FabricJS?

javascript

canvas

fabricjs