我致力于将颜色选择器放在一起,我计划使用它来控制使用 Sketch.js 绘制草图的颜色选择。 .根据 Sketch.js 文档,“标记”工具将从任何包含“数据颜色”字段的标签获取颜色信息,并指向 Canvas ID,例如:
<a href="#myCanvas" data-color=""></a>
我的颜色 slider ,找到here ,现在正在将 hsl/rgb 数据发送到 fiddle 示例中 slider 下方的框。我想完全删除该框,并将 slider 的值发送到标记工具的值。我在检查我的测试页面上的元素时看到 jquery-ui.js 控制包含 slider 的元素的创建,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 和数据颜色字段,以便:
handle = "<a href='#myCanvas' data-color='' id='slider-handle' class='ui-slider-handle ui-state-default ui-corner-all'></a>"
然后我在控制台中亲眼观察了输出, slider 显示了值,但由于某种原因,在绘制时,标记工具没有改变颜色。单击框时,它只会更改框的颜色。我知道我在这里遗漏了一些简单的东西,感谢任何帮助摆脱盒子的帮助。
编辑: 也许 Sketch.js 将只接受十六进制值作为输入,尝试将 hsl/rgb 转换为十六进制并查看是否有效。 编辑 2: 事实并非如此,我试图在控制台中将点击框的值实时更改为 hsl 值,然后 Sketch.js 绘制了该颜色。
最佳答案
似乎 Sketch.js 需要十六进制值作为输入。在使用元素的背景颜色作为其现在的十六进制值后,我可以想出一个解决方案。
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
绑定(bind)到 code 中的 toollinks
.
$('body').delegate "a[href=\"##{@canvas.attr('id')}\"]", 'click', (e)->
关于javascript - 将颜色选择器(jquery UI slider )连接到 Sketch.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17079029/