Javascript KineticJS:我如何缩放舞台?
我有一个一层的KineticJS舞台。下面是一个演示:Javascript KineticJS:我如何缩放舞台?,javascript,html,canvas,kineticjs,Javascript,Html,Canvas,Kineticjs,我有一个一层的KineticJS舞台。下面是一个演示: 如何调整stage的大小,使stage.toDataUrl()返回具有新维度的图像?您可以将stage及其内容按如下方式增加两倍(另外……感谢@Greg提供stage.size的信息): 你看过.size()了吗@格雷格:stage.size不会重置stage的大小——它在stage对象上是只读的。@标记它有效,只需使用以下行进行测试:stage.size({宽度:1366,高度:274})。“文件似乎是准确的。”格雷格,同意!Kineti
如何调整stage的大小,使stage.toDataUrl()返回具有新维度的图像?您可以将stage及其内容按如下方式增加两倍(另外……感谢@Greg提供stage.size的信息):
你看过
.size()
了吗@格雷格:stage.size
不会重置stage的大小——它在stage对象上是只读的。@标记它有效,只需使用以下行进行测试:stage.size({宽度:1366,高度:274})
。“文件似乎是准确的。”格雷格,同意!KineticJS文档总是有些误导。我还没有尝试过5.1…所以在5.1中调整舞台大小是否也会调整舞台内容?@markE Ah yeah显然。5.1中的大小现在已经过载,我不需要在旧版本中使用它,所以不确定模拟会是什么.setWidth
和.setHeight
分别?请使答案更一般,而不是2x,例如,n作为比例因子done!我用可变比例因子替换了固定的“2”。干杯
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';
var scaleFactor=2;
stage.size({width:stage.width()*scaleFactor,height:stage.height()*scaleFactor});
stage.scaleX(scaleFactor);
stage.scaleY(scaleFactor);
stage.draw();