image rotation
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
image rotation
Hi, I'm making a clock app, and of course I need to rotate the hands of the clock (it's a retro clock app). So the hands have to rotate around a point that is not their exact center.
I've been able to create a png that is almost twice the length of the actual hand, so that the rotation point is at the base of the hand.
However, other tools I've worked with (e.g. Flash) allowed me to set the registration point of the image, which it would then rotate around. Does LC have any similar capability? It would make the project easier.
I've been able to create a png that is almost twice the length of the actual hand, so that the rotation point is at the base of the hand.
However, other tools I've worked with (e.g. Flash) allowed me to set the registration point of the image, which it would then rotate around. Does LC have any similar capability? It would make the project easier.
-
- Livecode Opensource Backer
- Posts: 9388
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: image rotation
You can make a clock out of a series of layered SVG widgets.
This stack of mine will import monochrome SVG images from Inkscape into the LiveCode SVG widget:
This stack of mine will import monochrome SVG images from Inkscape into the LiveCode SVG widget:
-
- VIP Livecode Opensource Backer
- Posts: 9669
- Joined: Wed May 06, 2009 2:28 pm
- Location: New York, NY
Re: image rotation
Hi.
Two things.
1- Widgets.
2- In LC "proper", you might create a line graphic, and remember line 1 of the points. That will be your rotation center. Then you can set the endPoint (line 2 of the points) to a series of either predetermined or calcualted points, all lying on the circumference of a circle of whatever readius you like.
Craig Newman
Two things.
1- Widgets.
2- In LC "proper", you might create a line graphic, and remember line 1 of the points. That will be your rotation center. Then you can set the endPoint (line 2 of the points) to a series of either predetermined or calcualted points, all lying on the circumference of a circle of whatever readius you like.
Craig Newman
-
- Livecode Opensource Backer
- Posts: 9388
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: image rotation
Hmm... thanks, I like the idea of using an SVG for scalability, but I don't see a way to have a drop shadow with it, is that possible?
Re: image rotation
So I was able to save an SVG from Affinity Designer, open the doc in TextEdit, and . paste the raw SVG path into the "iconPath" field in LC, et voila, instant SVG. I then put it in a group, and added the dropshadow to the group, and now I have an SVG clock hand with a drop shadow!
BUT... (and as Peewee Herman says, "Everybody's got a big 'BUT'"), when I rotate the SVG, it scales to fit in the bounding box--which is looks very strange (and obviously isn't the look I was going for
BUT... (and as Peewee Herman says, "Everybody's got a big 'BUT'"), when I rotate the SVG, it scales to fit in the bounding box--which is looks very strange (and obviously isn't the look I was going for
-
- Livecode Opensource Backer
- Posts: 9388
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: image rotation
There is a way to stop that bounding box scaling, but I cannot remember what it is:
Klaus ?
Jacque ?
Klaus ?
Jacque ?
-
- Livecode Opensource Backer
- Posts: 9388
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: image rotation
Probably the best way to circumvent this problem (no pun intended) is to "embed" your
clock hands inside a thin circle.
As making these artefacts is a "right fiddle" I've made some for you
NOT perfect, but a lot better than a poke in the face with a large stick!
clock hands inside a thin circle.
As making these artefacts is a "right fiddle" I've made some for you
NOT perfect, but a lot better than a poke in the face with a large stick!
Re: image rotation
Ha! I was thinking along the same lines, wondering if it would be possible to define a path that describes an object 0 px wide, or something like that, so as to offset the hand itself.richmond62 wrote: ↑Sun Jan 07, 2018 12:06 pmProbably the best way to circumvent this problem (no pun intended) is to "embed" your
clock hands inside a thin circle.
Thanks, I'll continue to mess with it!
Re: image rotation
Hi yeldarb,
Download the svg clock stack attached to this forum thread:
http://forums.livecode.com/viewtopic.php?f=10&t=29999
Before opening the stack, compile and install Peter Thirkell's widget: Multicolor SVG
http://forums.livecode.com/viewtopic.ph ... 30#p154437
Write again if you have any problem opening this stack or compiling the Multicolor widget.
Al
Re: image rotation
Actually that is quite possible, it is just slightly more complicated than just doubling the size of the hand image and rotating it on center.
The reason doubling is easier in all ways is that if your going for an analog clock face (circle, square, whatever), you already take up the space you need for doubling the hand size.
Re: image rotation
"Write again if you have any problem opening this stack or compiling the Multicolor widget."
Al, thanks so much for that! I've never messed with LCB, I was able to get the widget installed. I'm not sure where the API dictionary gets installed.
The SVG rotates without scaling, which is exactly what I need! However, I have a fairly complex vector and cutting and pasting the SVG data (from Affinity Designer) doesn't work for that. Not sure why, it works for a simpler vector.
Al, thanks so much for that! I've never messed with LCB, I was able to get the widget installed. I'm not sure where the API dictionary gets installed.
The SVG rotates without scaling, which is exactly what I need! However, I have a fairly complex vector and cutting and pasting the SVG data (from Affinity Designer) doesn't work for that. Not sure why, it works for a simpler vector.
Re: image rotation
Thanks for your help. I've attached a screen shot of the first card of my app. As you can see, I've got four hands: seconds, minutes, hours, and days. The moon phase is also active, but it's a png. The other hands are all SVGs using the SVG Color widget.
Here's how I created them:
1. I created the vector artwork in Affinity Designer.
2. In AD I added a circle the radius of the bounding (square) artboard, selected on export but with no fill or stroke, so not visible (exports as "<circle cx="300" cy="300" r="300" style="fill:none;"/>"). This enables the SVG to rotate perfectly in the LC bounding box (otherwise the "maintainAspectRatio" would force it to expand to the bounding box"). I also had to reverse the curve on one of the open areas; otherwise LC didn't render it as an opening in the graphic.
3. I exported from AD as an SVG with the "Flatten Transforms" option on.
4. I opened the SVG in TextEdit.
5. I copied the path data and used an online regex editor to remove the fractional pixel values. (https://regexr.com/ /\.\d*/g) This reduced the path text by half, with no detectable loss in detail. Not required, but made working with the paths a bit easier.
6. I had to add fill info to the path I created since Designer didn't do it for some reason: style="fill:rgb(0,0,0)". Here's an example of the entire iconPathsTagData:
The hands now rotate perfectly, and scale to whatever size. Thanks for your help!
Here's how I created them:
1. I created the vector artwork in Affinity Designer.
2. In AD I added a circle the radius of the bounding (square) artboard, selected on export but with no fill or stroke, so not visible (exports as "<circle cx="300" cy="300" r="300" style="fill:none;"/>"). This enables the SVG to rotate perfectly in the LC bounding box (otherwise the "maintainAspectRatio" would force it to expand to the bounding box"). I also had to reverse the curve on one of the open areas; otherwise LC didn't render it as an opening in the graphic.
3. I exported from AD as an SVG with the "Flatten Transforms" option on.
4. I opened the SVG in TextEdit.
5. I copied the path data and used an online regex editor to remove the fractional pixel values. (https://regexr.com/ /\.\d*/g) This reduced the path text by half, with no detectable loss in detail. Not required, but made working with the paths a bit easier.
6. I had to add fill info to the path I created since Designer didn't do it for some reason: style="fill:rgb(0,0,0)". Here's an example of the entire iconPathsTagData:
Code: Select all
<circle cx="300" cy="300" r="300" style="fill:none;"/>
<path d="M299,554C278,528 280,491 292,462C292,462 292,399 292,323C273,315 273,287 292,279C292,212 292,145 292,78C292,53 292,44 295,19C295,15 297,5 300,1L300,1C302,5 304,15 304,19C307,44 307,53 307,78C307,145 307,212 307,279C326,287 326,315 307,323C307,399 307,462 307,462C319,491 321,528 300,554L299,554" style="fill:rgb(0,0,0)"/>
Re: image rotation
Looks very nice, great job.