在拉斐爾JS的紙上繪製邊框

Question

好的...對拉斐爾來說非常新穎。

無論如何，我如何繪製我的繪圖邊框，以便看到我的畫布大小？

<script type="text/javascript"> 
    $(document).ready(function() { 

      var paper = Raphael('drawing', 100, 100); 
      var circle = paper.circle(50, 40, 30); 
      var rectangle = paper.rect(60, 60, 100, 20, 5); 
      var filler = { fill: 'red', cursor: 'pointer' }; 

      circle.attr(filler); 
      circle.node.id = 'myCircle'; 

      rectangle.attr(filler); 
    }); 
</script> 

<div id="drawing" class="canvass"> 
</div> 

Answer 1

不要忘記，默認情況下，您的div將填充任何可用寬度，因此它不一定與畫布具有相同的尺寸。

我不認爲拉斐爾允許你直接去做，但這裏是使用jQuery的方式，你可以做到這一點：

$('div#drawing').find('> svg,div').css({'border': '1px solid #f00'}); 

或者你也可以使用CSS以類似的方式：

div#drawing svg, div#drawing div { 
    border: 1px solid #f00; 
} 

Answer 2

您在此處指定了畫布的大小：Raphael（'drawing'，100，100）;

該行意味着：在繪圖元素內添加一個100x100的畫布。

如果你想添加一個邊框，最簡單也是最正確的方法就是邊框div。

<div id="drawing" style="border 2px solid #f00;" class="canvass"></div> 

這應該這樣做。