Question

所以我有一个滑块可以改变画布中对象的背景颜色。我希望在幻灯片上更新值，因为用户需要能够在他们进行更改时查看更改。

在滑动对象的颜色时，按照惯例滑动，但当释放滑块的句柄时，ui.value设置为其先前的值0.根据jquery ui滑块文档这意味着事件正在被取消......为什么会发生这种情况？

请参阅http://api.jqueryui.com/slider/#event-slide

$(function() {
    $('.colorShapeSolo').slider({
        min: 0,
        max: 255,
        change: colorShapeAdapter,
        slide: function (event, ui) { colorShapeAdapter(ui.value); },   
        name: 'shape'   
    });
});

function colorShapeAdapter(value)   { colorPickerAdapter('shape', 'colorShape_noColor', 'colorShape_color', 'colorShape div', value); }

// Set color of a selected object
function colorpickerSetColor($type, $noColor, $color, $picker, $hex) {

    // Set colorpicker element colors
    if ($('#' + $noColor).css('display') == 'block') $('#' + $noColor).css('display', 'none');
    if ($('#' + $color).css('display') == 'none') $('#' + $color).css('display', 'block');
    $('#' + $picker).css('backgroundColor', '#' + $hex);

    // Check drawing mode
    if ($type == 'draw') {
        canvas.freeDrawingColor = '#' + $hex;
    } else {
        var activeObject = canvas.getActiveObject();

        if (activeObject) {
            switch ($type) {
                case 'shape':
                    activeObject.fill = '#' + $hex;
                    break;
                case 'stroke':
                    if (activeObject.type === 'named-truetypetext') {
                        var strokeCol = '#' + $hex;
                        setFontOutlineColor(strokeCol, activeObject.trackId);
                        activeObject.set({outlineColor: strokeCol, stroke: strokeCol});
                    } else {
                        activeObject.stroke = '#' + $hex;
                        activeObject.strokeStyle = '#' + $hex;
                    }
                    break;
                default: break;
            }
        } else if (activeObject == null) {
            var rgb = _util.hexToRgb($hex);
            canvas.backgroundColor = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',1)';
        }
    }

    // Update
    canvas.renderAll();
    canvasBrowser_updateCC();
}

我知道问题必须在滑块中，因为当发生此问题时，colorpickerSetColor函数的值为0。

Answer 1

不应同时使用更改和幻灯片

$(function() {
    $('.colorShapeSolo').slider({
        change: colorShapeAdapter,
        slide: function (event, ui) { colorShapeAdapter(ui.value); },     
    });
});

请参阅 jQuery UI Slider - Value returned from 'slide' event on release is different from 'change' value

jquery滑块 - 滑动功能取消时不应该

1 个答案: