Dibuja el borde alrededor de tu papel en Raphael JS

Question

Bien ... extremadamente nuevo para Raphael.

De todos modos, ¿cómo dibujo un borde alrededor de mi dibujo para que pueda ver el tamaño de mi lienzo?

<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

No olvide que, de forma predeterminada, su div va a llenar cualquier ancho disponible, por lo que no tendrá necesariamente las mismas dimensiones que el lienzo.

No creo que Rafael le permite hacerlo directamente, pero aquí es una forma que puede hacerlo usando jQuery:

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

O simplemente puede usar CSS de una manera similar:

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

Answer 2

ha especificado el tamaño del lienzo aquí: Raphael ('dibujo', 100, 100);

Esa línea significa: dentro del elemento de dibujo agregar un lienzo de 100x100.

Si desea agregar un borde, la forma más sencilla y correcta de hacerlo es simplemente bordear el div.

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

Eso debería hacerlo.