RaphaelJs:如何向路径定义的区域添加一些文本?
我有一张美国的 SVG 图像,是在 Raphaël js 的帮助下绘制的:
我想要做的是,当您将鼠标悬停在每个状态上时,在每个状态的右侧放置一些文本。问题是,由于每个状态都是一条路径,因此确定 x 和 x 非常困难。放置标签的 y 坐标。
那么,有谁知道使用 Raphaël 计算路径中心的方法吗?如果失败的话,有人知道如何在给定向量数组的情况下做到这一点?
I have an SVG image of the united states which I've drawn with a little bit of help from Raphaël js:
What I want to do is place some text to the right of each state when you hover over it. The problem is that, since each state is a path, its quite difficult to determine the x & y coordinates for where to place the label.
So, does anyone know a way of calculating the centre of a path using Raphaël? If failing that anyone know how to do this given a an array of vectors?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您要寻找的是Raphaël 中的getBBox 函数。它会给你一个边界框对象,你可以用它来计算路径的中心点:
我分叉你的小提琴 并使其在悬停时在每个状态的中间显示静态文本。从数据中提取州名称作为练习。
What you're looking for is the getBBox function in Raphaël. It will give you a bounding box object that you can use to calculate the central point of the path:
I forked your fiddle and made it show a static text in the middle of each state on hover. Picking up the state name from your data is left as an exercise.
每个坐标之间的差异的平均值应该给你中心,但这可能不是最有效的方法
the average of the difference between each coord should give you the centre, but thats probably not the most efficient way