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 回答