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加到亮度。因此，在这两个幻灯片之后，图像所具有的效果实际上被添加到亮度，即10和15。

它实际应该做的是添加10，然后添加5以使总数达到15，而不是添加15.因此，如果第二张幻灯片下降到-5，它应该从亮度中扣除-5但它会做什么是加5（原10 - 5）

我可以在渲染之间恢复图像，但这会在图像恢复正常时产生闪光，这只是简单的丑陋。

问题有没有办法衡量幻灯片之间的差异？

Answer 1

您可以像这样跟踪上一个值：

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 2

这是我提出的答案，非常简单！

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

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

但是如果我想同时将多个过滤器应用于同一个图像= /

，这种方式不起作用

测量滑块移动之间的变化

3 个答案: