0

約 1 日解決しようとしている 1 つの問題のため、キャンバスのサポートが必要です。ここに私がテストしているコードの一部があります。

var imgpos = 0;

function drawshape(context, shape, fill, bb) {
context.beginPath();
context.save();
context.translate( 0, 130);
context.scale(1, 0.65);
context.shadowOffsetX = 0;
context.shadowOffsetY = 10;
context.shadowBlur = 9;
context.shadowColor = "black";
context.arc(shape.x, shape.y, shape.r, shape.sa, shape.ea, shape.cc);
context.lineWidth = shape.lw;
// line color
context.strokeStyle = fill;
context.stroke();
context.restore();

    // not working :( ---------------
context.save();
for(var lg = 0; lg < shape.ic; lg++) {              //
    var imagesel = new Image();
    imagesel.src = '/images/themes/default/capsules/'+imgpos+'.png';
    imagesel.onload = function(){
      if(imgpos==0){xx=70;yy=320;}
      if(imgpos==1){xx=120;yy=260;}
      if(imgpos==2){xx=140;yy=320;}
      if(imgpos==3){xx=160;yy=320;}
      if(imgpos==4){xx=180;yy=320;}
      if(imgpos==5){xx=200;yy=320;}
      if(imgpos==6){xx=220;yy=320;}
      if(imgpos==7){xx=240;yy=320;}
      if(imgpos==8){xx=260;yy=320;}
      context.drawImage(imagesel, xx, yy);
    }

    if(imgpos != 8){imgpos++;} else {imgpos=0;} 
}                           
context.restore();
    // till here :( ---------------



if(shape.link != 'Limited'){
    context.save();
    context.scale(1, 0.65);
    context.translate(500,660);
    context.font = "bold 15pt Arial";
    context.fillStyle = "WHITE";
    if(bb <= 2){
        context.textAlign="right";
        context.rotate((((shape.sa+shape.ea)-0.1)/2)-Math.PI);
        context.fillText(shape.link, -170, 0);
    }
    if(bb > 2){
        context.textAlign="left";
        context.rotate((((shape.sa+shape.ea)+0.1)/2)-2*Math.PI);
        context.fillText(shape.link, +170, 0);
    }
    context.restore();
}else{
    context.save();
    context.scale(1, 0.65);
    context.translate( 0, 130);
    context.textAlign="center";
    context.font = "bold 15pt Arial";
    context.fillStyle = "WHITE";
    context.fillText(shape.link, shape.x, shape.y-10);
    context.restore();
}
}

したがって、このコード（一部が機能しない場合を除く）は半円のスタイルで円弧を描画しますが、それぞれが分離され、陰影が付けられています...私の問題は、それらすべてに写真を入れたいのですが、同じ数の写真ではありません（それがサイクルの理由です <- 正しく、テストされ、アラートで動作する必要があります!...)。最初は 1 枚、2 枚目は 2 枚、3 枚目は 1 枚、最後は 9 枚目です。しかし、私がこのコードを試してみると、写真はすべて一箇所に描かれ、この関数が実行されるとすべての写真の位置が変わります...それをどうするかわかりません..

まず、それらをパスに追加したかったのですが（各パスにはリンクがありますが、それは別の機能であり、適切に機能しています）、その機能とは別にそれを実行しようとしましたが、何もうまくいきませんでした。コードの重要な部分が機能していないだけで、それ以外はすべて完全に機能しています。

手伝ってくれてありがとう。

4

1 に答える 1

0

悪名高いループ変数の問題にだまされているようです。JavaScript 変数は、ブロックごとではなく、関数ごとに存在します。したがって、imagesel/imgpos変数は実際には一度しか存在しません。つまり、1 つの場所に 1 つの画像しかありません。変数はループの反復ごとに上書きされます。

実際に個別の変数を作成するには、適切なループ コードを関数でラップする必要があります。xxまた、 /を宣言していませyyんvar。

for(var lg = 0; lg < shape.ic; lg++) {
    (function(imgpos) {
        var imagesel = new Image();
        imagesel.src = '/images/themes/default/capsules/'+imgpos+'.png';
        imagesel.onload = function(){
          if(imgpos==0){xx=70;yy=320;}
          if(imgpos==1){xx=120;yy=260;}
          if(imgpos==2){xx=140;yy=320;}
          if(imgpos==3){xx=160;yy=320;}
          if(imgpos==4){xx=180;yy=320;}
          if(imgpos==5){xx=200;yy=320;}
          if(imgpos==6){xx=220;yy=320;}
          if(imgpos==7){xx=240;yy=320;}
          if(imgpos==8){xx=260;yy=320;}
          context.drawImage(imagesel, xx, yy);
        }
    })(imgpos);

    if(imgpos != 8){imgpos++;} else {imgpos=0;} 
}
于 2012-06-03T14:50:00.107 に答える