Question

无论出于什么原因，我似乎都无法让Firefox通过CreateJS渲染SVG。可能是一个错误，但我愿意回退到光栅图形。问题是我无法使用相同的代码以相同的方式放置栅格图形与SVG。我的意思是，使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在处理 some SVG图像时遇到了麻烦。也许可以通过ensuring the viewbox has sizes specified来解决根元素，但是我并没有对此进行深入研究。

由于边界为空，因此代码中将引发错误，并且退出居中功能。

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

1 个答案: