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 を加えます。したがって、これらの 2 つのスライドの後、画像の明るさは効果的に 25 加算さ​​れ、10 と 15 になります。

実際にすべきことは、15 を足すのではなく、10 を足してから 5 を足して合計を 15 にすることです。したがって、2 番目のスライドが -5 まで下がった場合、明るさから -5 を差し引く必要がありますが、5 を足すことになります。 (元の 10 - 5)

レンダリング間で画像を元に戻すことはできますが、これにより、画像が通常の状態に戻る間にフラッシュが発生します。

質問スライド間の違いを測定する方法はありますか?

4

3 に答える 3

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 に答える