0

我有一个 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 对象中声明的先决条件。所以数学有先决条件英语，英语有先决条件geog。我在 Planet 类中有一个函数可以绘制线条，但是在绘制对象后我无法访问它们。

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

4

1 回答 1

1

您的方法中有几个错误：

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

填补空白的小代码：

var planetsSet = [];

工作样本

在家工作：

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

于 2012-11-17T01:49:17.203 回答