SetWorldTransform() and font rotation - graphics

I'm trying to display text on a Windows control, rotated by 90 degrees, so that it reads from 'bottom to top' so to speak; basically it's the label on the Y axis of a graph.
I got my text to display vertically by changing my coordinate system for the DC by using SetGraphicsMode(GM_ADVANCED) and then using
XFORM transform;
const double angle = 90 * (boost::math::constants::pi<double>() / 180);
transform.eM11 = (FLOAT)cos(angle);
transform.eM12 = (FLOAT)(-sin(angle));
transform.eM21 = (FLOAT)sin(angle);
transform.eM22 = (FLOAT)cos(angle);
transform.eDx = 0.0;
transform.eDy = 0.0;
dc.SetWorldTransform(&transform);
Now when I run my program, the rotated text looks different from the same text when it's shown 'normally' (horizontally). I've tried with a fixed-width (system) font and the default WinXP font. The system font comes out look anti-aliased and the other one looks almost as if it's being drawn in a 1-pixel smaller font than the horizontal version, although they are drawn using the same DC and with no font changes in between. It looks as if Windows detects that I'm drawing a font not along the normal (0 degrees) axis and that it's trying to 'optimize' by anti-aliasing.
Now I don't want any of that. I just want to same text that I draw horizontally to be drawn exactly the same, except 90 degrees rotated, which is possible since it's a rotation of exactly 90 degrees. Does anyone know what's going on and whether I can change this easily to work as I want? I'd hate to have gone through all this trouble and finding up that I will have to resort to rendering to an off-screen bitmap, rotating it using a simple pixel-by-pixel rotation and having to bitblt that into my control :(

Have you tried setting the nEscapement and nOrientation parameters when you create the font instead of using SetWorldTransform? See CreateFont for details.

Related

How to clip vega-lite text inside a rect?

In a webpage created with node/webpack, vega-lite, and vegaEmbed, I have a layer with rect marks with short annotations inside them using text marks. I'd like to clip the text to its surrounding rect but haven't figured out a way to do this and hope someone can point me in the right direction.
I realize text has a limit property in pixel units. If I could determine the pixel units of my rect marks (I don't know how to do this), using limit seems like a reasonable approach.
Also, if I knew the pixel extents of my rectangle, I can then write code to align the text within the rect which would be desirable. Currently I just use the same x as the rect, with a dx offset.
I've read about background for text which is a similar problem, but not the same.

AndroidPlot - Position TextLabelWidget not consistently on different devices

I have a chart show info of apps, but when run it on devices android. The position of text on chart not consistently.
These images illustrate the problem: https://drive.google.com/folderview?id=0B7-CxJHQ5ZnjYjVlTlFQdElWRGM&usp=sharing
I use TextLabelWidget in AndroidPlot. How to keep position of TextLabelWidget on chart with the same image1 in link above on devices?
The problem appears to be that your plot area is set to fill the width of the screen and since the bars are evenly distributed in that space, their x positions are essentially fractions of the screen width.
At the same time you have labels that appear to be positioned using absolute positioning. As an example, this code will position 4 labels at 0%, 25%, 50% and 75% screen width, 80 pixels down from the top of the screen:
txtWidget1.position(0, XLayoutStyle.RELATIVE_TO_LEFT, PixelUtils.dpToPix(80), YLayoutStyle.ABSOLUTE_FROM_TOP, AnchorPosition.LEFT_TOP);
txtWidget2.position(0.25f, XLayoutStyle.RELATIVE_TO_LEFT, PixelUtils.dpToPix(80), YLayoutStyle.ABSOLUTE_FROM_TOP, AnchorPosition.LEFT_TOP);
txtWidget3.position(0.50f, XLayoutStyle.RELATIVE_TO_LEFT, PixelUtils.dpToPix(80), YLayoutStyle.ABSOLUTE_FROM_TOP, AnchorPosition.LEFT_TOP);
txtWidget4.position(0.75f, XLayoutStyle.RELATIVE_TO_LEFT, PixelUtils.dpToPix(80), YLayoutStyle.ABSOLUTE_FROM_TOP, AnchorPosition.LEFT_TOP);
There are some other factors that you are also probably going to need to deal with such as bar width but this should get you closer. You may find this doc useful as far as a guide for the different positioning methods.
Another tool to consider using if you aren't using it already is the Configurator. This will let you set your positions etc. inside xml and override values based on screen size, orientation, etc.

How computers draw transparency?

In real life, transparency (or opacity) can be explained in a "simple" way by how much an object can reflect light, or how much of it pass through. So if an object is transparent light pass trough it, reflect on whatever is behind it and the light get back to us.
How computers simulate this behavior? I mean, we as developers, have many abstractions and APIs to set alpha levels and opacities of our pixels but how computers translates this into a bitmap to the screen?
What I think is happening: Both back and front colors are "combined" to result in a third color and this is then draw to screen. Eg: transparent white over back red on screen will be painted as pink!
Yes, you have it right. The "back" color is combined with the "front" color in proportion to the opacity of the front color.
For a single color channel, e.g. red, with opacity from 0 to 1:
new = old * (1 - opacity) + front * opacity

Color Space Inversion for contrasting grid

I have a randomly colored background that is split into solid colored rectangles. I want to draw a grid over the rectangles (this is not the problem). The issue is because of the random colors I cannot hard-code the grid color because it may not show up.
Another way to think about this is plotting a grid on a plot of a surface f(x,y). If the grid color happens to be the same color of the function (however it is defined) then it won't be visible.
I would like to take the background color and compute a new color (either grayscale or similar to the background color) that is contrasted with the color so it can easily be seen (but not distracting such as pure white on pure black).
I've tried using the luminance and weighted luminance but it doesn't work well for all colors. I've also tried gamma correcting the colors but it also does not work well.
I would also like the grid color to be as uniform as possible (I could possibly compute the adjacent grid colors to blend in). It is not that important but would be nice to have some uniformity.
The code I'm working with is based around
//byte I = (byte)(0.2*R + 0.7*G + 0.1*B);
//byte I = (byte)(R + G + B)/3.0);
byte I = (byte)(Math.Max(Bar.Background.R, Math.Max(Bar.Background.G, Bar.Background.B)));
if (I < 120)
I = (byte)(I + 30);
else
I = (byte)(I - 30);
//I = (byte)(Math.Pow(I/255.0, 1/2.0)*255);
I've also tried gamma correcting the rgb's first.
Anyone have any ideas?
The colors that offer the most contrast are colors that are fully saturated. This offers you a way to find color that may work(but not necessarily for many reasons). Essentially you pick the color the furthest away along the line connecting color and the fully saturated color.

Allegro 5 game: How do I set a resolution that is appropriate for the aspect ratio of the screen?

Using Allegro 5, how do initialize a game in fullscreen mode so that it respects the format of the screen (widescreen 16:9 vs normal 3:4)
al_create_display (w, h)
Let's you select any ratio you want. For example you can set 640x480, regardless of the screen size. But it will look weird on a widescreen monitor.
How do you know which ratio to use?
Hm, I can answer this as well - use al_get_monitor_info().
al_get_monitor_info(0, &info);
w = info.x2 - info.x1; /* Assume this is 1366 */
h = info.y2 - info.y1; /* Assume this is 768 */
al_create_display(w, h);
Now you can either render everything in a 640x480 rectangle centered within 1366x768 to make it appear pixel-perfect, or alternatively scale your graphics up by 768/480 and keep two black bars to the left and right. If you use OpenGL for rendering, both are very easy to do by simply altering the projection matrix.

Resources