ラファエルの紙の周りに境界線を描く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

ここでキャンバスのサイズを指定しました：ラファエロ（ 'drawing'、100,100）;

この行は、描画要素内に100x100のキャンバスを追加することを意味します。

ボーダーを追加する場合は、最も簡単で最も正しい方法は、divの境界線を作ることです。

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

これでいいはずです。