Is there a method to rotate a path?
-
It would make a few things simpler over here if there is a method for path rotation, but I don't see anything in the docs which matches that description (such as "transform").
Is the only way to rotate by doing the trig on my original path? Just wondering if there is something more convenient.
I do know that I can rotate the canvas, but I need the actual path to rotate so I can use path.contains() for mouse callbacks. -
This post is deleted! -
@VirtualVirgin In the LAF Library, there is an example called “Rotating Tape Reel Icon Knobs” which uses path rotation method.
hise_laf_library/Examples.md at main · christoph-hart/hise_laf_library
A public library of HISE UI Customizations (LookAndFeel) with contributions from various developers - hise_laf_library/Examples.md at main · christoph-hart/hise_laf_library
GitHub (github.com)
-
@orange Thank you, but that rotates the canvas, not the path itself, and as I mentioned above I need to rotate the path itself in order to get the "hit zone" for mouse events in the mouse callbacks (using path.contains()).
-
Now I'm trying to make an inline function to rotate a path:
inline function rotatePath(path, angle)
But the problem I am running into is that I cannot find any way to "unpack" the path coordinates to apply transformations to them.
Javascript has path.getPoints(), but I see no analog in HISE. -
@VirtualVirgin Instead of making a function to rotate a path, why not make a function to create a rotated path. You can pass in the data you would have used to create the initial path.
-
@d-healey said in Is there a method to rotate a path?:
@VirtualVirgin Instead of making a function to rotate a path, why not make a function to create a rotated path. You can pass in the data you would have used to create the initial path.
So based on your suggestion I came up with this and it seems to work:
inline function createRotatedPath(pathArray, angle, area) { local rad = Math.toRadians(angle); local cosA = Math.cos(rad); local sinA = Math.sin(rad); local path = Content.createPath(); local rotationCenterX = area[0] + (area[2] * 0.5); local rotationCenterY = area[1] + (area[3] * 0.5); for (i = 0; i < pathArray.length; i++) { local x = pathArray[i][0]; local y = pathArray[i][1]; local newX = (x - rotationCenterX) * cosA - (y - rotationCenterY) * sinA + rotationCenterX; local newY = (x - rotationCenterX) * sinA + (y - rotationCenterY) * cosA + rotationCenterY; if (i == 0) path.startNewSubPath(newX, newY); else path.lineTo(newX, newY); } path.closeSubPath(); return path; }
The pathArray is a 2D array of x,y points
i.e.
[[x,y],[x,y] etc..]