KineticJS：如何缩放舞台？

Posted 2023-03-05

【中文标题】KineticJS：如何缩放舞台？

【英文标题】：KineticJS: How do I scale a Stage?

【发布时间】：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 分开？

【参考方案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”。干杯！