KineticJS:我如何扩展舞台?

时间:2014-04-17 14:03:38

标签: javascript html html5 canvas kineticjs

我有一层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.toDataUrl()返回包含新尺寸的图片?

1 个答案:

答案 0 :(得分:2)

你可以将这个阶段和它的内容分成2倍(同样......感谢@Greg获取stage.size上的信息):

var scaleFactor=2;

stage.size({width:stage.width()*scaleFactor,height:stage.height()*scaleFactor});

stage.scaleX(scaleFactor);
stage.scaleY(scaleFactor);

stage.draw();