html - 结合 kineticjs 和 pixastic 应用图像效果

Question

我正在尝试使用 pixastic 库中的一些功能并将其与 kineticjs 结合使用。其中之一是将 pixastic 中的棕褐色效果应用于使用 kineticjs 创建的图像。

我在这里有一个 jsfiddle 设置：

我认为以下方法会起作用：

function sepia() {
    Pixastic.process(darth, "sepia");
    layer.draw();
}

但图像保持不变。我错过了什么，或者这甚至不可能将两个库结合在一起吗？

score 1 · Accepted Answer

我的猜测是您不能将 Pixastic 函数直接应用于Kinetic.Image对象，因为它与常规图像对象略有不同。

或者，您需要获取图像的原始源，然后您可以在该图像上运行 Pixastic 效果，然后set使用新的受影响图像运行 Kinetic.Image 对象。

function sepia() {
  var sepia = Pixastic.process(darth.attrs.image, "sepia");
  darth.setImage(sepia);
  layer.draw();
}

这是完整的代码：jsfiddle

注意：您必须在本地服务器上运行它，因为它不能在 jsfiddle 上运行（pixastic库不能作为外部资源加载，没有 CDN 主机）

第二注意：您必须在函数var layer外部声明imageObj.onload，否则您的sepia()函数无法layer从imageObj.onload. 您可以在 jsfiddle 中看到我是如何做到的。

1 回答 1