How to use the transformation-matrix.translate 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 chrvadala / react-svg-pan-zoom / src / features / zoom.js View on Github external
export function fitSelection(value, selectionSVGPointX, selectionSVGPointY, selectionWidth, selectionHeight) {
  let {viewerWidth, viewerHeight} = value;

  let scaleX = viewerWidth / selectionWidth;
  let scaleY = viewerHeight / selectionHeight;

  let scaleLevel = Math.min(scaleX, scaleY);

  const matrix = transform(
    scale(scaleLevel, scaleLevel),                      //2
    translate(-selectionSVGPointX, -selectionSVGPointY) //1
  );

  if(isZoomLevelGoingOutOfBounds(value, scaleLevel / value.d)) {
    // Do not allow scale and translation
    return set(value, {
      mode: MODE_IDLE,
      startX: null,
      startY: null,
      endX: null,
      endY: null
    });
  }

  return set(value, {
    mode: MODE_IDLE,
    ...limitZoomLevel(value, matrix),
github chrvadala / react-svg-pan-zoom / src / features / interactions-touch.js View on Github external
const previousPointDistance = hasPinchPointDistance(value) ? value.pinchPointDistance : pinchPointDistance;
  const svgPoint = getSVGPoint(value, (x1 + x2) / 2, (y1 + y2) / 2);
  let distanceFactor = pinchPointDistance/previousPointDistance;

  if (isZoomLevelGoingOutOfBounds(value, distanceFactor)) {
    // Do not change translation and scale of value
    return value;
  }

  if (event.cancelable) {
    event.preventDefault();
  }

  let matrix = transform(
    fromObject(value),
    translate(svgPoint.x, svgPoint.y),
    scale(distanceFactor, distanceFactor),
    translate(-svgPoint.x, -svgPoint.y)
  );

  return set(value, set({
    mode: MODE_ZOOMING,
    ...limitZoomLevel(value, matrix),
    startX: null,
    startY: null,
    endX: null,
    endY: null,
    prePinchMode: value.prePinchMode ? value.prePinchMode : value.mode,
    pinchPointDistance
  }));
}
github chrvadala / react-svg-pan-zoom / src / features / interactions-touch.js View on Github external
let distanceFactor = pinchPointDistance/previousPointDistance;

  if (isZoomLevelGoingOutOfBounds(value, distanceFactor)) {
    // Do not change translation and scale of value
    return value;
  }

  if (event.cancelable) {
    event.preventDefault();
  }

  let matrix = transform(
    fromObject(value),
    translate(svgPoint.x, svgPoint.y),
    scale(distanceFactor, distanceFactor),
    translate(-svgPoint.x, -svgPoint.y)
  );

  return set(value, set({
    mode: MODE_ZOOMING,
    ...limitZoomLevel(value, matrix),
    startX: null,
    startY: null,
    endX: null,
    endY: null,
    prePinchMode: value.prePinchMode ? value.prePinchMode : value.mode,
    pinchPointDistance
  }));
}
github chrvadala / react-svg-pan-zoom / src / features / pan.js View on Github external
export function pan(value, SVGDeltaX, SVGDeltaY, panLimit = undefined) {

  let matrix = transform(
    fromObject(value),              //2
    translate(SVGDeltaX, SVGDeltaY) //1
  );

  // apply pan limits
  if (panLimit) {
    let [{x: x1, y: y1}, {x: x2, y: y2}] = applyToPoints(matrix, [
      {x: value.SVGMinX + panLimit, y: value.SVGMinY + panLimit},
      {x: value.SVGMinX + value.SVGWidth - panLimit, y: value.SVGMinY + value.SVGHeight - panLimit}
    ]);

    //x limit
    let moveX = 0;
    if (value.viewerWidth - x1 < 0)
      moveX = value.viewerWidth - x1;
    else if (x2 < 0) moveX = -x2;
github image-js / mrz-detection / src / getMrz.js View on Github external
function getRotationAround(image, angle) {
  const middle = { x: image.width / 2, y: image.height / 2 };
  return transform(
    translate(middle.x, middle.y),
    rotateDEG(angle),
    translate(-middle.x, -middle.y)
  );
}
github chrvadala / react-svg-pan-zoom / es / features / pan.js View on Github external
_applyToPoints2$2 = _applyToPoints2[1],
        x2 = _applyToPoints2$2.x,
        y2 = _applyToPoints2$2.y;

    //x limit


    var moveX = 0;
    if (value.viewerWidth - x1 < 0) moveX = value.viewerWidth - x1;else if (x2 < 0) moveX = -x2;

    //y limit
    var moveY = 0;
    if (value.viewerHeight - y1 < 0) moveY = value.viewerHeight - y1;else if (y2 < 0) moveY = -y2;

    //apply limits
    matrix = transform(translate(moveX, moveY), matrix);
  }

  return set(value, _extends({
    mode: MODE_IDLE
  }, matrix));
}
github chrvadala / react-svg-pan-zoom / es / features / zoom.js View on Github external
export function fitSelection(value, selectionSVGPointX, selectionSVGPointY, selectionWidth, selectionHeight) {
  var viewerWidth = value.viewerWidth,
      viewerHeight = value.viewerHeight;


  var scaleX = viewerWidth / selectionWidth;
  var scaleY = viewerHeight / selectionHeight;

  var scaleLevel = Math.min(scaleX, scaleY);

  var matrix = transform(scale(scaleLevel, scaleLevel), //2
  translate(-selectionSVGPointX, -selectionSVGPointY) //1
  );

  return set(value, _extends({
    mode: MODE_IDLE
  }, matrix, {
    startX: null,
    startY: null,
    endX: null,
    endY: null
  }));
}