0

関数を Snap.load(...loading SVG... my method...) に追加すると、Snap.Load() の内部にあるこのメソッドを呼び出せないのはなぜですか?

function myComponent() {
    var paper = Snap("#svg3");

    Snap.load("svg/thermometer_o.svg", function (f) {
        paper.append(f);
        paper.selectAll("#empty").attr({fill: "#f00"});

       myMethod = function(perc){
            var v= 350 * ((perc) / 100);
            var py = (557 - v);
           animate = function(){   
          paper.selectAll("#empty").animate({height: v, y: py, x: "340"}, 3000);};
    };      


    });
}


function onPageLoad() {
    componentThermometer().myMethod(40);

}
4

1 に答える 1

0

いくつかの問題があります。SO にいくつかのビットを貼り付けることに関連している可能性がありますが、念のため言及します。

componentThermometer() は何またはどこにありますか? どこにも定義されていません。

それがどういうわけか myComponent を呼び出す場合は、イベントの順序について考える必要があります。Snap.load は非同期であるため、時間がかかる場合があります。

したがって、ページの読み込みが完了したら componentThermometer.MyMethod() を呼び出します。

その myComponent のロジックについて考えてみると、 Snap.load が完了するまで myMethod は使用できません。そのため、コードのどこかで何かが起こっていない限り、そのメソッドがどのように利用できるかはよくわかりません。

あなたがやりたいと思っていることは、 myMethod を Snap.load ハンドラーの外に置くことです (現在、そこにある理由はわかりません)。また、Snap.load が完了した後にのみ myMethod を呼び出したい場合があります (現在ロード後に定義されているのではなく)。

ただし、jsfiddle の基本だけでテスト例を作成できれば、さらに役立ちます。

コードペンから、これが私がそれを行う方法です...

var paper = Snap("#svg3");

function componentThermometer( perc ) {         
    Snap.load("https://raw.githubusercontent.com/chovancova/project/master/public_html/teplomer_1/svg/thermometer_o.svg", function(f){
        paper.append(f);
        paper.selectAll("#empty").attr({fill:"#f00"});

        animateThermometer( perc );       
  });
};   


function animateThermometer( perc ) {  
        var vyska =  350*( perc / 100);
        var py = 557-vyska  ;
        paper.selectAll("#empty").animate({height: vyska, y:py, x:"342.882"}, 800);
};

componentThermometer(50);
于 2014-10-20T13:53:06.307 に答える