0

これは私の最初のhtml5プロジェクトであり、その要点を理解するには、少し助けが必要です。jquery UIスライダーを使用して不透明度の値をキャンバスに送信しましたが、非常にうまく機能します...しかし、スライダーがオフの位置にあり、値がゼロの場合、画像を完全にオフにすることはできません。これが私がやろうとしていることのフィドルです：http：//jsfiddle.net/N6wZZ/2/

これが私のJSです：

$("#slider").slider({
    animate: true,
    range: "min",
    value: 0,
    min: 0,
    max: 0.9,
    step: .01,
    create: function (event, ui) { 
        var opacityValue = '0.0';
        canvasFunction(opacityValue);
    },
    slide: function (event, ui) { 
         $('#hiddenField').attr('value', ui.value);
         $("#slider-result").html(ui.value);
         var opacityValue = $('#hiddenField').val();
         if (opacityValue == 0) {
            var opacityValue = 0;
            var workAroundVar = 300;
            var workAroundVarTwo = 0;
            canvasFunction(opacityValue, workAroundVar, workAroundVarTwo);
        } 
        else {
            var workAroundVar = 0;
            var workAroundVarTwo = 300;
            canvasFunction(opacityValue, workAroundVar, workAroundVarTwo);
        }
    }     
});
function canvasFunction(opacityValue, workAroundVar, workAroundVarTwo){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img1 = loadImage('http://moosepic.com/test2.png', main);
    var img2 = loadImage('http://moosepic.com/test.png', main);


    var imagesLoaded = 0;

    function main() {
      imagesLoaded += 1;

      if (imagesLoaded == 2) {
        // composite now
        ctx.drawImage(img1, 0, 0, 300, 300);

          ctx.globalAlpha = opacityValue;
          ctx.drawImage(img2, workAroundVar, workAroundVar, workAroundVarTwo, workAroundVarTwo);

      }
    }

    function loadImage(src, onload) {
      var img = new Image();

      img.onload = onload;
      img.src = src;

      return img;
    }

}

ご覧のとおり、2番目の画像をオフにするか、キャンバスからノックアウトするための一連の回避策を作成しました。どんな助けでも素晴らしいでしょう。

4

1 に答える 1

3

サイラス。私はあなたのjsFiddleを見てきました。私はそれをフォークし、あなたのアプローチにいくつかの変更/改善を加えました、そしてそれはあなたの目標を達成すると思います：

http://jsfiddle.net/3LJsX/7/

これが私が取ったアプローチです（これはあなたのアプローチにかなり近いですが、いくつかの小さな違いがあります）：

  1. 最初の画像を読み込む
  2. 最初の画像のonLoad関数に2番目の画像をロードします
  3. 2番目の画像のonLoad関数でスライダーを作成します
  4. スライダーのcreateメソッドとupdateメソッドはどちらもrefreshVisuals、スライダーdivの値を更新する関数を呼び出し、キャンバスを更新します。

主な違いは、例drawで呼び出された関数にありcanvasFunctionます。私のdraw職務では、次のことを確認します。

  1. 描画するたびにキャンバスをクリアします
  2. ツリーで最初の画像を描画するときは、アルファが1であることを確認してください
  3. 木の画像を描く
  4. アルファを更新して、スライダーの現在の値を変更します
  5. タイディー画像を描く

それはそれであるはずです！ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-01-17T07:09:43.710 に答える