2

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

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

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

我没有使用 jQuery。

更新：潜在的解决方法

通过使 cavas 按比例缩放，使像素宽度变得不必要的解决方案将获得奖励积分。我相当确定这是可能的，canvas所以假设 Raphael 可以，所以如果我将所有元素创建为设定的宽度（比如 100 像素宽的画布），那么我应该能够将画布缩放到100%屏幕上，并且画布应该填满屏幕，所有元素都被适当地拉伸，并保持它们的比例。

4

1 回答 1

3

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

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

您定义一个包含您的 svg 数据的物理区域（x、y、宽度、高度），所有内容都将按比例放大，同时保持比例。视图框区域按比例放大（当您为 fit 指定 false 时）到它可以在容器内的最大大小。

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

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

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

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

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

于 2012-12-07T11:37:15.913 回答