0

我正在使用Pixastic 库添加一些图像编辑工具。这个想法是用户可以从选择框中选择他们想要的图像或工具的一个方面，然后该工具将显示在选择框下方（我正在使用select2）并且用户可以通过滑块进行编辑。这是我到目前为止所拥有的：

# This seeds the select2 options list   
imageToolsList = [
    {id: 'bl', text: 'Blur'}
    {id: 'bc', text: 'Brightness/Contrast'}
    {id: 'ca', text: 'Color Adjust (RGB)'}
    ...
]

#Creates a select box and calls imageTooler function when the value of the box is changed
$(".image_tools_select").each ->
    $(@).select2
        placeholder: "Select an adjustment tool."
        data: imageToolsList
    $(@).on("change", (i) ->
        imageTooler JSON.stringify(
            val: i.val
            clipName: $(@).closest('.clip').attr('id')
        )
    )

# The function called on the value that the select box is changed to
imageTooler = (i) ->
    imageData = jQuery.parseJSON(i)
    iId = imageData.val
    imageClipName = imageData.clipName
    newTool = "<div id=#{iId}><label>#{iId}</label><div class='slider#{iId}'></div></div>"
    $("##{imageClipName}").find(".imagetoolfields").append newTool

This succeeds in appending the name of the editing tool and the correct slider div beneath the select box when a tool is chosen, but what I'd really like is dynamically create a slider function for that particular tool and image (there are multiple images on一个页面，每个页面都有自己的编辑工具带）。这是一个适用于“模糊”工具的滑块功能：

$('.sliderbl').slider
    min: 0
    max: 5
    value: 0.5
    step: 0.1
    range: "min"
    slide: (event, ui) ->
        $("#img_snapshot_16").pixastic("blurfast", {amount:ui.value})

有没有办法扩展 imageToolsList 使它看起来像：

imageToolsList = [
    {id: 'bl', text: 'Blur', tool: $("##{imageClipName}").pixastic("blurfast", {amount:ui.value}), sliderVals: {min: 0, max: 5, value: 0.5, step: 0.1, range: "min"} }
    ...
]

然后为 中的每个工具动态创建 jQuery 滑块函数imageTooler，就像 div 和滑块 div 所做的那样？

4

1 回答 1

1

对于任何复杂的东西，评论都会变得有点乏味，所以我会继续把它全部映射出来。我对何时何地定义了什么做了一些假设，但我认为这些假设并不重要。

我们将从一个简化的案例开始：只有一个与您在 中的对象相似的对象imageToolsList：

{
    id: 'bl'
    text: 'Blur'
    sliderVals: { min: 0, max: 5, value: 0.5, step: 0.1, range: "min" }
    tool: (imageClipName) ->
        (event, ui) -> $("##{imageClipName}").pixastic("blurfast", {amount:ui.value})
}

我稍微调整了顺序并切换tool到返回函数的函数。我们不希望pixastic在您在 中定义对象字面量时发生调用imageToolsList，创建tool一个函数可以让我们将pixastic执行推迟到以后。由于我们（大概）不知道imageClipName定义时应该是什么imageToolsList，所以我们需要另一个函数来允许我们再次填充它，pixastic直到更晚才调用；因此该函数返回一个函数技巧。

鉴于其中之一，我们如何建立slider呼叫？我们需要做的就是复制sliderVals（避免更改imageToolsList）并填写slide函数：

sliderDef = { id: 'bl', ... }
doTheSliderThing = (imageClipName) ->
    slide = sliderDef.tool(imageClipName)
    args  = $.extend({ }, sliderDef.sliderVals, slide: slide)
    $(".slider#{sliderDef.id}").slider(args)

# And make it all go and pixastic-ify `#pancakes`.
doTheSliderThing('pancakes')

tool是一个返回回调函数的函数，因此sliderDef.tool(imageClipName)为我们提供了适当的

(event, ui) -> $(...).pixastic(...)

回调函数。

如果我们有一个id并且我们想要来自 的适当条目imageToolList，那么我们必须去寻找它：

# If the list is short:
[sliderDef] = (o for o in imageToolList when o.id == id)

for循环返回一个数组，然后展开该[sliderDef]数组并将单个结果留在sliderDef. 如果imageToolList更长，那么您希望在得到结果后立即将循环短路并退出：

# Longer list, bail out as soon as we've found what we're looking for.
for o in imageToolList when o.id == 2
    sliderDef = o
    break

或者更好的是，重新设计结构imageToolList以允许通过以下方式直接访问id：

# Even longer list: allow direct access by `id`.
imageToolList =
    bl: { text: 'Blur', sliderVals: { ... }, ... }
    ...

然后我们可以做这样的事情：

doTheSliderThing = (id, imageClipName) ->
    sliderDef = imageToolList[id]
    slide     = sliderDef.tool(imageClipName)
    args      = $.extend({ }, sliderDef.sliderVals, slide: slide)
    $(".slider#{id}").slider(args)

# And make it all go and pixastic-ify `#pancakes` using `'bl'`.
doTheSliderThing('bl', 'pancakes')

或者，如果您更喜欢简洁：

doTheSliderThing = (id, imageClipName) ->
    $(".slider#{id}").slider($.extend({ }
        imageToolList[id].sliderVals
        slide: imageToolList[id].tool(imageClipName)
    ))

更新评论：如果你有这个：

sliderDefs = 
    bl: { text: 'Blur', sliderVals: { ... }, ... }
    ...

然后你可以像这样构建slider2想要的东西：

opts = ({id: k, text: v.text} for k,v of sliderDefs)
于 2012-11-03T19:16:33.153 回答