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

Question

出于某种原因，我似乎无法让 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

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

Answer 1

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

如果你断点第一个缩放函数 method1 并检查加载的图像，它没有宽度或高度（它们是 0）。

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

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

因为 bounds 是空的，你的代码会抛出一个错误，它会退出居中函数。

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

A way to center an SVG or raster graphic with the same code?

javascript

createjs

easeljs