2

在第一次使用 SVG 的过程中（使用Raphael库），我遇到了在画布上以完全包含在画布中的方式定位动态元素的问题。我正在尝试做的是随机放置n 个单词/短语。

由于文本是可变的，它的位置也需要是可变的，所以我正在做的是：

  1. 0,0最初在没有不透明度的点创建文本。
  2. 使用 .检查绘制的文本元素的宽度text.getBBox().width。
  3. 将新x坐标设置为Math.random() * (canvas_width - ( text_width/2 ) - pad)。
  4. 将文本的坐标更改x为新设置的值 ( text.attr( 'x', x ))。
  5. 将文本的不透明度属性设置为 1。

我将是第一个承认我的数学头脑有限的人，但这似乎很简单。不知何故，我的文本仍然超出了画布的右边缘。为简单起见，我x通过将其添加到Math.random()结果中删除了也设置最小值的位。不过，它就在那里，我在画布的前缘看到了同样的问题。

我的理解（例如）是，这些Math.random()位会生成一个介于 0 和 1 之间的数字，然后可以乘以某个数字（在我的情况下，画布宽度 - 文本宽度的一半 - 一些任意填充）以获得外界。我将文本的宽度分成两半，因为它在网格上的位置设置在它的中心。

我希望我已经盯着这个太久了，但是我的数学是生锈的还是我误解了关于Math.random()这个解决方案引擎盖下的 、SVG、文本或其他任何东西的行为？

4

1 回答 1

1

答案原来是我对Math.random()方程式的思考方式。它并不像乘以最大值然后加上最小值那么简单（当然）。这实际上更像是在容器的右端建立一个双倍宽的排水沟，然后移动整个边界以吃掉该排水沟的一半：

var x  = Math.random() * ( canvas_w - 20 - ( text.getBBox().width ) ) + ( text.getBBox().width/2 + 10 );

用英语...

您必须将要考虑的每个元素的宽度加倍，以便您可以将整个范围向后移动该宽度以保持良好和平等。就我而言，我想占文本宽度的一半加上 10 的填充。

例如...

给定画布宽度500，文本宽度50和所需的“装订线” ，我在和( )10之间创建一个随机数。通过添加我需要考虑的宽度——文本宽度的一半（）+填充（）——我留下了一个介于和之间的随机数。如果我的文本位于该边界的外边缘，则它只能到达or 。0430500 - 20 - 5025103546510490

希望这足够清楚，有意义。尽管当我想到它时它是有道理的，但这种事情对我来说并不是立即直观的，所以我相信我会经常在这里提及。

于 2010-04-29T19:18:31.607 回答