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>

请helppp....谢谢！

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 回答