KineticJS .toImage() 从区域/组创建图像的正确方法答案

【问题标题】：KineticJS .toImage() proper method for creating image from region / groupKineticJS .toImage() 从区域/组创建图像的正确方法
【发布时间】：2012-10-31 18:16:45
【问题描述】：

在 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();
            }});
        }});
    }
});

【问题讨论】：

标签： javascript canvas kineticjs

【解决方案1】：

随着时间的推移，KineticJs 得到了改进，现在功能以“更好”的方式工作。试试新的 KineticJS 4.3：

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

【讨论】：

我一直在保持相对最新的 KineticJS。我目前正在运行 4.2，因为 4.3 需要进行大量代码更改，并且更改日志中没有任何内容涉及我们将从中受益的增强功能。在这个时间点上，我们宁愿不必通过我们已经编写的数千行 javascript 来使我们的代码兼容而实际上没有从升级中获得太多（如果有的话）。我已经对我的代码进行了更改，以使其更好地工作。我将发布我自己的代码，以便其他人受益。

【解决方案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();
}

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

【讨论】：