將一個滾動條添加到raphael畫布

Question

我能夠生成拉斐爾圖，但超過了Raphael畫布的指定寬度和高度。

如何添加滾動條到拉斐爾畫布以容納拉斐爾畫布給定寬度和高度內的整個圖表？

是否有任何其他方式或解決方法來處理上述情況？

請幫忙。提前致謝。

Answer 1

我遇到了類似的情況，我發現了一種可行的方法，雖然它有點不方便。我的第一次嘗試是在容器div上設置高度和overflow:auto，並將Raphael紙張高度設置爲100％。但是，這不起作用;看起來如果將紙張設置爲100％，它會抓取div的高度，因爲它是，因此插入圖表前，所以這沒有用。

但是，一個解決方法是執行以下操作，假定容器div具有「holder」的id，我需要可滾動區域爲100px高，並且Raphael紙張對象應該是800px寬：

var paper = Raphael('holder', 800, '100%'); 
// add your graphics to the paper object here 

var height = $(paper.canvas).outerHeight(); 
paper.setSize(800, height); 
$(paper.canvas).parent().height("100px"); 

我用jQuery來獲取和設置高度，但是你可以做到這一點，但是你希望。重要的一點是，在創建完所有Raphael對象之後，不要對高度設置任何限制，然後將紙張對象和包含div的高度設置爲任何所需的高度。

請注意，如果您只是想要顯示所有內容，並且不需要使用滾動條將圖形放入特定高度，則可以將100％作爲高度傳遞給紙張構造函數，上面的示例的第一行。