KineticJS .toImage（）用于从区域/组创建图像的适当方法

Question

在KineticJS中使用.toImage（）方法时，我似乎总是得到比实际需要大得多的图像，而我只需要占用数据图像的左上角。 根据窗口大小和预定义的初始大小（在窗口调整大小时，称为调整大小的阶段函数，它会设置容器的大小和大小）来缩放我的舞台。 使用toImage（）进行补偿时，是否应该设置某种裁剪方式？ 从图像上看，似乎整个图像大约是所需大小的两倍，而当比例为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();
            }});
        }});
    }
});

Answer 1

随着时间的推移，KineticJ有了改进，如今功能以“更好”的方式工作。 尝试新的KineticJS 4.3：

 http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.0.min.js

Answer 2

我在两个半月前发布了这个问题，直到今天都没有得到任何回复。 我与KineticJS保持同步，甚至添加了自己的错误报告和代码建议。 但是，最近我重新审视了这一部分代码，并提出了一些更好的建议-现在可以正确裁剪我返回的图像，并且可以将其直接插入到画布层中。 这是代码：

// grp = kinetic group, iw = image width, ih = image height, rimg = returned image array for a deferred function, cvsobj.scale is a global stage scale variable (i scale the stage to fit the window)
getImage : function(grp, iw, ih, rimg) {
    var dfr = $.Deferred();
    var gp = grp.getAbsolutePosition();
    grp.toImage({
        width: iw * cvsObj.scale,
        height: ih * cvsObj.scale,
        x : gp.x,
        y : gp.y,
        callback: function(img) {
            rimg.push(img);
            dfr.resolve(rimg);
        }
    });
    return dfr.promise();
}

这是扩展的原型功能-子功能的一部分，用于将整个层或层的一部分转换为图像，专门用于以动画序列进行操作。 希望这可以帮助其他人。