0

这是我的第一个 html5 项目，了解它的要点，需要一些帮助。我使用 jquery UI 滑块向画布发送不透明度值，它工作得非常好......但是当滑块处于关闭位置且值为 0 时，我无法让图像完全关闭。这是我正在尝试做的事情：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;
    }

}

如您所见，我做了很多变通方法来关闭第二张图像或将其从画布中剔除。任何帮助都是极好的。

4

1 回答 1

3

赛拉斯。我看过你的 jsFiddle。我分叉了它并对您的方法进行了一些更改/改进，我认为它可以实现您的目标：

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

这是我采用的方法（与您的方法非常接近，只是有一些细微差别）：

  1. 加载我们的第一张图片
  2. 在第一张图片的onLoad函数中加载我们的第二张图片
  3. 在第二张图片的 onLoad 函数中创建我们的滑块
  4. 滑块的 create 和 update 方法都调用refreshVisuals更新滑块 div 值和更新画布的函数

主要区别在于您的示例draw中调用的函数。canvasFunction在我的draw职能中，我确保：

  1. 每次绘制时清除画布
  2. 当我们用树绘制第一张图像时，确保 alpha 为 1
  3. 绘制树图像
  4. 将 alpha 更新为滑块的当前值
  5. 画出我们的绑带图像

应该是这样！如果您有任何问题，请告诉我。

于 2013-01-17T07:09:43.710 回答