Question

这与an earlier question I posted松散相关，但使用了不同的图像编辑库（CamanJS而不是Pixastic）并且代码有所重构。

我正在尝试编写一个函数changify，将HTML5图像画布恢复到原始状态，然后对其进行一些预设更改。此代码从名为imageClipName的列表中加载正确的画布元素camanCache，起作用：

changify = (imageClipName) ->
    camanCache[imageClipName].revert ->
        camanCache[imageClipName]
            .brightness(10)
            .contrast(10)
            .noise(10)
            .render()
    console.log(camanCache[imageClipName])

但我想要的是从名为imageValues的另一个列表中找到已保存的预设更改，并从该列表的键值对动态创建图像函数更改字符串。这是我试图做的，但失败了：

imageClipName = "image_1"
imageValues = {image_1:{brightness: 10, contrast: 10, noise: 10}, image_2:{...}...}

changify = (imageClipName) ->
    camanCache[imageClipName].revert ->
        camanCache[imageClipName]
            for o in imageValues when o.id == imageClipName
                for key, val of o
                    .#{key}(val)
            .render()

这给了我changify函数的第三行（Unexpected 'INDENT'）的coffeescript语法错误，但我怀疑.#{key}(val)不能用于将多个函数附加到{{ 1}}。如何在coffeescript中动态字符串函数调用？

Answer 1

我认为你正在尝试这样做：

changify = (imageClipName) ->
    camanCache[imageClipName].revert -> 
        clip = camanCache[imageClipName]
        for id, methods of imageValues when id == imageClipName
            for name, arg of methods
                clip = clip[name](arg)
            clip.render()

请注意，由于您在对象上进行迭代，因此切换到外部循环中的for ... of，for ... in用于CoffeeScript中的数组。

所以给出了这个：

{brightness: 10, contrast: 10, noise: 10}

在methods中，此循环：

clip = camanCache[imageClipName]
for name, arg of methods
    clip = clip[name](arg)
clip.render()

会产生与以下相同的效果：

camanCache[imageClipName].brightness(10).contrast(10).noise(10).render()

未定义迭代对象key, val时o对的顺序，因此无法保证brightness，contrast和{的顺序{1}}来电。如果您按特定顺序需要它们，那么您必须使用noise的数组：

methods

或更好一点：

imageValues = {image_1: [['brightness', 10], ['contrast', 10], ['noise', 10]], ... }

changify = (imageClipName) ->
    camanCache[imageClipName].revert -> 
        clip = camanCache[imageClipName]
        for id, methods of imageValues when id == imageClipName
            for method in methods
                clip = clip[method[0]](method[1])
            clip.render()

通过循环遍历coffeescript中的对象来动态地对函数调用进行字符串

1 个答案: