Rotating a text field?
-
- VIP Livecode Opensource Backer
- Posts: 1005
- Joined: Sat Apr 08, 2006 3:06 pm
- Location: Overland Park, Kansas
- Contact:
Rotating a text field?
I'm incorporating some icon fonts into a project so that I don't have to worry about creating retina versions of buttons using Photoshop. I want to animate the "chasing arrows" to show internet activity. The clock example provides an example of how I could approach this. The only thing I don't know how to draw text rotated.
I'm guessing that since the graph example doesn't rotate the text on the Y axis that this isn't possible. Is it? If not, is it planned?
I'm guessing that since the graph example doesn't rotate the text on the Y axis that this isn't possible. Is it? If not, is it planned?
Trevor DeVore
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
Re: Rotating a text field?
@trevordevore: In theory it should work - drawing text on the canvas is subject to the same transform as all other operations. In practice, I'm not sure we've yet tested this on all platforms (text rendering is highly platform-specific and the existing engine code doesn't use transformed text)
-
- VIP Livecode Opensource Backer
- Posts: 1005
- Joined: Sat Apr 08, 2006 3:06 pm
- Location: Overland Park, Kansas
- Contact:
Re: Rotating a text field?
Ah, I see. So I have some text rotating now but I'm having trouble getting it to rotate around the center of the text. I still need to get back up to speed on transformation matrices. I'm drawing the text like this:
I haven't come up with the proper mix of transformations to the canvas that will rotate the text around the center of the text. I keep getting rotations around the top left. Can you provide some guidance here?
Code: Select all
variable tBounds as Rectangle
measure "A" on this canvas
put the result into tBounds
fill text "A" at top left of rectangle [0,0,the width of tBounds, the height of tBounds] on this canvas
Trevor DeVore
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
-
- Posts: 10
- Joined: Mon Apr 22, 2013 3:29 pm
- Location: Edinburgh
- Contact:
Re: Rotating a text field?
Perhaps the simplest way of thinking about this is in terms of transforming the canvas. As an example, here's a handler that will draw rotated text centred on a given point:
Note that in this example, the text will be rotated around the centre of its bounds, whereas it may be preferable to rotate around the middle of the baseline, in which case replace the "fill text ... " line with:
That way, the height of the text won't interfere with its placement.
Ian.
Code: Select all
// function which returns the center point of a rectangle
public handler rectCenter(in pRect as Rectangle) as Point
return point [the left of pRect + the width of pRect / 2, the top of pRect + the height of pRect / 2]
end handler
public handler drawTextCenteredAtPointWithRotation(in pText as string, in pPoint as Point, in pAngle as number) as undefined
save state of this canvas
// Move the canvas origin to the given point
translate this canvas by [the x of pPoint, the y of pPoint]
// Rotate the canvas
rotate this canvas by pAngle
// Find the center-point of the text
variable tBounds
measure pText on this canvas
put the result into tBounds
variable tCenter
put rectCenter(tBounds) into tCenter
// Draw the text, offsetting by the distance to the center point of the text bounds
fill text pText at point [- the x of tCenter, - the y of tCenter] on this canvas
restore state of this canvas
end handler
Code: Select all
fill text pText at point [- the x of tCentre, 0] on this canvas
Ian.
Ian Macphail, LiveCode Ltd.
-
- VIP Livecode Opensource Backer
- Posts: 1005
- Joined: Sat Apr 08, 2006 3:06 pm
- Location: Overland Park, Kansas
- Contact:
Re: Rotating a text field?
Thanks livecodeian!
I have a working example now and I've posted the code. I'm using the bounds of the text character to determine the translation point as I want the widget to be the exact size I need. Here is a gist:
https://gist.github.com/trevordevore/09 ... 2d1c54ec1d
It just requires that you have FontAwesome installed:
http://fortawesome.github.io/Font-Awesome/
The only issue I'm still seeing is that the dots in my animation seem to jump around a bit. If you look at the example animations on the following page it doesn't seem to do that.
http://fortawesome.github.io/Font-Awesome/examples/
I suspect a rounding error of some sort but I haven't been able to determine what it is. If anyone has any ideas please let me know.
I have a working example now and I've posted the code. I'm using the bounds of the text character to determine the translation point as I want the widget to be the exact size I need. Here is a gist:
https://gist.github.com/trevordevore/09 ... 2d1c54ec1d
It just requires that you have FontAwesome installed:
http://fortawesome.github.io/Font-Awesome/
The only issue I'm still seeing is that the dots in my animation seem to jump around a bit. If you look at the example animations on the following page it doesn't seem to do that.
http://fortawesome.github.io/Font-Awesome/examples/
I suspect a rounding error of some sort but I haven't been able to determine what it is. If anyone has any ideas please let me know.
Trevor DeVore
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
-
- VIP Livecode Opensource Backer
- Posts: 1005
- Joined: Sat Apr 08, 2006 3:06 pm
- Location: Overland Park, Kansas
- Contact:
Re: Rotating a text field?
Trevor DeVore
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder