Ответы пользователя по тегу Canvas
  • Как реализовать поворот фрагмента изображения в Javascript?

    Hazestalker
    @Hazestalker Автор вопроса
    function alteration(mdo, x1, y1, x2, y2) {//преобразование изображений: индекс преобразования, координаты исходного и конечного изображения
    var imd_mod = buffme.createImageData(ncs, ncs);//imagedata модифицируемого фрагмента
    var imd_src = buffme.getImageData(ncs * (x1 - 1), ncs * (y1 - 1), ncs, ncs);//imagedata из исходного изображения
    var wi = he = ncs; //размеры фрагмента
    var vc, hc, ac1, ac2, ac3, c;//варианты преобразований
    //расчёт координат пикселей
    br = {
    1: c   = 'i * wi + j', //стандартные координаты пикселей
    2: ac1 = '(j + 1) * wi - i - 1', //поворот на 90гр по часовой //j+1 опускает картинку вниз до упора, i-1 влево
    3: ac2 = 'hvc = (he - i) * wi - j - 1', //поворот на 180гр по часовой //j - 1 влево до упора
    4: ac3 = '(wi - j - 1) * he + i', //поворот на 270гр по часовой //j - 1 вверх до упора
    5: vc  = '(i + 1) * wi - j - 1', //отражение по вертикали //i+1 опускает картинку вниз до упора, j-1 влево
    6: hc  = '(he - i - 1) * wi + j' //отражение по горизонтали //-i-1 поднимает картинку вверх до упора
    };
    for (var i = 0; i < he; i++) {
    for (var j = 0; j < wi; j++) {
    for (var p = 0; p < 4; p++) { //номер субпикселя(p:0,1,2,3):r-0,g-1,b-2,alpha-3
    oble = 4 * eval(br[1]) + p; //расчёт оригинальных субпикселей
    ble = 4 * eval(br[mdo]) + p; //расчёт нового положения субпикселей
    imd_mod.data[ble] = imd_src.data[oble] //копирование (суб)пикселей в новые кооординаты в новой переменной
    }}}
    buffme.putImageData(imd_mod, ncs * (x2 - 1), ncs * (y2 - 1));
    }


    Пришлось прибегнуть к созданию второго canvas, к сожалению :(
    Но зато работает!
    Кстати преобразования по-человечески делаются с помощью матриц. Если кто напишет, буду благодарен

    Изображение
    40ce32e2bddf43cdb7498b223aac3a72.png
    после всех преобразований на canvas'е стало выглядеть так
    f2fa94e1933b41edb609915cc0688bbe.png
    Ответ написан
    Комментировать