Disegna il bordo intorno al tuo foglio in Raphael JS

Question

Ok ... estremamente nuovo per Raffaello.

In ogni caso, come faccio a disegnare un bordo attorno al mio disegno in modo da poter vedere le dimensioni della mia tela?

<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

Non dimenticare che, per impostazione predefinita, il tuo div sta per riempire qualsiasi larghezza disponibile, quindi non avrà necessariamente le stesse dimensioni del quadro.

Non credo Raphael vi permette di farlo direttamente, ma qui è un modo è possibile farlo utilizzando jQuery:

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

Oppure si può semplicemente utilizzare i CSS in modo simile:

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

Answer 2

Hai specificato la dimensione della tela qui: Raphael ('disegno', 100, 100);

Quella linea significa: all'interno dell'elemento di disegno aggiungi una tela 100x100.

Se si desidera aggiungere un bordo, il modo più semplice e corretto per farlo è quello di limitare il div.

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

Che dovrebbe farlo.