Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to get selection's original x,y after canvas scale? #1141

Open
zhi114 opened this issue Feb 26, 2024 · 1 comment
Open

How to get selection's original x,y after canvas scale? #1141

zhi114 opened this issue Feb 26, 2024 · 1 comment

Comments

@zhi114
Copy link

zhi114 commented Feb 26, 2024

I want to get the selection's original x,y after the canvas scale.  
I have viewed the source code and googled a lot ,but I can not find a way to get it or calculte it.
Any suggestions?
Thanks a lot!

@marcopixel
Copy link

marcopixel commented May 28, 2024

If you want real image dimensions from the canvas selection you can use the following function:

setTransform() {
  const cropperImage = this.$refs.cropperImage as CropperImage;
  const cropperSelection = this.$refs.cropperSelection as CropperSelection;

  // convert image matrix to image crop data (x,y,scale,rotate)
  const matrix = cropperImage.$getTransform();
  const imageActualWidth = cropperImage.$image.width * matrix[0];
  const imageActualHeight = cropperImage.$image.height * matrix[3];
  const imageActualX = matrix[4] + (cropperImage.$image.width - imageActualWidth) / 2;
  const imageActualY = matrix[5] + (cropperImage.$image.height - imageActualHeight) / 2;
  const rotate = Math.round(Math.atan2(matrix[1], matrix[0]) * (180 / Math.PI));

  // convert selection to actual image dimensions
  const scaleX = imageActualWidth / cropperImage.$image.width;
  const scaleY = imageActualHeight / cropperImage.$image.height;
  const x = (cropperSelection.x - imageActualX) / scaleX;
  const y = (cropperSelection.y - imageActualY) / scaleY;
  const width = Math.ceil(cropperSelection.width / scaleX);
  const height = Math.ceil(cropperSelection.height / scaleY);

  return { x, y, width, height, rotate };
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants