KineticJS .toImage() правильный метод для создания изображения из региона/группы

При использовании метода .toImage() в KineticJS мне всегда кажется, что я получаю гораздо большее изображение, чем это действительно необходимо, а часть, которая мне нужна, занимает только верхний левый угол изображения данных. Моя сцена масштабируется в зависимости от размера окна и предварительно определенного начального размера (при изменении размера окна вызывается функция изменения размера, которая устанавливает масштаб и размер контейнера). Должен ли я устанавливать какую-то обрезку, когда я использую 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();
            }});
        }});
    }
});

javascript canvas kineticjs
person Lazerblade    schedule 31.10.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Со временем в KineticJ были внесены улучшения, и в настоящее время функции работают «лучше». Попробуйте новый KineticJS 4.3:

 http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.0.min.js
person SoluableNonagon    schedule 11.01.2013
comment
Я постоянно обновляюсь с KineticJS. В настоящее время я использую 4.2, потому что 4.3 потребует много изменений кода, и ничто в журнале изменений не указывает на улучшения, от которых мы могли бы извлечь выгоду. На данный момент мы бы предпочли не проходить через тысячи строк javascript, которые мы уже написали, чтобы сделать наш код совместимым, не получая при этом никакой пользы от обновления. С тех пор я внес изменения в свой код, чтобы он работал лучше. Я опубликую свой собственный код, так что, возможно, кому-то еще это будет полезно. - person Lazerblade; 11.01.2013

arrow_upward
0
arrow_downward

Я отправил этот вопрос два с половиной месяца назад, и до сегодняшнего дня не получил ответов. Я постоянно обновляюсь с 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();
}

Это расширенная функция-прототип — часть функциональности подраздела для преобразования всего слоя или части слоя в изображение специально для манипулирования в последовательности анимации. Надеюсь, это поможет кому-то еще.

person Lazerblade    schedule 11.01.2013