1

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

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

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

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

BTW：为什么处理这么慢？

提前致谢。

4

1 回答 1

2

正如您所发现的，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>
于 2014-02-04T20:41:21.483 回答