拉斐尔创建相对于父级的圆

发布于 12-11 17:45 字数 584 浏览 0 评论 0原文

我正在用拉斐尔和我自己的时钟制作一个时钟。我创建了一个用于时钟的大圆圈,我需要创建 12、3、6、9 小时的其他三个项目符号。现在我怎样才能创建一个圆圈,它是大圆圈的子项。 (我怎样才能将小圆圈附加到大圆圈上)?

我写了这个函数来做到这一点,但没有用。它使小圆圈变得绝对。我怎样才能创建相对于父级的小圆圈?

我的职能:

    window.onload = function(){
    var paper = new Raphael ('clock',500,500);
    var circle = paper.circle(250,250,200);
    circle.node.id="clock";
    circle.attr({
    stroke:"#f00"
   })

   var num = new Raphael(document.getElementById('clock'),400,400);
   var graydot = num.circle(10,100,5);
   graydot.attr({fill:"#000"});
}

任何人都可以帮助我吗?或者让我知道 svg 的父子关系...请!

I am making a clock using Raphael with my own. I created a big circle which is for clock, and i need to create the other three bullets for 12,3,6,9 hrs. now how can i create the circle, which is child of the big one. (how can i append the small circles to big one)?

i wrote this function to made that, but no use. it makes the small circles as absolute. how can i create the small circles as relative to parent?

my function :

    window.onload = function(){
    var paper = new Raphael ('clock',500,500);
    var circle = paper.circle(250,250,200);
    circle.node.id="clock";
    circle.attr({
    stroke:"#f00"
   })

   var num = new Raphael(document.getElementById('clock'),400,400);
   var graydot = num.circle(10,100,5);
   graydot.attr({fill:"#000"});
}

any one can help me? or let me know about parent child relation ship of svg... pls!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

评论(2

冷血2024-12-18 17:45:21

我不认为拉斐尔以你所说的方式迎合对象的层次结构。如果您想将对象视为一个整体,您能做的最好的事情就是将对象分组到集合中。

至于创建其他三个节点,您可以克隆第一个点并围绕时钟中心旋转 90 度。这样做三次,你就会得到你的钟面。

这是一个 fiddle 来说明这个想法。

I don't think that Raphael caters for hierarchies of objects in the manner you speak of. The best you can do is group objects together into sets if you want to treat the objects as one.

As for creating the other three nodes, you can clone your first dot and rotate 90 degrees around the centre of your clock. Do that three times and you'll have your clockface.

Here's a fiddle that illustrates the idea.

不打扰别人2024-12-18 17:45:21

首先,您不必声明多个不同的 Raphael 实例。只需使用您在其上构建时钟的一个即可。
此外,不存在“svg 的父子关系”,您的两个形状是兄弟姐妹(仅当您将它们插入同一个 Raphael 实例时)。
它们唯一的共同点是它们附加到相同的 svg - 看看生成的 sgv :

<svg height="500" version="1.1" width="500" xmlns="http://www.w3.org/2000/svg" style="overflow-x: hidden; overflow-y: hidden; position: relative; ">
    <desc>Created with Raphaël 2.0.0</desc>
    <defs></defs>
    <circle cx="250" cy="250" r="200" fill="none" stroke="#ff0000" id="clock" style=""></circle>
    <circle cx="10" cy="100" r="5" fill="#000000" stroke="#000" style=""></circle>
</svg>

我想说的是,圆被定位为“绝对”是正常的。
如果你想相对于大圆定位 4 个圆,你应该手动计算它们的中心:

var paper = new Raphael('clock', 500, 500);
var circle = paper.circle(250, 250, 200);
var graydot = paper.circle(circle.attrs.cx - circle.attrs.r + 10, circle.attrs.cy, 10 );

这是一个实例:

http://jsfiddle.net/gion_13/4p7Np/

First of all, you don't have to declare multiple different Raphael instances. Just use one on top of which you build your clock.
Moreover, there is no "parent child relation ship of svg" your two shapes are siblings( only if you insert them into the same Raphael instance).
The only thing that they have in common is that they are attached to the same svg - take a look at the resulting sgv :

<svg height="500" version="1.1" width="500" xmlns="http://www.w3.org/2000/svg" style="overflow-x: hidden; overflow-y: hidden; position: relative; ">
    <desc>Created with Raphaël 2.0.0</desc>
    <defs></defs>
    <circle cx="250" cy="250" r="200" fill="none" stroke="#ff0000" id="clock" style=""></circle>
    <circle cx="10" cy="100" r="5" fill="#000000" stroke="#000" style=""></circle>
</svg>

What I'm trying to say is that it's normal for the circle to be positioned "absolute".
If you want to position the 4 circles relative to the big one, you should calculate their centers manually :

var paper = new Raphael('clock', 500, 500);
var circle = paper.circle(250, 250, 200);
var graydot = paper.circle(circle.attrs.cx - circle.attrs.r + 10, circle.attrs.cy, 10 );

Here's a live example :

http://jsfiddle.net/gion_13/4p7Np/

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