Question

在第一次使用SVG（使用Raphael库）的过程中，我遇到了一个问题，即在画布上定位动态元素，使它们完全包含在画布中。我要做的是随机定位 n 单词/短语。

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

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

我将是第一个承认我的数学智慧有限的人，但这看起来非常简单。不知何故，我仍然最终在画布的右边缘运行了文本。为简单起见，我删除了通过将其添加到x结果来设置最小Math.random()值的位。但它就在那里，我在画布的前沿看到同样的问题。

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

我希望我长时间一直盯着这个，但是我的数学生锈了或者我误解了Math.random()，SVG，文字或其他任何行为在这个解决方案的引导下呢？

Answer 1

答案结果是我如何考虑Math.random()等式。它不像乘以max那么简单，然后加上最小值（当然）。这更像是在容器的右端建立一个双宽的排水沟，然后移动整个边界吃掉那个排水沟的一半：

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

英文...

你必须加倍想要考虑的每个元素的宽度，这样你就可以将整个范围移回那个宽度，以保持良好和平等。就我而言，我想要考虑文本宽度的一半加上10的填充。

例如......

如果画布宽度为500，文字宽度为50，所需的“装订线”为10，我会在0和{{之间创建一个随机数1}}（430）。通过添加我需要考虑的宽度 - 文本宽度的一半（500 - 20 - 50）+填充（25） - 我留下10之间的随机数和35。如果我的文字位于该边界的外边缘，则它只能达到465或10。

希望这很清楚，有道理。虽然在我考虑它时有意义，但这种事情对我来说并不是直观的，所以我相信我会经常回到这里。

定位SVG元素

1 个答案: