拉斐尔创建相对于父级的圆
我正在用拉斐尔和我自己的时钟制作一个时钟。我创建了一个用于时钟的大圆圈,我需要创建 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 技术交流群。
发布评论
评论(2)
首先,您不必声明多个不同的 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/
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
我不认为拉斐尔以你所说的方式迎合对象的层次结构。如果您想将对象视为一个整体,您能做的最好的事情就是将对象分组到集合中。
至于创建其他三个节点,您可以克隆第一个点并围绕时钟中心旋转 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.