Измерьте ИЗМЕНЕНИЕ между перемещениями ползунка

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(); 
    }); 
}); 

Но этот способ не работает, если я хочу, чтобы применить несколько фильтров в то же время к тому же изображению =/