Рафаэль создает круг по отношению к родителю - PullRequest
Новая
       1

Рафаэль создает круг по отношению к родителю

0 голосов
/ 24 октября 2011

Я делаю часы, используя Рафаэля со своими. Я создал большой круг для часов, и мне нужно создать остальные три пули за 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 ... пожалуйста!

Ответы [ 2 ]

1 голос
/ 24 октября 2011

Я не думаю, что Рафаэль обслуживает иерархии объектов так, как вы говорите. Лучшее, что вы можете сделать, это сгруппировать объекты в наборы, если вы хотите рассматривать объекты как один.

Что касается создания трех других узлов, вы можете клонировать свою первую точку и повернуть на 90 градусов вокруг центра своих часов. Сделайте это три раза, и вы получите свой циферблат.

Вот скрипка , которая иллюстрирует идею.

1 голос
/ 24 октября 2011

Прежде всего, вам не нужно объявлять несколько разных 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/

...