javascript - Raphael JS 在设置为 % 时检测 Canvas 大小

Question

我正在使用 Raphael JS，并创建一个宽度设置为容器的 100% 的 Canvas ，如下所示...

// there is a `div` with id `paper`
paper = Raphael('paper', '100%', '100%')
paper.circle(50, 40, 100)

现在我想知道 Canvas 有多大。如何可靠地找出所有平台上的 Canvas 大小？

我没有使用 jQuery。

---

更新:潜在的解决方法

通过使 cavas 按比例缩放，无需获得像素宽度的解决方案将获得奖励积分。我相当确定这对于 canvas 是可能的，所以假设这对于 Raphael 是可能的，这样如果我将所有元素创建为设定的宽度(比如 100 像素宽的 Canvas )，那么我应该能够缩放canvas 到屏幕的 100%，并且 canvas 应该填满屏幕，所有元素都适当拉伸(stretch)，并保持它们的比例。

Answer 1

您可以使用 View 框来缩放以适应全屏模式。

http://raphaeljs.com/reference.html#Paper.setViewBox

您定义一个包含 svg 数据的物理区域(x、y、宽度、高度)，所有内容都将按比例放大，同时保持比例不变。视框区域按比例放大(当您为适合指定 false 时)到它可以在容器内的最大尺寸。

paper.setViewBox(0, 0, 100, 100, false);​

不幸的是，Raphael 似乎没有提供指定如何处理溢出的选项。例如，您可能希望将 View 框居中，以便均匀分布多余部分。如果您有一个 100 x 200 的容器和一个 100 x 100 的视框，那么放大视口(viewport)下方有 100 像素的高度，而您可能希望视口(viewport)在上方有 50 像素，在下方有 50 像素。

在 SVG 中，这些选项是在 SVG 容器的 preserveAspectRatio 属性中定义的。如果您不支持 VML (lte ie8) 选项，那么您可以更改此属性以影响对齐。

http://premsobel.info/notes/ml/svg/viewports.html

至于一般检测宽度和高度，您最好使用 element.clientWidth 和 element.clientHeight 检测父节点的宽度或高度。我倾向于避免使用 body 作为父节点并添加我自己的内部容器来检测大小。你的 Canvas 是某个容器的 100% 宽度/高度，所以我会去寻找那个容器以找出它的大小。