Question

我致力于将颜色选择器放在一起，我计划使用它来控制使用Sketch.js绘制草图的颜色选择。根据Sketch.js文档，“标记”工具将从包含“数据颜色”字段的任何标记获取颜色信息，并指向画布ID，如：

<a href="#myCanvas" data-color=""></a>

找到here的我的颜色滑块现在将hsl / rgb数据发送到小提琴示例中滑块下方的框中。我想完全删除该框，只需将滑块的值发送到标记工具的值即可。我在检查测试页面上的元素时看到jquery-ui.js控制包含滑块的元素的创建，在jquery-ui.js的12691行是以下函数：

    _createHandles: function() {
    var i, handleCount,
        options = this.options,
        existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ),
        handle = "<a id='slider-handle' class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>",
        handles = [];

所以我尝试将canvas id和data-color字段添加到这个中，以便：

handle = "<a href='#myCanvas' data-color='' id='slider-handle' class='ui-slider-handle ui-state-default ui-corner-all'></a>"

然后我在控制台中用自己的眼睛观察输出，滑块取值，但由于某些原因在绘制时，标记工具不会改变颜色。只有在单击框时，它才会使用框更改颜色。我知道我在这里错过了一些简单的东西，在摆脱盒子方面有任何帮助。

编辑：也许Sketch.js只接受十六进制值作为输入，试图将hsl / rgb转换为十六进制，看看是否有效。编辑2：事实并非如此，我试图在控制台中实时将点击框的值更改为hsl值，而Sketch.js则绘制了该颜色。

Answer 1

Sketch.js似乎期望十六进制值作为输入。在使用元素的背景颜色作为现在的十六进制值后，我可以想出一个解决方案。

See fiddle

JS代码

slide: function (event, ui) {
        //console.log('/'+hsl(ui.value, 100%, 50%));
        //$('#box').attr('data-color', 'hsl(' + ui.value + ', 100%, 50%)');
        box.style.background = 'hsl(' + ui.value + ', 100%, 50%)';
        var clr = $('#box').css('background-color');
        $('#box').attr('data-color', clr).trigger('click');
    }

由于sketch.js已将click绑定到code中的toollinks，我必须触发该框的点击。

$('body').delegate "a[href=\"##{@canvas.attr('id')}\"]", 'click', (e)->

将颜色选择器（jquery UI滑块）连接到Sketch.js

1 个答案: