測量滑塊移動之間的變化

Question

我有一個滑塊，該值可以改變添加到圖像上的亮度量。

$("#brightSlider").slider({ 
      value: 0, 
      min: -20, 
      max: 20, 
      step: 0.1, 
      slide: function(event, ui) { 
        var curVal = ui.value; 
        $('#amount').text(curVal); // show slider value 
      }, 
      stop: function(event, ui) { // when slider stops, perform the function 
        var curVal2 = ui.value; 
        Caman('#example', function() { 
         this.brightness(curVal2); // add brightness 
         this.render(); // render it 
        }); 

      } 
    }); 

現在，每次滑塊停止時都會添加亮度，因此它會停止在10，亮度將增加10。然後稍微停下來15點，15點加入亮度。 因此，在這兩張幻燈片之後，圖像已經有效地增加了25個亮度，一個10和一個15.

實際上應該做的是加10，然後加5以使總數達到15，不加15.因此，如果第二張幻燈片降低到-5，它應該從亮度中扣除-5，但它會做的是添加5（原始10 - 5）

我可以在渲染之間還原圖像，但這會創建當圖像恢復到正常狀態時閃光，這簡直是醜陋的。

問題有沒有辦法測量幻燈片之間的差異？

Answer 1

這是我想出了，很簡單的答案！

$("#slider").slider({ 
    start: function(event, ui) { 
     var start = ui.value; 
    }, 
    stop: function(event, ui) { 
     var end = ui.value; 
     var howMuchMoved = end-start; 
    } 
}); 

Answer 2

您可以跟蹤前值，像這樣：

var previousValue = 0; 
$("#brightSlider").slider({ 
    value: 0, 
    min: -20, 
    max: 20, 
    step: 0.1, 
    slide: function (event, ui) { 
     var curVal = ui.value; 
     $('#amount').text(curVal); // show slider value 
    }, 
    stop: function (event, ui) { // when slider stops, perform the function 
     var curVal2 = ui.value; 

     //When the slider stops, calculate the difference between the previous 
     //value and the current value. After that, set the value of the previous 
     //value to be the current value. 
     var difference = curVal2 - previousValue; 
     previousValue = curVal2; 

     Caman('#example', function() { 
       this.brightness(difference); // add brightness 
       this.render(); // render it 
     }); 

    } 
}); 

Answer 3

我已經嘗試了上述解決方案，但他們沒有爲我工作。所以我設法每次加載原始圖像，以便亮度可以是正確的。

var previous = 0; 
$("input[type=range]").change(function() { 

    //span value update 
    var newValue = this.value; 
    var id = $(this).attr("id"); 
    $("span[id=" + id + "]").html(newValue); 

    //updateImage(); 
    var difference = newValue - previousValue; 
    previousValue = newValue; 
    if (id == "brightness") { 
     Caman("#image", function() { 
      this.brightness(newValue); 
      this.render(); 
     }); 
    } 
}); 

而且這種方式是使用原始圖像：

$("input[id=brightness]").change(function() { 
    Caman("#image", function() { 
     setOriginal(); 
     var brightness = $("span[id=brightness]").text(); 
     //alert(brightness); 
     this.brightness(brightness); 
     this.render(); 
    }); 
}); 

但是，如果我想同時申請多個過濾器以相同的圖像=/