javascript - 定位 SVG 元素

Question

在第一次玩弄 SVG 的过程中(使用 Raphael 库)，我在将动态元素定位在 Canvas 上时遇到了问题，使它们完全 包含在 Canvas 中。我想做的是随机放置 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。

我会第一个承认我的数学敏锐度有限，但这看起来很简单。不知何故，我仍然以超出 Canvas 右边缘的文本结束。为简单起见，我通过将它添加到 Math.random() 结果中删除了同样设置最小 x 值的位。不过，它就在那里，我在 Canvas 的前缘看到了同样的问题。

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

我希望我已经盯着它看太久了，但是我的数学那个是生疏了还是我误解了 Math.random() 的一些行为>、SVG、文本或此解决方案背后的任何其他内容？

Answer 1

结果证明我是如何考虑 Math.random() 方程的。它不像乘以最大值然后加上最小值那么简单(当然)。这实际上更像是在容器的右端建立一个双倍宽的排水沟，然后移动整个边界以吃掉一半的排水沟:

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

英文...

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

例如……

给定 500 的 Canvas 宽度、50 的文本宽度和 10 的所需“装订线”，我创建了一个随机数在 0 和 430 之间(500 - 20 - 50)。通过加回我需要考虑的宽度——文本宽度的一半 (25) + 填充 (10)——我得到了一个随机数在 35 和 465 之间。如果我的文本位于该边界的外边缘，它只能达到 10 或 490。

希望这已经足够清楚，可以理解了。虽然当我考虑时它是有道理的，但这种事情对我来说并不是立即直观的，所以我相信我会经常回到这里引用。