How to use the transformation-matrix.scale 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 / interactions-touch.js View on Github external
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 / 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,
github skmail / react-free-transform / src / ElementStyler.js View on Github external
export default ({x, y, angle, scaleX, scaleY, width, height, disableScale = false}) => {

  const changedWidth = width * (1 - scaleX);
  const newWidth = width - changedWidth;
  const changedHeight = height * (1 - scaleY);
  const newHeight = height - changedHeight;

  let transformMatrix;

  if(disableScale === false){
    transformMatrix = transform(
      translate(roundTo(x + changedWidth / 2), roundTo(y + changedHeight / 2)),
      rotate(angle * (Math.PI / 180)),
      scale(scaleX, scaleY)
    );
  }else{
    transformMatrix = transform(
      translate(roundTo(x + changedWidth ), roundTo(y + changedHeight )),
      rotate(angle * (Math.PI / 180)),
    );
    width = newWidth;
    height = newHeight;
  }

  return {
    element: {
      width,
      height,
      transform: toCSS(transformMatrix),
      position: "absolute",
github hshoff / vx / packages / vx-transform / src / Transform.js View on Github external
scale(scaleX, scaleY) {
    this.matrix = transform(this.matrix, scale(scaleX, scaleY));
    return this;
  }