Question

我正在用自己的拉斐尔制作钟表。我创建了一个用于时钟的大圆圈，我需要创建其他三个子弹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的亲子关系船......请帮助我们。

Answer 1

首先，您不必声明多个不同的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/

Answer 2

我不认为Raphael以你所说的方式迎合对象的等级。如果要将对象视为一个对象，则可以做的最好的事情是将对象组合在一起。

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

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

拉斐尔创造相对于父母的圈子

2 个答案:

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