2

我有一个滑块，它的值会改变添加到图像的亮度。

$("#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）

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

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

4

3 回答 3

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

    }
});
于 2013-06-03T18:03:32.570 回答
0

这是我想出的答案，很简单！

$("#slider").slider({
    start: function(event, ui) {
        var start = ui.value;
    },
    stop: function(event, ui) {
        var end = ui.value;
        var howMuchMoved = end-start;
    }
});
于 2013-06-06T13:28:28.647 回答
0

我已经尝试了上述解决方案，但它们对我不起作用。所以我设法每次都加载原始图像，这样亮度就可以是正确的。

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

但是如果我想同时对同一张图像应用多个滤镜，这种方式就行不通了=/

于 2013-11-01T10:55:48.317 回答