Question

好的......拉斐尔非常新鲜。

无论如何，如何在我的绘画周围画一个边框，这样我才能看到我的画布大小？

<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

不要忘记默认情况下，你的div将填充任何可用的宽度，因此它不一定与画布的尺寸相同。

我认为Raphael不允许你直接这样做，但是你可以使用jQuery来实现它：

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

或者您可以以类似的方式使用CSS：

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

Answer 2

如果要避免在代码中使用jQuery，则可以轻松使用Raphael.glow element.

我试图为我的Raphael图像元素添加边框，但是css边框或笔触无法正常工作，因为默认情况下会填满整个空间。我在Raphael reference中遇到了这个很棒的功能。

辉光作为附着在图像/纸张上作为边框的元素，您可以轻松地用于调试。

模板和示例如下：

div.glow(width,fill,opcity,offsetX,offsetY,color)
paper.glow(10,true);

Answer 3

你在这里指定了画布的大小：Raphael（'drawing'，100,100）;

该行表示：在绘图元素内添加100x100画布。

如果你想添加一个边框，最简单和最正确的方法就是边界div。

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

应该这样做。

在Raphael JS中围绕你的论文画边框

3 个答案: