长期以来，我一直在尝试实现图像失真。经过一番搜索，我找到了 this 一个不错的。
我正在尝试将其添加到 kineticjs 项目中，我确信这是可能的，但我不明白如何将其添加或如何将其实施到我的项目中。图像不仅会失真，还会做一些滤镜颜色和亮度滤镜。
在main.jsof this one 中，他们从获取整个画布的上下文开始，但我只想为一个节点（实际上是一个图像或一个图层）做这件事。
这是一个 jsfiddle，他解释了我想要实现的目标：http://jsfiddle.net/junkees/fab3w85k/1/ 在这个我有一个大问题，网格不会移动，并且 sur 永远不会扭曲图像（jsfiddle 拒绝跨域资源，那就是为什么点击它或在控制台中查看时会看到一点癫痫效果。
【问题讨论】：
标签： javascript jquery image-processing kineticjs
编辑：OP 修改后的代码运行良好。唯一的问题是跨域图像。将图像放在同一台服务器上将解决问题。以下修改后的小提琴将图像作为数据 URL 加载，而不是从另一台服务器加载。该代码无需任何其他更改即可工作：
http://jsfiddle.net/fab3w85k/4/
我认为您可以使用自定义形状来实现您想要的。然后您可以在其“drawFunc”中进行自定义绘图，例如像这样：
var customShape = new Kinetic.Shape({
drawFunc: function(context) {
//Do all the custom drawing for your shape here. For example:
//context.clearRect(0, 0, 100, 100);
}
});
由于您拥有形状的 2d 上下文，因此您可以随心所欲地进行所有自定义绘图。每当 Kinetic 想要重绘画布时，都会调用“drawFunc”。您可以通过调用 layer.draw() 或 stage.draw() 函数让 Kinetic 调用此函数。
【讨论】：