KineticJS:如何缩放舞台

KineticJS: How do I scale a Stage?

本文关键字：缩放 舞台 何缩放 KineticJS      更新时间：2023-09-26

我有一个KineticJS舞台，只有一层。下面是一个演示：http://jsfiddle.net/confile/7QTmz/

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function () {
    var yoda = new Kinetic.Image({
        x: 200,
        y: 50,
        image: imageObj,
        width: 106,
        height: 118
    });
    // add the shape to the layer
    layer.add(yoda);
    // add the layer to the stage
    stage.add(layer);
    stage.size({
        width: 100,
        height: 200
    });
    layer.draw();
    stage.draw();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

如何调整stage的大小，使stage.toDataUrl（）返回具有新维度的图像

你可以像这样将舞台及其内容增加一倍（也……感谢@Greg提供关于舞台大小的信息）：

var scaleFactor=2;
stage.size({width:stage.width()*scaleFactor,height:stage.height()*scaleFactor});
stage.scaleX(scaleFactor);
stage.scaleY(scaleFactor);
stage.draw();
相关文章：