Geek Answers Handbook

Draw a border around your paper in Raphael JS

Okay ... very new to Raphael.

Anyway, how to draw a frame around my drawing so that I can see the size of my canvas?

<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>
+5
source share
2 answers

Remember that by default your div will fill in any available width, so it will not necessarily be the same size as the canvas.

I don't think Raphael allows you to do this directly, but here you can do it with jQuery:

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

Or you can just use CSS in the same way:

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

You have indicated the canvas size here: Raphael ('drawing', 100, 100);

: 100x100.

, - div.

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

.

0

More articles:


All Articles