0

Kinetics.js を使用してキャンバスを操作し、jQuery を使用してユーザー アクションを処理しています。したがって、すべての機能を1つずつ使用すると、すべての機能が完全に正常に機能します。しかし、$('.selections img').click のような 1 つのイベントに対して 2 つの関数を組み合わせようとすると、(下記参照) 関数は背景を設定し、テキストを無視します。しかし、テキストレイヤーが作成されるのですが、なぜか見えません。関数呼び出しの順序を変更しようとしましたが、うまくいきませんでした。

コンソールをチェックすると、エラーやアラートはなく、console.log を使用して変数をチェックすると、すべてがコンソールに出力されます。

ここで何が問題になる可能性がありますか？

PS。ここでの目標は、img 変数と t 変数を保持し、それらを使用して次のことを行うことです。1 つ目 - キャンバスに背景を描画し、2 つ目 - 別のレイヤーの既存の背景の上にテキストを印刷します。

 img = '';
 t = '';
 function setCanvas (){
        hiddenCanvas = new Kinetic.Stage({
        container : 'hiddenCanvasHolder',
        width : 2340,
        height : 1660

    });
}

function setBackground (image){
        background = new Kinetic.Layer();

    var imageObj = new Image();
     imageObj.onload = function (){
     var backImg = new Kinetic.Image({
         x: 0,
         y: 0,
         image: imageObj,
         width: 2340,
         height: 1660
         });
   background.add(backImg);
   hiddenCanvas.add(background);         
     };
     imageObj.src = image;
}

function setText(txt){
    textLayer = new Kinetic.Layer ();

    var text = new Kinetic.Text({
        x: 200,
        y: 500,
        text: txt,
        fontSize: 70,
        fontFamily: 'Calibri',
        fill: '#555',
        align: 'center'
        });
    textLayer.add(text);
    hiddenCanvas.add(textLayer);
}

$(document).ready(function(e) {
setCanvas();
setBackground(img);
setText(t);
/* Handles image selection and background setting for canvas */
$('.selections img').click(function(e) {
    img = $(this).attr('alt');
    textLayer.destroy();
    background.destroy();
    setBackground(img);
    setText(t);
});

/* Handles text input field and text printing to canvas */
$('#print').click(function(e) {
    t = $('#quoteInput').val();
    background.destroy();
    setBackground(img);
    textLayer.destroy();
    setText(t);
});

/* Handles quote selection from database instead of input it manually */




});
4

1 に答える 1

0

他の関数で必要な関数スコープ内に変数が隠されています。

  • hiddenCanvas
  • バックグラウンド
  • テキストレイヤー
  • 画像
  • t

そう、

  • これらの変数をグローバルまたは
  • 必要な場所に渡すか、
  • 必要に応じて作成する

より良いリソース アプローチは、レイヤー自体を破棄する代わりに、レイヤー内で destroyChildren() を使用することです。

     background.destroyChildren();

    textLayer.destroyChildren();

また、画像のパスを img の alt プロパティに保存しています。

これは、画像を理解するためにそのプロパティを必要とする障害のある視聴者にとって無礼です。

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/ZFz3z/

<!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.5.4.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:234px;
  height:234px;
}
</style>        
<script>
$(function(){

    var hiddenCanvas = new Kinetic.Stage({
        container : 'container',
        width : 234,
        height : 234
    });
    var background = new Kinetic.Layer();
    hiddenCanvas.add(background);
    var textLayer = new Kinetic.Layer();
    hiddenCanvas.add(textLayer);


    function setBackground (image){

         var imageObj = new Image();
         imageObj.onload = function (){
         var backImg = new Kinetic.Image({
             x: 0,
             y: 0,
             image: imageObj,
             width: 234,
             height: 234
             });
             background.destroyChildren();
             background.add(backImg);
             background.draw();
         };
         imageObj.src = image;
    }

    function setText(txt){
        var text = new Kinetic.Text({
            x: 20,
            y: 50,
            text: txt,
            fontSize: 36,
            fontFamily: 'Calibri',
            fill: '#555',
            align: 'center'
            });
            textLayer.destroyChildren();
            textLayer.add(text);
            textLayer.draw();
    }

    /* Handles image selection and background setting for canvas */
    $('.imgs').click(function(e) {
        img = $(this).attr('src');
        setBackground(img);
    });

    /* Handles text input field and text printing to canvas */
    $('#print').click(function(e) {
        t = $('#quoteInput').val();
        setText(t);
    });


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

</script>       
</head>

<body>
    <div id="container"></div>
    <button id="print">Text</button>
    <input id="quoteInput" type="text" value="Hello">
    <img class="imgs" src="houseicon.png">
</body>
</html>
于 2013-08-03T04:10:50.147 に答える