How to use the transformation-matrix.applyToPoint 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
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});
        const add = (a, b) => ({x: a.x + b.x, y: a.y + b.y});
        const subtract = (a, b) => ({x: a.x - b.x, y: a.y - b.y});

        // The line through origin and gradientPerpendicular is the line at which the gradient starts
        let gradientPerpendicular = Math.abs(origin.x - destination.x) < 1e-8 ?
            add(origin, {x: 1, y: (origin.x - destination.x) / (destination.y - origin.y)}) :
            add(origin, {x: (destination.y - origin.y) / (origin.x - destination.x), y: 1});

        // Transform points
        gradientPerpendicular = Matrix.applyToPoint(matrix, gradientPerpendicular);
        origin = Matrix.applyToPoint(matrix, origin);
        destination = Matrix.applyToPoint(matrix, destination);

        // Calculate the direction that the gradient has changed to
        const originToPerpendicular = subtract(gradientPerpendicular, origin);
        const originToDestination = subtract(destination, origin);
        const gradientDirection = Math.abs(originToPerpendicular.x) < 1e-8 ?
            {x: 1, y: -originToPerpendicular.x / originToPerpendicular.y} :
            {x: -originToPerpendicular.y / originToPerpendicular.x, y: 1};

        // Set the destination so that the gradient moves in the correct direction, by projecting the destination vector
        // onto the gradient direction vector
        const projectionCoeff = dot(originToDestination, gradientDirection) / dot(gradientDirection, gradientDirection);
        const projection = multiply(projectionCoeff, gradientDirection);
        destination = {x: origin.x + projection.x, y: origin.y + projection.y};
    }

    // Put values back into svg
github LLK / scratch-svg-renderer / src / transform-applier.js View on Github external
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});
        const add = (a, b) => ({x: a.x + b.x, y: a.y + b.y});
        const subtract = (a, b) => ({x: a.x - b.x, y: a.y - b.y});

        // The line through origin and gradientPerpendicular is the line at which the gradient starts
        let gradientPerpendicular = Math.abs(origin.x - destination.x) < 1e-8 ?
            add(origin, {x: 1, y: (origin.x - destination.x) / (destination.y - origin.y)}) :
github image-js / mrz-detection / src / getMrz.js View on Github external
} else {
      toCrop = toCrop.rotateLeft();
      angle -= 90;
      regionTransform = transform(translate(0, toCrop.height), rotateDEG(-90));
    }
  }
  let mrzCropOptions;
  if (Math.abs(angle) < 1) {
    mrzCropOptions = {
      x: mrzRoi.roi.minX * originalToTreatedRatio,
      y: mrzRoi.roi.minY * originalToTreatedRatio,
      width: (mrzRoi.roi.maxX - mrzRoi.roi.minX) * originalToTreatedRatio,
      height: (mrzRoi.roi.maxY - mrzRoi.roi.minY) * originalToTreatedRatio
    };
    if (regionTransform) {
      const rotated = applyToPoint(regionTransform, mrzCropOptions);
      const tmp = mrzCropOptions.width;
      mrzCropOptions.width = mrzCropOptions.height;
      mrzCropOptions.height = tmp;
      mrzCropOptions.x = rotated.x;
      mrzCropOptions.y = rotated.y - mrzCropOptions.height;
    }
  } else {
    // convex hull relative to the original image's viewport
    let hull = mrzRoi.roi.mask.monotoneChainConvexHull().map(([x, y]) => ({
      x: (mrzRoi.roi.minX + x) * originalToTreatedRatio,
      y: (mrzRoi.roi.minY + y) * originalToTreatedRatio
    }));

    if (regionTransform) {
      hull = applyToPoints(regionTransform, hull);
    }
github LLK / scratch-svg-renderer / src / transform-applier.js View on Github external
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});
        const add = (a, b) => ({x: a.x + b.x, y: a.y + b.y});
        const subtract = (a, b) => ({x: a.x - b.x, y: a.y - b.y});

        // The line through origin and gradientPerpendicular is the line at which the gradient starts
        let gradientPerpendicular = Math.abs(origin.x - destination.x) < 1e-8 ?
            add(origin, {x: 1, y: (origin.x - destination.x) / (destination.y - origin.y)}) :
            add(origin, {x: (destination.y - origin.y) / (origin.x - destination.x), y: 1});

        // Transform points
        gradientPerpendicular = Matrix.applyToPoint(matrix, gradientPerpendicular);
        origin = Matrix.applyToPoint(matrix, origin);
        destination = Matrix.applyToPoint(matrix, destination);

        // Calculate the direction that the gradient has changed to
        const originToPerpendicular = subtract(gradientPerpendicular, origin);
        const originToDestination = subtract(destination, origin);
        const gradientDirection = Math.abs(originToPerpendicular.x) < 1e-8 ?
            {x: 1, y: -originToPerpendicular.x / originToPerpendicular.y} :
            {x: -originToPerpendicular.y / originToPerpendicular.x, y: 1};

        // Set the destination so that the gradient moves in the correct direction, by projecting the destination vector
        // onto the gradient direction vector
        const projectionCoeff = dot(originToDestination, gradientDirection) / dot(gradientDirection, gradientDirection);
        const projection = multiply(projectionCoeff, gradientDirection);
        destination = {x: origin.x + projection.x, y: origin.y + projection.y};
    }
github LLK / scratch-svg-renderer / src / transform-applier.js View on Github external
// 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});
        const add = (a, b) => ({x: a.x + b.x, y: a.y + b.y});
        const subtract = (a, b) => ({x: a.x - b.x, y: a.y - b.y});
github image-js / mrz-detection / src / getMrz.js View on Github external
maxX = Math.min(afterRotate.width, Math.round(maxX));
    maxY = Math.min(afterRotate.height, Math.round(maxY));

    mrzCropOptions = {
      x: minX,
      y: minY,
      width: maxX - minX,
      height: maxY - minY
    };
    toCrop = afterRotate;
  }

  if (mrzCropOptions.y < toCrop.height / 2) {
    // image is upside down, turn it back
    toCrop = toCrop.rotate(180);
    const newXY = applyToPoint(getRotationAround(toCrop, 180), mrzCropOptions);
    mrzCropOptions.x = newXY.x - mrzCropOptions.width;
    mrzCropOptions.y = newXY.y - mrzCropOptions.height;
  }

  let cropped = toCrop.crop(mrzCropOptions);
  if (debug) images.crop = cropped;

  return debug ? { images } : cropped;
}
github chrvadala / react-svg-pan-zoom / test / test-utils.js View on Github external
export function testBBox(value) {
  const matrix = fromObject(value)

  const {SVGMinX, SVGMinY, SVGWidth, SVGHeight} = value
  const topLeft = applyToPoint(matrix, {x: 0, y: 0})
  const bottomRight = applyToPoint(matrix, {x: SVGWidth - SVGMinX, y: SVGHeight - SVGMinY})

  //x1, y1, x2, y2
  return [topLeft.x, topLeft.y, bottomRight.x, bottomRight.y]
}
github LLK / scratch-svg-renderer / src / transform-applier.js View on Github external
const getString = function (point) {
        const transformed = Matrix.applyToPoint(transform, point);
        return `${roundTo4Places(transformed.x)} ${roundTo4Places(transformed.y)} `;
    };