1

初めてhtml5を使用して、このjquery uiスライダーを取得して、このhtml5キャンバスの不透明度に正しい値を送信しようとしました。いくつかのグーグルといじりの後、私はそれをここで動作させています: http://jsfiddle.net/y54Es/25/使用すると、スライダーが移動するまで画像が表示されないことがわかります。それは私が関数を持っている順序に関係していることを知っています.とにかくそれを機能させることはできません.これが私のコードです.JS：

    $("#slider").slider({
  animate: true,
  range: "min",
  value: 0.5,
  min: 0,
  max: 0.9,
  step: .01,

  slide: function (event, ui) {
    $('#hiddenField').attr('value', ui.value);
    $("#slider-result").html(ui.value);
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var valueVar = $('#hiddenField').val();
    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);
        if (valueVar == 0) {

        } else {
          ctx.globalAlpha = valueVar;
          ctx.drawImage(img2, 0, 0, 300, 300);
        }
      }
    }

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

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

      return img;
    }
  }

});

スライダーが完全に左にあるときに2番目の画像を完全にキャンセルする方法についてのヘルプは素晴らしいでしょう...そして、最初の画像をキャンバスのオンロードにロードするのを手伝ってくれる人がいれば、それも素晴らしいでしょう.

4

1 に答える 1

1

使用しているスライド メソッドは、スライダーが実際に調整されているときにのみ呼び出されます。jQueryUI Slider オブジェクトは、ページの読み込み時にスライダーが作成されるときに一度呼び出されるcreate メソッドも提供します。

これを使用して、キャンバスの初期設定を実行することをお勧めします。たとえば、キャンバス画像の読み込みなど。

于 2013-01-16T12:01:00.973 に答える