Question

我希望通过按钮单击来缩放文本图层。

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>

请帮助....谢谢！

Answer 1

来自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');

如何扩展我的textlayer

1 个答案: