KineticJS .toImage（）适当的方法从区域/组创建图像 [英] KineticJS .toImage() proper method for creating image from region / group

问题描述

当在KineticJS中使用.toImage（）方法时，我总是看到比真正需要的更大的图像，我需要只占据数据图像的左上角。我的阶段是基于窗口大小和预定义的初始大小（在窗口调整大小，调整大小阶段函数调用设置容器的规模和大小）缩放。我应该设置某种作物，当我使用toImage（）来弥补这一点？看图像，看起来整体图像大约是它需要的大小的两倍，我需要的是我需要的大小的一半，当规模在0.5左右（阶段是大约一半大小，因为我使用Chrome，并将底部的开发人员栏打开以进行调试）。

When using the .toImage() method in KineticJS, I always seem to get a much larger image than is really necessary, with the piece I need taking up only the top left corner of the data image. My stage is scaled based on window size and a pre-defined initial size (on window resize, resize stage function called which sets the scale and the size of the container). Should I be setting some sort of crop when I use toImage() to compensate for this? Looking at the image, it seems that the overall image is about twice the size it needs to be, and the piece I need is about half the size I need, when the scale is at around 0.5 (the stage is about half size because I use Chrome and leave the developer bar open at the bottom for debugging).

这里是我现在使用的：

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

推荐答案

两个半月前，直到今天才收到回复。我一直跟踪KineticJS - 甚至添加我自己的错误报告和代码建议。然而，最近我重温了这一段代码，并提出了一些更好的 - 我回来的图像现在正确裁剪，可以插入到我的画布层。这里是代码：

I posted this question two and a half months ago, and received no replies until today. I've kept up-to-date with KineticJS - even adding my own bug reports and code suggestions. However, recently I revisited this particular section of code and came up with something a bit better - the image I'm getting back is now properly cropped and can be inserted as is into my canvas layers. Here's the code:

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

这是一个扩展的原型函数 - 将层的整个层或部分转换为专门用于在动画序列中操作的图像。希望这有助于别人。

This is an extended prototype function - part of a sub-section functionality for converting an entire layer or section of a layer into an image specifically for manipulating in an animation sequence. Hopefully this helps someone else.

这篇关于KineticJS .toImage（）适当的方法从区域/组创建图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！