Vẽ đường viền quanh giấy của bạn trong Raphael JS

Question

OK ... cực kỳ mới đối với Raphael.

Dù sao, làm cách nào để vẽ một đường viền xung quanh bản vẽ của tôi để tôi có thể thấy kích thước của thùng rác?

<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

Đừng quên rằng theo mặc định, div của bạn sẽ điền vào bất kỳ chiều rộng có sẵn nào, vì vậy nó sẽ không nhất thiết phải có cùng kích thước với canvas.

Tôi không nghĩ rằng Raphael cho phép bạn làm điều đó trực tiếp, nhưng đây là một cách bạn có thể làm điều đó bằng jQuery:

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

Hoặc bạn chỉ có thể sử dụng CSS theo cách tương tự:

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

Answer 2

Bạn chỉ định kích thước canvas tại đây: Raphael ('bản vẽ', 100, 100);

Dòng đó có nghĩa là: bên trong phần tử bản vẽ thêm canvas 100x100.

Nếu bạn muốn thêm đường viền, cách đơn giản nhất và chính xác nhất để thực hiện điều đó là chỉ cần viền div.

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

Điều đó nên thực hiện.