How to use the transformation-matrix.compose 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.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github LLK / scratch-svg-renderer / src / transform-applier.js View on Github external
const parts = transform.split(/\(\s*/);
        const command = parts[0].trim();
        const v = parts[1].split(/[\s,]+/g);
        // Convert values to floats
        for (let j = 0; j < v.length; j++) {
            v[j] = parseFloat(v[j]);
        }
        switch (command) {
        case 'matrix':
            matrix = Matrix.compose(matrix, {a: v[0], b: v[1], c: v[2], d: v[3], e: v[4], f: v[5]});
            break;
        case 'rotate':
            matrix = Matrix.compose(matrix, Matrix.rotateDEG(v[0], v[1] || 0, v[2] || 0));
            break;
        case 'translate':
            matrix = Matrix.compose(matrix, Matrix.translate(v[0], v[1] || 0));
            break;
        case 'scale':
            matrix = Matrix.compose(matrix, Matrix.scale(v[0], v[1] || v[0]));
            break;
        case 'skewX':
            matrix = Matrix.compose(matrix, Matrix.skewDEG(v[0], 0));
            break;
        case 'skewY':
            matrix = Matrix.compose(matrix, Matrix.skewDEG(0, v[0]));
            break;
        default:
            log.error(`Couldn't parse: ${command}`);
        }
    }
    return matrix;
};
github LLK / scratch-svg-renderer / src / transform-applier.js View on Github external
if (origin.x === destination.x && origin.y === destination.y) {
            // If it's degenerate, use the color of the last stop, as described by
            // https://www.w3.org/TR/SVG/pservers.html#LinearGradientNotes
            const stops = newGradient.getElementsByTagName('stop');
            if (!stops.length || !stops[stops.length - 1].attributes ||
                    !stops[stops.length - 1].attributes['stop-color']) {
                return null;
            }
            return stops[stops.length - 1].attributes['stop-color'].value;
        }
    }

    // Transform points
    // Emulate SVG's gradientUnits="objectBoundingBox"
    if (scaleToBounds) {
        const boundsMatrix = Matrix.compose(Matrix.translate(bbox.x, bbox.y), Matrix.scale(bbox.width, bbox.height));
        origin = Matrix.applyToPoint(boundsMatrix, origin);
        if (destination) destination = Matrix.applyToPoint(boundsMatrix, destination);
        if (radius) {
            radius = _quadraticMean(bbox.width, bbox.height) * radius;
        }
        if (focal) focal = Matrix.applyToPoint(boundsMatrix, focal);
    }

    if (radial) {
        origin = Matrix.applyToPoint(matrix, origin);
        const matrixScale = _getScaleFactor(matrix);
        radius = _quadraticMean(matrixScale.x, matrixScale.y) * radius;
        if (focal) focal = Matrix.applyToPoint(matrix, focal);
    } else {
        const dot = (a, b) => (a.x * b.x) + (a.y * b.y);
        const multiply = (coefficient, v) => ({x: coefficient * v.x, y: coefficient * v.y});
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 */);
github LLK / scratch-svg-renderer / src / transform-applier.js View on Github external
Matrix.compose(matrix, _parseTransform(element)),
                    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;
github LLK / scratch-svg-renderer / src / transform-applier.js View on Github external
const applyTransforms = (element, matrix, strokeWidth, fill) => {
        if (_isContainerElement(element)) {
            // Push fills and stroke width down to leaves
            if (element.attributes['stroke-width']) {
                strokeWidth = element.attributes['stroke-width'].value;
            }
            if (element.attributes && element.attributes.fill) {
                fill = element.attributes.fill.value;
            }

            // If any child nodes don't take attributes, leave the attributes
            // at the parent level.
            for (let i = 0; i < element.childNodes.length; i++) {
                applyTransforms(
                    element.childNodes[i],
                    Matrix.compose(matrix, _parseTransform(element)),
                    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())) {