0

ボタンクリックでテキストレイヤーを拡大縮小したい。

var messageLayer = new Kinetic.Layer();

function writeMessage(message, xx, yy) {
var context = messageLayer.getContext();
context.font = '12pt Calibri';
context.fillStyle = 'white';
wrapText(context, message, xx, yy, seat_size, seat_size);
}

stage.add(messageLayer);
writeMessage(text, xx, yy);

document.getElementById('zoomInBtn').onclick = function zoomInStage(){  
stage.setScale(2);
stage.draw();
}

理由はわかりませんが、これは機能していないようです..

助けてくれてありがとう。

こんにちは、私の間違いを指摘していただきありがとうございます。しかし、y値を追加しても、これはまだ機能していません....

以下は私のコードです：

enter <!DOCTYPE HTML>
<html>
<body>
<div id="container"></div>
 <button id="scaleme" style="margin-left:10px;">Scale</button>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script>
  function writeMessage(messageLayer, message) {
    var context = messageLayer.getContext();
    messageLayer.clear();
    context.font = '18pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
  }
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });

  var messageLayer = new Kinetic.Layer();

  stage.add(messageLayer);
  writeMessage(messageLayer, 'text text text');

  document.getElementById('scaleme').onclick = function scale(){ 
     messageLayer.setScale(2,2);
  }

</script>
</body>
</html>

助けてくださいpp....ありがとう！

4

1 に答える 1

0

APIドキュメントから：
これはフォーマットです：

 setScale(x, y)

したがって、yパラメータが欠落しているようです。

もしあなたがそうするなら

  stage.setScale(2,2);

ステージ全体が拡大縮小されますが、テキスト レイヤーだけを拡大縮小する場合は、次のようにします。

  messageLayer.setScale(2,2);

最後に、派手にしたい場合は、テキストにズームするトランジションを行うことができます。

messageLayer.on('click', function(){
    messageLayer.transitionTo({
                scale: {
                    x: 2,
                    y: 2
                },
            duration: 1,
                easing: 'elastic-ease-out' // this one is not really necessary, just for show
        });
});

編集: キャンバス プリミティブを使用しているため、次のようにします: http://jsfiddle.net/mmqXK/

 var context = messageLayer.getContext();
 context.scale(1, 0.5);
 messageLayer.draw();
 writeMessage(messageLayer, 'text text text');
于 2013-03-06T13:42:28.420 に答える