由 CamanJS 修改的 KineticJS 画布答案

【问题标题】：KineticJS canvas modified by CamanJS由 CamanJS 修改的 KineticJS 画布
【发布时间】：2014-02-28 06:22:31
【问题描述】：

我正在尝试将CamanJS 过滤器应用于使用 KineticJS 创建的画布。它有效：

Caman("#creator canvas", function()
{
    this.lomo().render();
});

应用 CamanJS 过滤器后，我尝试对画布做某事（例如，拖动和移动图层或单击它），但随后画布恢复到其原始状态（在应用 CamanJS 过滤器之前）。所以问题是：如何“告诉” KineticJS 更新缓存（？）或者像 stage.draw() 那样做某事来保留新的画布数据？

这里是jsfiddle（点击“应用过滤器”，当处理完成时，尝试拖动星号）。

顺便说一句：为什么处理这么慢？

提前致谢。

【问题讨论】：

我刚加了jsfiddle，应该会更好:)

标签： javascript image-processing canvas kineticjs camanjs

【解决方案1】：

如您所见，Kinetic 在内部重绘时会重绘原始图像。

您的卡曼修改内容未被使用或保存。

为了保持您的卡曼效果，您可以创建一个屏幕外画布并指示 Kinetic.Image 从该屏幕外画布中获取其图像。

然后您可以使用 Caman 过滤该画布。

结果是 Kinetic 将使用您的 Caman 修改后的画布图像进行内部重绘。

演示：http://jsfiddle.net/m1erickson/L3ACd/

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/3.3.0/caman.full.min.js"></script>
<style>
    body{padding:20px;}
    #container{
      border:solid 1px #ccc;
      margin-top: 10px;
      width:350px;
      height:350px;
    }
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    // create an offscreen canvas
    var canvas=document.createElement("canvas");
    var ctx=canvas.getContext("2d");

    // load the star.png
    var img=new Image();
    img.onload=start;
    img.crossOrigin="anonymous";
    img.src="https://dl.dropboxusercontent.com/u/139992952/stack1/star.png";
    // when star.png is loaded...
    function start(){

        // draw the star image to the offscreen canvas
        canvas.width=img.width;
        canvas.height=img.height;
        ctx.drawImage(img,0,0);

        // create a new Kinetic.Image
        // The image source is the offscreen canvas 
        var image1 = new Kinetic.Image({
            x:10,
            y:10,
            image:canvas,
            draggable: true
        });
        layer.add(image1);
        layer.draw();

    }

    // lomo the canvas
    // then redraw the kinetic.layer to display the lomo'ed canvas 
    $("#myButton").click(function(){
        Caman(canvas, function () {
            this.lomo().render(function(){
                layer.draw();
            });
        });
    });


}); // end $(function(){});

</script>       
</head>

<body>
    <button id="myButton">Lomo the draggable Star</button>
    <div id="container"></div>
</body>
</html>

【讨论】：

谢谢，完美。我的应用要复杂得多，但我会尝试实施您的解决方案。
这在桌面上完美运行，但在移动设备上，卡曼过滤器非常慢。有什么办法可以改善吗？
是的，图像过滤使用 getImageData 和 putImageData 是出了名的慢——尤其是在“动力不足”的移动设备上。唯一的改进是您可以重构您的设计以预处理图像，这样用户就不必等待它。