javascript - 一种使用相同代码将 SVG 或光栅图形居中的方法？

<分区>

无论出于何种原因，我似乎无法让 Firefox 通过 CreateJS 呈现 SVG。可能是一个错误，但我愿意回退到光栅图形。问题是我无法使用相同的代码以相同的方式定位光栅图形与 SVG。我的意思是，在我的 Canvas 中将 SVG 居中的代码与将光栅图形居中的代码不同。我不确定这是不是故意的。

对于以下代码片段，width 和height 是 Canvas 元素的宽度和高度。

这适用于光栅图形，但不适用于 SVG:

  let bounds = bitmap.getBounds();
  bitmap.regX = bounds.width / 2;
  bitmap.regY = bounds.height / 2;
  bitmap.x = width / 2;
  bitmap.y = height / 2;
  stage.update();

这适用于 SVG，但不适用于光栅图形(如果 SVG 不是正方形则需要修改):

  bitmap.regX = Math.min(width,height) / 2;
  bitmap.regY = Math.min(width,height) / 2;
  bitmap.x = width / 2;
  bitmap.y = height / 2;
  stage.update();

这是 CodePen 上的一个例子:https://codepen.io/CorySanin/pen/joOxMZ

有没有更简单的方法让这些元素居中？

最佳答案

这里的问题不是 CreateJS，而是 Firefox 中的 SVG 图像。

如果您断点第一个缩放函数 method1 并检查加载的图像，它没有宽度或高度(它们为 0)。

这是显示图像宽度(和自然宽度)的修改后的代码笔:https://codepen.io/lannymcnie/pen/GagpgP?editors=0010

EaselJS 依赖于图像边界来确定其自身的大小，而且 Firefox 似乎在处理一些 SVG 图像时遇到了问题。 ensuring the viewbox has sizes specified可能有办法解决在根元素上，但我没有深入研究它。

因为 bounds 为 null，所以在您的代码中抛出错误，并退出居中函数。

关于javascript - 一种使用相同代码将 SVG 或光栅图形居中的方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55997416/