在 Raphael JS 中为您的论文绘制边框答案

【问题标题】：Draw border around your paper in Raphael JS在 Raphael JS 中为您的论文绘制边框
【发布时间】：2011-12-16 12:57:42
【问题描述】：

好吧……对 Raphael 来说非常陌生。

无论如何，我如何在我的绘图周围画一个边框，以便我可以看到我的画布的大小？

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

【问题讨论】：

标签： javascript asp.net raphael

【解决方案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;
}

【讨论】：

【解决方案2】：

你在这里指定了画布的大小：Raphael('drawing', 100, 100);

那条线的意思是：在绘图元素内添加一个 100x100 的画布。

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

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

应该可以的。

【讨论】：

所以你不能在纸上加边框？

【解决方案3】：

如果你想避免在你的代码中使用 jQuery，你可以很容易地使用Raphael.glow element.

我试图为我的 Raphael 图像元素添加边框，但 css 边框或描边没有成功，因为默认情况下会填充整个空间。我在Raphael reference 中发现了这个奇妙的功能。

Glow 充当附加在图像/纸张上的元素作为边框，您可以轻松地用于调试。

模板和示例如下：

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

【讨论】：