Нарисуйте границы вокруг вашей бумаги в Рафаэле JS - PullRequest
5 голосов
/ 16 декабря 2011

Ладно ... чрезвычайно новый для Рафаэля.

В любом случае, как мне нарисовать границу вокруг моего рисунка, чтобы я мог видеть размер моего холста?

<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>

Ответы [ 2 ]

1 голос
/ 16 декабря 2011

Не забывайте, что по умолчанию ваш div будет заполнять любую доступную ширину, поэтому он не обязательно будет иметь те же размеры, что и холст.

Я не думаю, что Рафаэль позволяет вам делать это напрямую, но вот способ, которым вы можете сделать это, используя jQuery:

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

Или вы можете просто использовать CSS аналогичным образом:

div#drawing svg, div#drawing div {
    border: 1px solid #f00;
}
0 голосов
/ 16 декабря 2011

Вы указали размер холста здесь: Рафаэль ('рисунок', 100, 100);

Эта строка означает: внутри элемента рисунка добавьте холст 100x100.

Если вы хотите добавить границу, самый простой и правильный способ сделать это - просто ограничить div.

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

Это должно сделать это.

...