KineticJS：如何缩放舞台？答案

【问题标题】：KineticJS: How do I scale a Stage?KineticJS：如何缩放舞台？
【发布时间】：2014-06-01 20:30:37
【问题描述】：

我有一个带有一层的 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() 返回具有新尺寸的图像？

【问题讨论】：

你看过.size()吗？ kineticjs.com/docs/Kinetic.Stage.html#size
@Greg: stage.size 不会重置舞台的大小——它在舞台对象上是只读的。
@markE 它可以工作，只是用这行测试：stage.size({width: 1366, height: 274})。文档似乎准确。
@Greg，同意！ KineticJS 文档总是有些误导。我没试过 5.1...那么在 5.1 中调整舞台大小也会调整舞台内容的大小吗？
@markE 啊是啊，显然.size 现在在 5.1 中已超载，我不需要在旧版本中使用它，所以不确定类似物会是什么....setWidth和.setHeight 分开？

标签： javascript html canvas kineticjs

【解决方案1】：

您可以像这样将舞台及其内容放大 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();

【讨论】：

请让答案更笼统，而不是 2x 取例如 n 作为比例因子
完成！我用可变比例因子替换了固定的“2”。干杯！