How to get the coordinates of the image after rotation

[anhln1998]

I have a rectangle, after rotating it 90 degrees, the coordinates returned are still the same as the original, how can I get the coordinates after rotation?

[stockiNail]

@anhln1998 the plugin is not exporting the helpers therefore, even if there is the function, you cannot invoked.

Nevertheless, is not an issue for you, you can take it and copy in your project:

chartjs-plugin-annotation/src/helpers/helpers.geometric.js

Lines 5 to 22 in e94475c

	/**
	* Rotate a `point` relative to `center` point by `angle`
	* @param {Point} point - the point to rotate
	* @param {Point} center - center point for rotation
	* @param {number} angle - angle for rotation, in radians
	* @returns {Point} rotated point
	*/
	export function rotated(point, center, angle) {
	const cos = Math.cos(angle);
	const sin = Math.sin(angle);
	const cx = center.x;
	const cy = center.y;
	return {
	x: cx + cos * (point.x - cx) - sin * (point.y - cy),
	y: cy + sin * (point.x - cx) + cos * (point.y - cy)
	};
	}

[anhln1998]

@stockiNail
Thanks for your feedback, after applying the rotated function there has been some progress, but it seems the coordinates are still not very accurate.

[stockiNail]

can you share the point, center and angle values?

[anhln1998]

@stockiNail
yes here are my points
[
{
"label": "x1",
"x": 17194.194042259387,
"y": 16159.178351604034
},
{
"label": "x2",
"x": 14914.033383944323,
"y": 6626.810839287125
},
{
"label": "y1",
"x": 12805.805957740615,
"y": 8840.821648395962
},
{
"label": "y2",
"x": 15085.966616055677,
"y": 18373.18916071287
}
]

centerX: 332.6225446428572
centerY: 195.98571428571427
angle: 90

[stockiNail]

@anhln1998 as report in the function doc, the angle must be in RADIANS and not DEGREE.

You can use Chart.js helper, function toRadians.

export function toRadians(degrees: number) {
  return degrees * (PI / 180);
}

[anhln1998]

i did it thank you very much @stockiNail