How to use the transformation-matrix.toString function in transformation-matrix

To help you get started, we’ve selected a few transformation-matrix examples, based on popular ways it is used in public projects.

github LLK / scratch-svg-renderer / src / transform-applier.js View on Github external
strokeWidth,
                    fill
                );
            }
            element.removeAttribute('transform');
            element.removeAttribute('stroke-width');
            element.removeAttribute('fill');
        } else if (_isPathWithTransformAndStroke(element, strokeWidth)) {
            if (element.attributes['stroke-width']) {
                strokeWidth = element.attributes['stroke-width'].value;
            }
            if (element.attributes.fill) {
                fill = element.attributes.fill.value;
            }
            matrix = Matrix.compose(matrix, _parseTransform(element));
            if (Matrix.toString(matrix) === Matrix.toString(Matrix.identity())) {
                element.removeAttribute('transform');
                element.setAttribute('stroke-width', strokeWidth);
                if (fill) element.setAttribute('fill', fill);
                return;
            }

            // Transform gradient
            const gradientId = _parseUrl(fill, windowRef);
            if (gradientId) {
                const doc = windowRef.document;
                // Need path bounds to transform gradient
                const svgSpot = doc.createElement('span');
                let bbox;
                if (bboxForTesting) {
                    bbox = bboxForTesting;
                } else {
github LLK / scratch-svg-renderer / src / transform-applier.js View on Github external
const _transformPath = function (pathString, transform) {
    if (!transform || Matrix.toString(transform) === Matrix.toString(Matrix.identity())) return pathString;
    // First split the path data into parts of command-coordinates pairs
    // Commands are any of these characters: mzlhvcsqta
    const parts = pathString && pathString.match(/[mlhvcsqtaz][^mlhvcsqtaz]*/ig);
    let coords;
    let relative = false;
    let previous;
    let control;
    let current = {x: 0, y: 0};
    let start = {x: 0, y: 0};
    let result = '';

    const getCoord = function (index, coord) {
        let val = +coords[index];
        if (relative) {
            val += current[coord];
        }
github LLK / scratch-svg-renderer / src / transform-applier.js View on Github external
defs = SvgElement.create('defs');
        svgTag.appendChild(defs);
    } else {
        defs = defs[0];
    }

    // Clone the old gradient. We'll make a new one, since the gradient might be reused elsewhere
    // with different transform matrix
    const oldGradient = svgTag.getElementById(gradientId);
    if (!oldGradient) return;

    const radial = oldGradient.tagName.toLowerCase() === 'radialgradient';
    const newGradient = svgTag.getElementById(gradientId).cloneNode(true /* deep */);

    // Give the new gradient a new ID
    let matrixString = Matrix.toString(matrix);
    matrixString = matrixString.substring(8, matrixString.length - 1);
    const newGradientId = `${gradientId}-${matrixString}`;
    newGradient.setAttribute('id', newGradientId);

    const scaleToBounds = getValue(newGradient, 'gradientUnits', true) !==
                'userSpaceOnUse';
    let origin;
    let destination;
    let radius;
    let focal;
    if (radial) {
        origin = getPoint(newGradient, 'cx', 'cy', false, scaleToBounds, '50%', '50%');
        radius = getValue(newGradient, 'r', false, false, scaleToBounds, '50%');
        focal = getPoint(newGradient, 'fx', 'fy', true, scaleToBounds);
    } else {
        origin = getPoint(newGradient, 'x1', 'y1', false, scaleToBounds);
github LLK / scratch-svg-renderer / src / transform-applier.js View on Github external
if (fill) element.setAttribute('fill', fill);
        } else if (_isGraphicsElement(element)) {
            // Push stroke width and fill down to leaves
            if (strokeWidth && !element.attributes['stroke-width']) {
                element.setAttribute('stroke-width', strokeWidth);
            }
            if (fill && !element.attributes.fill) {
                element.setAttribute('fill', fill);
            }

            // Push transform down to leaves
            matrix = Matrix.compose(matrix, _parseTransform(element));
            if (Matrix.toString(matrix) === Matrix.toString(Matrix.identity())) {
                element.removeAttribute('transform');
            } else {
                element.setAttribute('transform', Matrix.toString(matrix));
            }
        }
    };
    applyTransforms(svgTag, inherited, 1 /* default SVG stroke width */);
github LLK / scratch-svg-renderer / src / transform-applier.js View on Github external
// Transform stroke width
            const matrixScale = _getScaleFactor(matrix);
            element.setAttribute('stroke-width', _quadraticMean(matrixScale.x, matrixScale.y) * strokeWidth);
            if (fill) element.setAttribute('fill', fill);
        } else if (_isGraphicsElement(element)) {
            // Push stroke width and fill down to leaves
            if (strokeWidth && !element.attributes['stroke-width']) {
                element.setAttribute('stroke-width', strokeWidth);
            }
            if (fill && !element.attributes.fill) {
                element.setAttribute('fill', fill);
            }

            // Push transform down to leaves
            matrix = Matrix.compose(matrix, _parseTransform(element));
            if (Matrix.toString(matrix) === Matrix.toString(Matrix.identity())) {
                element.removeAttribute('transform');
            } else {
                element.setAttribute('transform', Matrix.toString(matrix));
            }
        }
    };
    applyTransforms(svgTag, inherited, 1 /* default SVG stroke width */);