Question

我一直试图长时间实现图像失真。经过一番搜索，我发现this一个很好。

我正在尝试将此添加到kineticjs项目中，我确信它是可能的，但我无法理解如何添加它或如何将其实现到我的项目中。图像不仅仅是失真，它还会做一些滤镜颜色和亮度滤镜。

在main.js of this one中，他们开始获取整个画布的上下文，但我只想为节点（实际上是图像或图层）执行此操作。

这是一个jsfiddle解释我想要实现的目标：http://jsfiddle.net/junkees/fab3w85k/1/在这一个我有一个大问题，网格不移动，因为sur将永远不会扭曲图像（jsfiddle deny cross domain ressources ，这就是为什么你在点击它或查看控制台时可以看到一点癫痫效应。

Answer 1

修改：OP的修改后的代码运行正常。唯一的问题是跨域图像。将图像放在同一台服务器上可以解决问题。以下修订的小提琴将图像作为数据URL加载，而不是从另一个服务器加载它。代码无需任何其他更改即可运行：

http://jsfiddle.net/fab3w85k/4/

我认为您可以使用自定义形状实现您想要的效果。然后你可以在它的＆＃34; drawFunc＆＃34;中进行自定义绘图。例如像这样：

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上下文，因此您可以随意执行所有自定义绘图。＆＃34; drawFunc＆＃34;每当Kinetic想要重绘画布时都会调用它。您可以通过调用layer.draw（）或stage.draw（）函数让Kinetic调用此函数。

Kineticjs图像/形状/层失真

1 个答案: