Rotating a text field?

LiveCode Builder is a language for extending LiveCode's capabilities, creating new object types as Widgets, and libraries that access lower-level APIs in OSes, applications, and DLLs.

Moderators: LCMark, LCfraser

Post Reply
trevordevore
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1005
Joined: Sat Apr 08, 2006 3:06 pm
Location: Overland Park, Kansas
Contact:

Rotating a text field?

Post by trevordevore » Fri Feb 20, 2015 10:04 pm

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?
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

LCMark
Livecode Staff Member
Livecode Staff Member
Posts: 1206
Joined: Thu Apr 11, 2013 11:27 am

Re: Rotating a text field?

Post by LCMark » Sun Feb 22, 2015 10:36 am

@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)

trevordevore
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1005
Joined: Sat Apr 08, 2006 3:06 pm
Location: Overland Park, Kansas
Contact:

Re: Rotating a text field?

Post by trevordevore » Sun Feb 22, 2015 3:23 pm

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:

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
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?
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

livecodeian
Posts: 10
Joined: Mon Apr 22, 2013 3:29 pm
Location: Edinburgh
Contact:

Re: Rotating a text field?

Post by livecodeian » Mon Feb 23, 2015 1:25 pm

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:

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
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:

Code: Select all

  fill text pText at point [- the x of tCentre, 0] on this canvas
That way, the height of the text won't interfere with its placement.

Ian.
Ian Macphail, LiveCode Ltd.

trevordevore
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1005
Joined: Sat Apr 08, 2006 3:06 pm
Location: Overland Park, Kansas
Contact:

Re: Rotating a text field?

Post by trevordevore » Mon Feb 23, 2015 6:49 pm

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.
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

trevordevore
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1005
Joined: Sat Apr 08, 2006 3:06 pm
Location: Overland Park, Kansas
Contact:

Re: Rotating a text field?

Post by trevordevore » Sat Feb 28, 2015 4:56 am

For those following along at home:

http://quality.runrev.com/show_bug.cgi?id=14693
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

Post Reply

Return to “LiveCode Builder”