Выпечка преобразуется в команды SVG Path Element

Ответ 1

Я создал обычный SVG flattener flatten.js, который поддерживает все формы и команды пути: https://gist.github.com/timo22345/9413158

Основное использование: flatten(document.getElementById('svg'));

Что он делает: Flattens elements (преобразует элементы в пути и преобразует флатены). Если элемент аргумента (идентификатор которого находится выше "svg" ) имеет дочерние элементы или у потомков есть дочерние элементы, эти дочерние элементы также сплющиваются.

Что можно сгладить: весь документ SVG, отдельные фигуры (путь, круг, эллипс и т.д.) и группы. Вложенные группы обрабатываются автоматически.

Как насчет атрибутов? Все атрибуты копируются. Только аргументы, которые недействительны в элементе пути, отбрасываются (например, r, rx, ry, cx, cy), но они больше не нужны. Также атрибут transform отбрасывается, потому что преобразования сглажены в команды пути.

Если вы хотите изменить координаты пути, используя неаффинные методы (например, искажение перспективы) вы можете преобразовать все сегменты в кубические кривые, используя: flatten(document.getElementById('svg'), true);

Также есть аргументы "toAbsolute" (преобразование координат в абсолютное) и "dec", количество цифр после десятичного разделителя.

Экстремальный тестер и форма: https://jsfiddle.net/fjm9423q/embedded/result/

Пример основного использования: http://jsfiddle.net/nrjvmqur/embedded/result/

CONS: текстовый элемент не работает. Это может быть моей следующей целью.

Ответ 2

Если каждый объект (круги и т.д.) сначала преобразуется в пути, то принимать во внимание преобразования довольно легко. Я сделал тестовый стенд (http://jsbin.com/oqojan/73), где вы можете протестировать функциональность. В тестовом стенде создаются команды случайного пути и применяются случайные преобразования к путям, а затем сглаживаются преобразования. Конечно, в действительности команды и преобразования пути не являются случайными, но для точности тестирования это нормально.

Существует функция flatten_transformations(), которая делает основную задачу:

function flatten_transformations(path_elem, normalize_path, to_relative, dec) {

    // Rounding coordinates to dec decimals
    if (dec || dec === 0) {
        if (dec > 15) dec = 15;
        else if (dec < 0) dec = 0;
    }
    else dec = false;

    function r(num) {
        if (dec !== false) return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
        else return num;
    }

    // For arc parameter rounding
    var arc_dec = (dec !== false) ? 6 : false;
    arc_dec = (dec && dec > 6) ? dec : arc_dec;

    function ra(num) {
        if (arc_dec !== false) return Math.round(num * Math.pow(10, arc_dec)) / Math.pow(10, arc_dec);
        else return num;
    }

    var arr;
    //var pathDOM = path_elem.node;
    var pathDOM = path_elem;
    var d = pathDOM.getAttribute("d").trim();

    // If you want to retain current path commans, set normalize_path to false
    if (!normalize_path) { // Set to false to prevent possible re-normalization. 
        arr = Raphael.parsePathString(d); // str to array
        arr = Raphael._pathToAbsolute(arr); // mahvstcsqz -> uppercase
    }
    // If you want to modify path data using nonAffine methods,
    // set normalize_path to true
    else arr = Raphael.path2curve(d); // mahvstcsqz -> MC
    var svgDOM = pathDOM.ownerSVGElement;

    // Get the relation matrix that converts path coordinates
    // to SVGroot coordinate space
    var matrix = pathDOM.getTransformToElement(svgDOM);

    // The following code can bake transformations
    // both normalized and non-normalized data
    // Coordinates have to be Absolute in the following
    var i = 0,
        j, m = arr.length,
        letter = "",
        x = 0,
        y = 0,
        point, newcoords = [],
        pt = svgDOM.createSVGPoint(),
        subpath_start = {};
    subpath_start.x = "";
    subpath_start.y = "";
    for (; i < m; i++) {
        letter = arr[i][0].toUpperCase();
        newcoords[i] = [];
        newcoords[i][0] = arr[i][0];

        if (letter == "A") {
            x = arr[i][6];
            y = arr[i][7];

            pt.x = arr[i][6];
            pt.y = arr[i][7];
            newcoords[i] = arc_transform(arr[i][4], arr[i][5], arr[i][6], arr[i][4], arr[i][5], pt, matrix);
            // rounding arc parameters
            // x,y are rounded normally
            // other parameters at least to 5 decimals
            // because they affect more than x,y rounding
            newcoords[i][7] = ra(newcoords[i][8]); //rx
            newcoords[i][9] = ra(newcoords[i][10]); //ry
            newcoords[i][11] = ra(newcoords[i][12]); //x-axis-rotation
            newcoords[i][6] = r(newcoords[i][6]); //x
            newcoords[i][7] = r(newcoords[i][7]); //y
        }
        else if (letter != "Z") {
            // parse other segs than Z and A
            for (j = 1; j < arr[i].length; j = j + 2) {
                if (letter == "V") y = arr[i][j];
                else if (letter == "H") x = arr[i][j];
                else {
                    x = arr[i][j];
                    y = arr[i][j + 1];
                }
                pt.x = x;
                pt.y = y;
                point = pt.matrixTransform(matrix);
                newcoords[i][j] = r(point.x);
                newcoords[i][j + 1] = r(point.y);
            }
        }
        if ((letter != "Z" && subpath_start.x == "") || letter == "M") {
            subpath_start.x = x;
            subpath_start.y = y;
        }
        if (letter == "Z") {
            x = subpath_start.x;
            y = subpath_start.y;
        }
        if (letter == "V" || letter == "H") newcoords[i][0] = "L";
    }
    if (to_relative) newcoords = Raphael.pathToRelative(newcoords);
    newcoords = newcoords.flatten().join(" ").replace(/\s*([A-Z])\s*/gi, "$1").replace(/\s*([-])/gi, "$1");
    return newcoords;
} // function flatten_transformations​​​​​

// Helper tool to piece together Raphael paths into strings again
Array.prototype.flatten || (Array.prototype.flatten = function() {
  return this.reduce(function(a, b) {
      return a.concat('function' === typeof b.flatten ? b.flatten() : b);
    }, []);
});

В коде используются команды Raphael.pathToRelative(), Raphael._pathToAbsolute() и Raphael.path2curve(). Версия Raphael.path2curve() имеет версию с исправлением ошибок.

Если flatten_transformations() вызывается с использованием аргумента normalize_path = true, все команды преобразуются в Cubics, и все в порядке. И код можно упростить, удалив if (letter == "A") { ... }, а также удалив обработку H, V и Z. Упрощенная версия может быть чем-то вроде this.

Но поскольку кто-то может хотеть только испечь трансформации, а не делать All Segs → Cubics normalization, я добавил туда возможность этого. Таким образом, если вы хотите сгладить преобразования с normalize_path = false, это означает, что параметры Elliptical Arc также должны быть сплющены, и их невозможно обработать, просто применив матрицу к координатам. Два радиатора (rx ry), поворот оси x, флаг большой дуги и флаг развертки должны обрабатываться отдельно. Таким образом, следующая функция может сглаживать преобразования дуг. Матричный параметр - это матрица отношений, которая исходит из того, что используется уже в flatten_transformations().

// Origin: http://devmaster.net/forums/topic/4947-transforming-an-ellipse/
function arc_transform(a_rh, a_rv, a_offsetrot, large_arc_flag, sweep_flag, endpoint, matrix, svgDOM) {
    function NEARZERO(B) {
        if (Math.abs(B) < 0.0000000000000001) return true;
        else return false;
    }

    var rh, rv, rot;

    var m = []; // matrix representation of transformed ellipse
    var s, c; // sin and cos helpers (the former offset rotation)
    var A, B, C; // ellipse implicit equation:
    var ac, A2, C2; // helpers for angle and halfaxis-extraction.
    rh = a_rh;
    rv = a_rv;

    a_offsetrot = a_offsetrot * (Math.PI / 180); // deg->rad
    rot = a_offsetrot;

    s = parseFloat(Math.sin(rot));
    c = parseFloat(Math.cos(rot));

    // build ellipse representation matrix (unit circle transformation).
    // the 2x2 matrix multiplication with the upper 2x2 of a_mat is inlined.
    m[0] = matrix.a * +rh * c + matrix.c * rh * s;
    m[1] = matrix.b * +rh * c + matrix.d * rh * s;
    m[2] = matrix.a * -rv * s + matrix.c * rv * c;
    m[3] = matrix.b * -rv * s + matrix.d * rv * c;

    // to implict equation (centered)
    A = (m[0] * m[0]) + (m[2] * m[2]);
    C = (m[1] * m[1]) + (m[3] * m[3]);
    B = (m[0] * m[1] + m[2] * m[3]) * 2.0;

    // precalculate distance A to C
    ac = A - C;

    // convert implicit equation to angle and halfaxis:
    if (NEARZERO(B)) {
        a_offsetrot = 0;
        A2 = A;
        C2 = C;
    } else {
        if (NEARZERO(ac)) {
            A2 = A + B * 0.5;
            C2 = A - B * 0.5;
            a_offsetrot = Math.PI / 4.0;
        } else {
            // Precalculate radical:
            var K = 1 + B * B / (ac * ac);

            // Clamp (precision issues might need this.. not likely, but better save than sorry)
            if (K < 0) K = 0;
            else K = Math.sqrt(K);

            A2 = 0.5 * (A + C + K * ac);
            C2 = 0.5 * (A + C - K * ac);
            a_offsetrot = 0.5 * Math.atan2(B, ac);
        }
    }

    // This can get slightly below zero due to rounding issues.
    // it save to clamp to zero in this case (this yields a zero length halfaxis)
    if (A2 < 0) A2 = 0;
    else A2 = Math.sqrt(A2);
    if (C2 < 0) C2 = 0;
    else C2 = Math.sqrt(C2);

    // now A2 and C2 are half-axis:
    if (ac <= 0) {
        a_rv = A2;
        a_rh = C2;
    } else {
        a_rv = C2;
        a_rh = A2;
    }

    // If the transformation matrix contain a mirror-component 
    // winding order of the ellise needs to be changed.
    if ((matrix.a * matrix.d) - (matrix.b * matrix.c) < 0) {
        if (!sweep_flag) sweep_flag = 1;
        else sweep_flag = 0;
    }

    // Finally, transform arc endpoint. This takes care about the
    // translational part which we ignored at the whole math-showdown above.
    endpoint = endpoint.matrixTransform(matrix);

    // Radians back to degrees
    a_offsetrot = a_offsetrot * 180 / Math.PI;

    var r = ["A", a_rh, a_rv, a_offsetrot, large_arc_flag, sweep_flag, endpoint.x, endpoint.y];
    return r;
}

СТАРЫЙ ПРИМЕР:

Я сделал пример, который имеет путь с сегментами M Q A A Q M, который применяет преобразования. Путь находится внутри g, который также использует trans. И чтобы убедиться, что этот g находится внутри другого g, который имеет различные преобразования. И код может:

A) Сначала нормализуйте все сегменты пути (благодаря Raphaël path2curve, на которые я сделал исправление ошибки, и после этого исправить все возможные комбинации сегментов пути, которые работали окончательно: http://jsbin.com/oqojan/42 Оригинальный Raphaël 2.1.0 имеет неправильное поведение, поскольку вы можете видеть здесь, если не несколько кликов, чтобы генерировать новые кривые.)

B) Затем сглаживают преобразования с использованием нативных функций getTransformToElement(), createSVGPoint() и matrixTransform().

Единственное, что не хватает, - это способ преобразования кругов, прямоугольников и многоугольников в команды пути, но, насколько я знаю, у вас есть отличный код для него.

Ответ 3

Пока вы переводите все координаты в абсолютные координаты, все béziers будут работать нормально; нет ничего волшебного в их ручках. Что касается команд эллиптической дуги, единственное общее решение (обработка неравномерного масштабирования, как вы указываете, которую команда дуги не может представлять в общем случае) состоит в том, чтобы сначала преобразовать их в их приближения biezier.

https://github.com/johan/svg-js-utils/blob/df605f3e21cc7fcd2d604eb318fb2466fd6d63a7/paths.js#L56..L113 (использует absolutizePath в том же файле, прямой порт вашего Преобразовать путь SVG к абсолютным командам hack) делает первый, но еще не последний.

Как наилучшим образом приблизиться к геометрической дуге с кривой Безье? связывает математику для преобразования дуг в béziers (один сегмент bézier на сегмент дуги 0 < α <= π/2); эта статья показывает уравнения в конце страницы (ее более красивый pdf rendition имеет его в конце раздела 3.4.1).

Ответ 4

Это обновленный журнал любого прогресса, который я делаю как "ответ", чтобы помочь другим; если я каким-то образом разрешу проблему самостоятельно, я просто приму это.

Обновление 1. У меня есть команда absolute arcto, прекрасно работающая, за исключением случаев неравномерного масштаб. Здесь были дополнения:

// Extract rotation and scale from the transform
var rotation = Math.atan2(transform.b,transform.d)*180/Math.PI;
var sx = Math.sqrt(transform.a*transform.a+transform.c*transform.c);
var sy = Math.sqrt(transform.b*transform.b+transform.d*transform.d);

//inside the processing of segments
if (seg.angle != null){
  seg.angle += rotation;
  // FIXME; only works for uniform scale
  seg.r1 *= sx;
  seg.r2 *= sy;
}

Благодаря этому ответу для более простого метода извлечения, чем я использовал, и для математики для извлечения неравномерного масштаба.