KineticJSで.toImage()メソッドを使用すると、実際に必要な画像よりもはるかに大きな画像が常に取得されるように見えます。必要な部分は、データ画像の左上隅のみです。私のステージは、ウィンドウサイズと事前定義された初期サイズに基づいてスケーリングされます(ウィンドウサイズ変更時に、コンテナーのスケールとサイズを設定するステージサイズ変更関数が呼び出されます)。これを補正するためにtoImage()を使用する場合、ある種の切り抜きを設定する必要がありますか?画像を見ると、全体の画像は必要なサイズの約2倍に見えますが、スケールが0.5前後の場合、必要なピースは必要なサイズの約半分になります(ステージは約半分のサイズです。 Chromeを使用し、デバッグのために下部の開発者バーを開いたままにします)。
これが私が今使っているものです:
desc.toImage({
width: sideW / cvsObj.scale,
height: sideH / cvsObj.scale,
callback: function(img) {
desc.hide();
sideImg.transitionTo({x : sideW / 2, width : 0, duration : 0.25, callback : function() {
// add image to emulate content
var params = {name : 'descimg', width : sideW, height : sideH, image : img, x : sideW / 2, y : 0};
var image = new Kinetic.Image(params);
side.add(image);
image.setWidth(1);
sideImg.hide();
image.transitionTo({x : 0, width : sideW, duration : 0.25, callback : function() {
side.add(desc);
desc.show();
image.hide();
cvsObj.page.draw();
}});
}});
}
});