Home » Eclipse Projects » Remote Application Platform (RAP) » Rotated Text in RAP(How to draw rotated text in RAP)
Rotated Text in RAP [message #1076027] |
Tue, 30 July 2013 10:40  |
Eclipse User |
|
|
|
Does someone have an example of how to render rotated text in RAP?
90'/180'/270' are sufficient - it doesn't have to be an arbitrary angle.
In SWT you can use a GC and an Image like this:
public Image createRotatedText(String text, Font font, Color foreground, Color background, int style) {
// Get the current display
Display display = Display.getCurrent();
if (display == null) SWT.error(SWT.ERROR_THREAD_INVALID_ACCESS);
// Create a GC to calculate font's dimensions
GC gc = new GC(display);
gc.setFont(font);
// Determine string's dimensions
FontMetrics fm = gc.getFontMetrics();
Point pt = gc.textExtent(text);
// Dispose that gc
gc.dispose();
// Create an image the same size as the string
Image stringImage = new Image(display, pt.x, pt.y);
// Create a gc for the image
gc = new GC(stringImage); // THIS CAUSES RAP/TABRIS A PROBLEM!!!
gc.setFont(font);
gc.setForeground(foreground);
gc.setBackground(background);
// Draw the text onto the image
gc.drawText(text, 0, 0);
// Draw the image vertically onto the original GC
Image image = createRotatedImage(stringImage, style);
// Dispose the new GC
gc.dispose();
// Dispose the horizontal image
stringImage.dispose();
// Return the rotated image
return image;
}
public Image createRotatedImage(Image image, int style) {
// Get the current display
Display display = Display.getCurrent();
if (display == null) SWT.error(SWT.ERROR_THREAD_INVALID_ACCESS);
// Use the image's data to create a rotated image's data
ImageData sd = image.getImageData();
ImageData dd = new ImageData(sd.height, sd.width, sd.depth, sd.palette);
// Determine which way to rotate, depending on up or down
boolean up = (style & SWT.UP) == SWT.UP;
// Run through the horizontal pixels
for (int sx = 0; sx < sd.width; sx++) {
// Run through the vertical pixels
for (int sy = 0; sy < sd.height; sy++) {
// Determine where to move pixel to in destination image data
int dx = up ? sy : sd.height - sy - 1;
int dy = up ? sd.width - sx - 1 : sx;
// Swap the x, y source data to y, x in the destination
dd.setPixel(dx, dy, sd.getPixel(sx, sy));
}
}
// Create the vertical image
return new Image(display, dd);
}
But Image is not implemented as a Drawable in RAP, so this solution is not an option.
Thus, the line "gc = new GC(stringImage);" does not compile.
Thanks, John
|
|
|
Re: Rotated Text in RAP [message #1077097 is a reply to message #1076027] |
Thu, 01 August 2013 04:41   |
Eclipse User |
|
|
|
Hi.
Drawing on images in RWT would be very hard to implement.
I could imagine a relatively simple solution based on CSS3
transformations applied on labels. However, there would also be some
difficulties:
- only supported in modern browser [1]
- compute size method would not work correctly, manual layout required
- attaching CSS to the label would require messing with internals, so
the solution would be a semi-hack and not 100% future proof.
If the text does not have to be generated dynamically, I would just use
static images. Otherwise this above solution is the only one I can think
of right now.
Greetings,
Tim
[1] http://caniuse.com/#feat=transforms2d
Am 30.07.2013 16:40, schrieb John Gymer:
> Does someone have an example of how to render rotated text in RAP?
> 90'/180'/270' are sufficient - it doesn't have to be an arbitrary angle.
> In SWT you can use a GC and an Image like this:
>
>
> public Image createRotatedText(String text, Font font, Color
> foreground, Color background, int style) {
> // Get the current display
> Display display = Display.getCurrent();
> if (display == null) SWT.error(SWT.ERROR_THREAD_INVALID_ACCESS);
>
> // Create a GC to calculate font's dimensions
> GC gc = new GC(display);
> gc.setFont(font);
>
> // Determine string's dimensions
> FontMetrics fm = gc.getFontMetrics();
> Point pt = gc.textExtent(text);
>
> // Dispose that gc
> gc.dispose();
>
> // Create an image the same size as the string
> Image stringImage = new Image(display, pt.x, pt.y);
>
> // Create a gc for the image
> gc = new GC(stringImage); // THIS CAUSES RAP/TABRIS A PROBLEM!!!
> gc.setFont(font);
> gc.setForeground(foreground);
> gc.setBackground(background);
>
> // Draw the text onto the image
> gc.drawText(text, 0, 0);
>
> // Draw the image vertically onto the original GC
> Image image = createRotatedImage(stringImage, style);
>
> // Dispose the new GC
> gc.dispose();
>
> // Dispose the horizontal image
> stringImage.dispose();
>
> // Return the rotated image
> return image;
> }
>
> public Image createRotatedImage(Image image, int style) {
> // Get the current display
> Display display = Display.getCurrent();
> if (display == null) SWT.error(SWT.ERROR_THREAD_INVALID_ACCESS);
>
> // Use the image's data to create a rotated image's data
> ImageData sd = image.getImageData();
> ImageData dd = new ImageData(sd.height, sd.width, sd.depth,
> sd.palette);
>
> // Determine which way to rotate, depending on up or down
> boolean up = (style & SWT.UP) == SWT.UP;
>
> // Run through the horizontal pixels
> for (int sx = 0; sx < sd.width; sx++) {
> // Run through the vertical pixels
> for (int sy = 0; sy < sd.height; sy++) {
> // Determine where to move pixel to in destination
> image data
> int dx = up ? sy : sd.height - sy - 1;
> int dy = up ? sd.width - sx - 1 : sx;
>
> // Swap the x, y source data to y, x in the destination
> dd.setPixel(dx, dy, sd.getPixel(sx, sy));
> }
> }
>
> // Create the vertical image
> return new Image(display, dd);
> }
>
>
>
> But Image is not implemented as a Drawable in RAP, so this solution is
> not an option.
> Thus, the line "gc = new GC(stringImage);" does not compile.
>
> Thanks, John
--
Tim Buschtöns
Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/
Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
|
|
| | | |
Re: Rotated Text in RAP [message #1080975 is a reply to message #1079958] |
Tue, 06 August 2013 12:26   |
Eclipse User |
|
|
|
John,
Unfortunately, what you are trying to do will not work. The custom variant is only able to theme RWT widgets using predefined properties. It uses CSS as a standard file format for but interprets and applies the theme on the RAP server.
To use custom CSS, you can use a widget such as Label that supports HTML markup[1]. Then you can specify the text of the widget to include the CSS transform:
<span style="height: 50px;width:16px;display:block;"><span style="top: -16px;position: relative;-webkit-transform-origin: bottom left;-ms-transform-origin: bottom left;transform-origin: bottom left; -webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);display:block">Rotated</span></span>
As you can see there is a caveat to this approach, if you do not specify the box size in css RAP does not understand that the text was rotated and so computes the size incorrectly. That is the reason for the hardcoded sizes and the outer span in the code above. Obviously those sizes will change based on the text, so you would want a way to compute them at runtime. For example, you could render the text horizontally then query the size of the Label widget. Then you could set the text to include the correct sizes. Also note the transform-origin and the offset needed to align the rotated text properly. To support different browsers requires the use of multiple property names, resulting in some rather ugly code.
Another alternative is to draw the text into an image using AWT Graphics2D. See the RAP FAQ for dynamic images[2]. This is almost certainly the simplest solution, and I would recommend going this route unless you really just can't use images.
The final option is to use a custom widget[3]. At my last job, our team took this approach (back in the RAP 1.2 or 1.3 days). We used an html5 canvas to draw rotated text in Firefox and Chrome/Safari, and used a div with the CSS "writing-mode" property for IE. We also dynamically adjusted the font size to fit the available space (which is somewhat backwards from the typical SWT model). I no longer have access to this code, but I will talk to some of my colleagues and see if they could make it available. I wouldn't recommend something like this for a beginner though.
[1] http://eclipse.org/rap/developers-guide/devguide.php?topic=markup.html&version=2.1
[2] http://wiki.eclipse.org/RAP/FAQ#How_to_display_dynamically_created_images.3F
[3] http://eclipse.org/rap/developers-guide/devguide.php?topic=custom-widget.html&version=2.1
Good luck! I am happy to help if you have further questions.
Hope that helps,
Cole Markham
|
|
| |
Re: Rotated Text in RAP [message #1086467 is a reply to message #1085768] |
Wed, 14 August 2013 04:35  |
Eclipse User |
|
|
|
Hi
Am 13.08.2013 12:48, schrieb John Gymer:
> Hi Cole,
> Thanks for your hints there... just got around to trying them, and the
> markup on a Label works a treat!
Congrats. I didn't even think about the MARKUP feature, so thanks to Cole!
> Wonder if there is a way to do it with Tabris on a device now... ?!
Nope, Tabris does and can not support MARKUP_ENABLED. I asked them, and
the only way seems to be to use images.
Greetings,
Tim
> Cheers, John
>
--
Tim Buschtöns
Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/
Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
|
|
|
Goto Forum:
Current Time: Tue Jul 22 19:20:36 EDT 2025
Powered by FUDForum. Page generated in 0.05263 seconds
|