Ограниченное / пропорциональное масштабирование в KineticJS

Когда перетаскивается любой из 4 угловых маркеров изображения, изображение должно пропорционально масштабироваться вверх или вниз.

Проблема: с моей текущей попыткой, показанной в jsfiddle по ссылке ниже, когда маркеры topLeft перетаскиваются вертикально, изображение изменяется пропорционально, но другой обрабатывает мерцание. При перетаскивании того же маркера topLeft по горизонтали изображение просто перемещается без изменения размера.

Как можно реализовать пропорциональное масштабирование с помощью KineticJS? Спасибо!!!

jsfiddle: http://jsfiddle.net/zb3Km/


javascript canvas html jquery kineticjs
person Nyxynyx    schedule 15.12.2012    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Исходя из этого .....
математика / алгоритм Уместить изображение под размер экрана с сохранением соотношения сторон

Я получил это .....

function update(group, activeAnchor) {
    var topLeft     = group.get(".topLeft")[0];
    var topRight     = group.get(".topRight")[0];
    var bottomRight = group.get(".bottomRight")[0];
    var bottomLeft     = group.get(".bottomLeft")[0];
    var image         = group.get(".image")[0];

    // update anchor positions
    switch(activeAnchor.getName()) {
        case "topLeft":

            topRight.attrs.y = activeAnchor.attrs.y;
            //topRight.attrs.x = activeAnchor.attrs.x + image.getWidth();
            bottomLeft.attrs.x = activeAnchor.attrs.x;
           // bottomRight.attrs.x = activeAnchor.attrs.x + image.getWidth();

            break;
        case "topRight":
            topLeft.attrs.y = activeAnchor.attrs.y;
            bottomRight.attrs.x = activeAnchor.attrs.x;
            break;
        case "bottomRight":
            bottomLeft.attrs.y = activeAnchor.attrs.y;
            topRight.attrs.x = activeAnchor.attrs.x;
            break;
        case "bottomLeft":
            bottomRight.attrs.y = activeAnchor.attrs.y;
            topLeft.attrs.x = activeAnchor.attrs.x;
            break;
    }

    //https://stackoverflow.com/questions/6565703/math-algorithm-fit-image-to-screen-retain-aspect-ratio

    var ws= topRight.attrs.x - topLeft.attrs.x;
    var hs = bottomLeft.attrs.y - topLeft.attrs.y;
    var wi =   image.getWidth();
    var hi = image.getHeight();
    var rs = ws/hs;
    var ri = wi/hi;
    if (rs>ri){
        var width =wi * hs/hi;
        image.setSize(width, hs);
        image.setPosition( topLeft.attrs.x+((ws-width)/2), bottomLeft.attrs.y-((hi)));

    } else {
        var height=hi * ws/wi;
        image.setSize(ws, height);
         image.setPosition( topRight.attrs.x-wi, topLeft.attrs.y+((hs-height)/2));
    }


}

http://jsfiddle.net/zb3Km/2/
РЕДАКТИРОВАТЬ:
http://jsfiddle.net/zb3Km/3/
Якоря возвращаются после вашего закончил изменение размера

РЕДАКТИРОВАТЬ2: теперь привязка изменения размера к противоположному углу.
http://jsfiddle.net/jdA3y/

person PAEz    schedule 15.12.2012
comment
Лучше было бы, если бы изображение оставалось по центру .... Я мог бы посмотреть, сделаю это завтра для вас ... возможно;) - person PAEz; 15.12.2012
comment
В любое время, рад помочь .... и я, возможно, посмотрю, как сохранить это в центре внимания завтра, действительно должен сделать это правильно;) - person PAEz; 16.12.2012
comment
@Nyxynyx Центрирование изображения казалось проблемой (долго объяснять). Поэтому я привязал его к углу, противоположному тому, который они использовали для изменения размера. Это дает более ожидаемое поведение, и в большинстве случаев им не нужно перемещать изображение при каждом изменении размера. - person PAEz; 16.12.2012
comment
Идеально! Многому у тебя научился! - person Nyxynyx; 16.12.2012
comment
это хороший подход, проблема в том, что он все время масштабирует изображение от якоря topLeft. Но работает хорошо. Еще немного поищите и измените размер всех якорей. - person Ervin; 07.01.2014
comment
@PAEz, пожалуйста, помогите мне решить проблему stackoverflow.com/questions/61237506/ - person M.Idrish; 15.04.2020
comment
Я запускаю ваш код jsfiddle, но он не работает, якорь свободно перемещается в вашем коде - person M.Idrish; 15.04.2020