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 オブジェクトで宣言されている前提条件と惑星を接続します。したがって、数学には英語が前提条件であり、英語には地理が前提条件です。Planet クラスに線を描画する関数がありますが、オブジェクトが描画された後にオブジェクトにアクセスできません。

これはラファエルの問題ですか、それとも解決できますか?

4

1 に答える 1

1

あなたのアプローチのいくつかのエラー:

  • Paper.set ではありません。このような目的Arrayで使用します。Array
  • スコープを台無しにpaperして、オブジェクト コンストラクターに渡します
  • public メソッドは、少なくとも次のように宣言する必要がありますthis.method。function method()
  • 惑星の公開プロパティをthis.propertyオブジェクトに保持するか、少なくとも this.planet を PlanetName として呼び出さないでください。
  • redraw メソッドで this.line を使用するのを忘れている

隙間を埋める小さなコード:

var planetsSet = [];

作業サンプル

宿題：

planetFromメソッドのパラメーターから削除してRedrawLine、このメソッドを次のように呼び出すことができます PlanetFrom.RedrawLine(planetTo);

于 2012-11-17T01:49:17.203 に答える