1

KineticJS で作成したキャンバスにCamanJSフィルターを適用しようとしています。できます：

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

CamanJS フィルターを適用した後、キャンバスで sth を実行しようとしています (たとえば、レイヤーをドラッグして移動するか、レイヤーをクリックするだけです) が、キャンバスは元の状態に戻ります (CamanJS フィルターを適用する前)。問題は、KineticJS に cache(?) を更新するように「指示」する方法、または新しいキャンバス データを保持するために stage.draw() のように実行する方法です。

これがjsfiddleです（「フィルターを適用」をクリックし、処理が完了したら、星をドラッグしてみてください）。

ところで: 処理が遅いのはなぜですか?

前もって感謝します。

4

1 に答える 1

2

ご存じのように、Kinetic は内部で再描画するときに元の画像を再描画します。

カマンの変更されたコンテンツは使用または保存されません。

カマン効果を維持するには、オフスクリーン キャンバスを作成し、Kinetic.Image にそのオフスクリーン キャンバスから画像を取得するように指示します。

次に、Caman を使用してそのキャンバスをフィルタリングできます。

その結果、キネティックは、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 に答える