RaphaelJs:如何向路径定义的区域添加一些文本?

发布于 2024-12-08 19:04:42 字数 299 浏览 1 评论 0原文

我有一张美国的 SVG 图像,是在 Raphaël js 的帮助下绘制的:

http: //jsfiddle.net/zCRkg/2/

我想要做的是,当您将鼠标悬停在每个状态上时,在每个状态的右侧放置一些文本。问题是,由于每个状态都是一条路径,因此确定 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:

http://jsfiddle.net/zCRkg/2/

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

我的黑色迷你裙 2024-12-15 19:04:42

您要寻找的是Raphaël 中的getBBox 函数。它会给你一个边界框对象,你可以用它来计算路径的中心点:

var bbox = st.getBBox();
var text = r.text(bbox.x + bbox.width/2, bbox.y + bbox.height/2, "Foo");

分叉你的小提琴 并使其在悬停时在每个状态的中间显示静态文本。从数据中提取州名称作为练习。

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:

var bbox = st.getBBox();
var text = r.text(bbox.x + bbox.width/2, bbox.y + bbox.height/2, "Foo");

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.

忘年祭陌 2024-12-15 19:04:42

每个坐标之间的差异的平均值应该给你中心,但这可能不是最有效的方法

the average of the difference between each coord should give you the centre, but thats probably not the most efficient way

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文