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

これは、ツールが選択されたときに、編集ツールの名前と選択ボックスの下に正しいスライダー div を追加することに成功しますが、私が本当に望むのは、その特定のツールと画像のスライダー関数を動的に作成することです (上に複数の画像があります)。それぞれ独自の編集ツールベルトを備えたページ)。「ぼかし」ツールで機能するスライダー関数は次のとおりです。

$('.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"} }
    ...
]

imageTooler次に、div およびスライダー div で行われているように、各ツールの jQuery スライダー関数を動的に作成します。

4

1 に答える 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何をすべきかわからないため、別の関数を使用してそれを埋めることができるようにする必要があります。したがって、関数トリックを返す関数。imageClipNameimageToolsListpixastic

これらの 1 つが与えられた場合、どのように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 に答える