拉斐爾JS檢測畫布大小，當設置爲％

我使用拉斐爾JS，並創建一個寬度設定在像這樣的容器100%畫布...拉斐爾JS檢測畫布大小，當設置爲％

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

現在我想知道有多大的畫布是。我怎樣才能可靠地找出所有平臺上的畫布大小？

我沒有使用jQuery。

更新：潛在解決方法

獎勵積分將被授予，使得得到的像素寬度不必要的溶液，通過使卡瓦酒縮放比例。我相當肯定這可能與canvas，所以假設它可能與拉斐爾，所以，如果我創建所有元素設置寬度（比如說100像素寬帆布），那麼我應該能夠將畫布縮放到屏幕100%，畫布應填滿整個屏幕，所有元素都適當地伸展，並保持其比例。

2012-12-05 Billy Moon

您可以使用視框來縮放以適應全屏模式。

你定義一個包含您的SVG數據的物理區域（X，Y，寬，高），一切都會被放大，同時保持比例。視圖框區域按比例放大（當您爲適合指定false時）將其放大到容器內的最大大小。

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

不幸的是，Raphael似乎沒有給你指定如何處理溢出的選項。例如，您可能希望將視圖框居中，以便均勻分佈任何多餘部分。如果您有一個100 x 200的容器，並且您有一個100 x 100的視框，那麼當您想要視口的像素高於50像素且低於50像素時，您在高度視圖下方的高度爲100像素。

在SVG中，這些選項是在SVG容器的preserveAspectRatio屬性中定義的。如果你不支持VML（lte ie8）選項，那麼你可以改變這個屬性來影響對齊。

至於在一般檢測的寬度和高度，你最好使用檢測和element.clientWidth的element.clientHeight父節點的寬度或高度。我傾向於避免使用body作爲父節點並添加我自己的內部容器來檢測大小。你的畫布是一些容器的寬度/高度的100％，所以我會去找那個容器來找出它的大小。

2012-12-07 11:37:15

回答