Kineticjs图像/形状/图层失真

我一直在努力实现很长一段时间的图像失真。经过一番搜索，我发现this一个很好。Kineticjs图像/形状/图层失真

我想将这添加到kineticjs项目，我敢肯定这是可能的，但我不明白如何添加它或如何将它实现到我的项目。图像不仅仅是失真，它还会做一些滤镜颜色和亮度过滤器。

在main.jsof this one他们开始获取整个画布的上下文，但我只想做一个节点（实际上是一个图像或一个图层）。

这里是谁解释我想实现的jsfiddle：在此我有一个大问题http://jsfiddle.net/junkees/fab3w85k/1/，格不动和河畔绝不会扭曲的形象（的jsfiddle拒绝跨域ressources，这就是为什么点击它或在控制台中观看时，您会看到一点点癫痫的效果）。

来源

2014-09-30 yyg

编辑：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调用这个函数。

来源

2014-10-01 12:17:47

我已经这样做了：http://jsfiddle.net/junkees/fab3w85k/3/它完全是我为失真而失败，但没有使用kinetic.image，因为我看不到如何处理返回的图像与动力学工作（应用过滤器，rescal，和其他东西） – yyg 2014-10-02 12:53:53

@YechouaGuedj，你还是跨域图像问题的另一个受害者。请注意，由于安全问题，除非CORS设置正确，否则浏览器不允许对图像进行低级别的画布处理。所以你的代码是完全正确和工作的。所有你需要做的就是将图像托管在服务该页面的同一个域中，你将会很开心。请参阅我的编辑修复。 – 2014-10-02 22:30:27

我知道他在真正的服务器上工作，但实际上我不知道如何重用扭曲的图像（只需应用来自kineticjs的滤镜颜色），我想将扭曲的图像转换为动力学对象（图像将完美），因为失真“只是”我的应用程序的一部分。实际上输入文件是一个图像，输出文件是一个distortedImage，我想在输入中设置kinetic.Image并获得一个kinetic.Image输出 – yyg 2014-10-03 07:41:05

Kineticjs图像/形状/图层失真

回答

相关问题