Question

我正在使用Raphael JS，并创建一个宽度设置为容器100%的画布，如此......

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

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

我没有使用jQuery。

更新：潜在的解决方法

奖励积分将通过使卡瓦斯按比例缩放来获得无需像素宽度的解决方案。我很确定canvas这是可能的，所以假设Raphael是可能的，所以如果我创建所有元素到一个设定的宽度（比如100像素宽的画布），那么我应该能够将画布缩放到{屏幕的{1}}，画布应填满屏幕，所有元素都要适当拉伸，并保持比例。

Answer 1

您可以使用视图以缩放以适应全屏模式。

您定义包含svg数据的物理区域（x，y，宽度，高度），并且在保持比例的同时放大所有内容。视窗框区域按比例放大（当您为拟合指定false时）到容器内的最大大小。

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

不幸的是，Raphael似乎没有给你指定如何处理溢出的选项。例如，您可能希望将视图框居中，以便均匀分布任何多余的视图。如果你有一个100 x 200的容器并且你有一个100 x 100的视图，那么你在放大的视口下面有100个像素的高度，当你希望视口有50个像素以上和50个像素时。

在SVG中，这些选项在SVG容器的preserveAspectRatio属性上定义。如果您不支持VML（lte ie8）选项，则可以更改此属性以影响对齐。

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