Question

我有一个json对象列表。

var Planets = [
            {name:"maths", percComp: "2", preReq: "english"},
            {name:"english", percComp: "20", preReq: "geog"},
            {name:"geog", percComp: "57", preReq: "maths"}          
        ];

这些物体是我将添加到宇宙中的行星。他们是学校科目

我也有一个星球

function Planet(planet, index)
    {
        this.name = planet.name;
        this.percComp = planet.percComp;
        this.preReq = planet.preReq;
        CreatePlanet(this, index);
        this.line = paper.path('');

        function RedrawLine(planetFrom, planetTo, strokeWidth)
        {
            line.attr({
                path:"M" + planetFrom.attrs.cx + "," + planetFrom.attrs.cy + "L"+ planetTo.attrs.cx + "," + planetTo.attrs.cy,
                "stroke-width": strokeWidth
            }); 
        }

        function CreatePlanet(planet)
        {
            var planetName = planet.name;
            planetName = paper.circle(200 * index, 100, 80/index);
            planetName.attr({ 
                fill:'red',
                stroke: '#3b4449',
                'stroke-width': 6               
            });

            SetGlow(30, true, 0, 0, 'grey', planetName)
            SetHover(planetName);
        }

        function SetHover(planet)
        {
            var radius = planet.attrs.r;
            planet.mouseover(function(){
                this.animate({ r: radius * 1.3}, 150)
            }).mouseout(function(){
                this.animate({ r: radius}, 150)
            })
        }

        function SetGlow(width, fill, offSetx, offsety, color, planet)
        {
            planet.glow({
                width: 30,
                fill: true,
                offsetx: 0,
                offsety: 0,
                color: 'grey'
            });
        }

    }

启动该程序的代码是

var element = document.getElementById('Main-Content')
var paper = new Raphael(element, 1000, 1000);


    window.onload = function()
    {

        var planetsSet = paper.set();

        var index = 1;
        $(jQuery.parseJSON(JSON.stringify(Planets))).each(function(){
            var planet = new Planet(this, index);
            planetsSet.push(planet);
            index++;
        });

        for (i=0; i<planetsSet.length; i++)
        {
            var planetTo = planetsSet[i];
                            // This is a test to see if RedrawLine works
                            var planeFrom = planetsFrom[i+1];
            planetTo.RedrawLine(planetTo, planeFrom, 30)
            var preReq = this.preReq;          
        }
    }

代码用3个行星填充屏幕。我试图用线连接这些。该行将连接一个行星及其在json对象中声明的先决条件。所以数学有必要的英语，英语有必要的英语。我在Planet类中有一个绘制线条的函数，但是在绘制它们之后我无法访问它们。

这是拉斐尔的问题还是可以做到？

Answer 1

您的方法中有几个错误：

Paper.set不是Array，使用Array进行此类清除
你弄乱了范围，将paper传递给你的对象构造函数
公共方法应至少宣布为this.method，而不仅仅是function method()
在this.property对象中保留您的星球的公共属性，或者至少不要将this.planet称为PlanetName。
你忘了在你的重绘方法中使用this.line

填补空白的小代码：

var planetsSet = [];

working sample

作业：

从planetFrom方法参数中删除RedrawLine，可以将此方法称为 PlanetFrom.RedrawLine(planetTo);

在拉斐尔用一条线连接物体

1 个答案: