-->

KineticJS .toImage(),用于从区域/组创建图像适当方法(KineticJS .to

2019-10-17 08:58发布

当使用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:

已经有一段时间改进KineticJs和功能于一身的“好”的方式工作现在。 尝试新的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();
}

这是一个扩展的原型函数 - 用于在动画序列操纵整个层或层的部分转换成的图像的具体一个子部分功能的一部分。 希望这可以帮助其他人。



文章来源: KineticJS .toImage() proper method for creating image from region / group