I'm tying to draw two different shadows on some text to create an embossed effect. Here's the portion of my drawInRect where I draw the text with the first shadow (all the variables used are already defined):
CGContextSetShadowWithColor(context, textInnerShadowOffset, textInnerShadowBlurRadius, textInnerShadowColor.CGColor);
[textColor setFill];
[self.text drawInRect:rect withFont:self.font lineBreakMode:self.lineBreakMode alignment:self.textAlignment];
But now I'm faced with the problem of drawing the second shadow. I assume I'll need to change the shadow and draw the text again, but I need to do so without adding another copy of the text.
How can I draw text without really drawing the text itself? Changing the fill color to clearColor doesn't work. I've seen people use clipping masks for this, but AFAICT that will only work for simple shapes, not text.
Alternatively, is there an easier way to draw two shadows on the same text?
Two options, depending on the exact effect you want:
If you want the first, "upper" shadow to also contribute to the second, "lower" shadow underneath it, use a transparency layer.
Set your CGContext's shadow for the "lower" shadow
Create a transparency layer using CGContextBeginTransparencyLayer
Set the context's shadow for the "upper" shadow
Draw your text
End the transparency layer using CGContextEndTransparencyLayer
(Note that transparency layers can be quite expensive. It's best to call CGContextBeginTransparencyLayerWithRect and pass in as small a rect as you can.)
If you want the shadows to be independent -- the only thing that contributes to each shadow is the text -- you'll need to use a trick.
Set up the shadow with an additional large offset, big enough so that you can draw the text outside of the bounds of your context and have the shadow land in the correct place. That way you'll see only the shadow, but not the text.
Figure out what offset is "big enough". It will probably depend on the size of the context you're drawing into (based on your view), and maybe the bounds of the text.
Or, just fudge it: pick an absurdly large value like 5000 pt.
Set up your shadow. Add the big offset to its normal y offset.
Draw the text, offset vertically by the big offset.
Repeat 1-3 for each "lower" shadow, from back to front. Afterwards, draw the text and the "uppermost" shadow last, without the offset.
Related
I'm pretty new to OpenSceneGraph and I have the following problem:
I'm trying to build a 2D Head Up Display out of several images, so that it can resize depending on the screen's resolution. That means I have extra images for the corners and one image for the bar that connects the corners and so on.
Well, that's the idea. But I have no clue how to do that in OpenSceneGraph.
Can anybody help me?
So, when the window resizes, you'll get an event from osgViewer telling you about the change.
You need to resize your viewport when the window size changes, so your HUD geometry has some idea of what the pixel-size of the display is (most of the HUD examples setup for a nominal 1024x768 screen and then just let that stretch around as the window is resized, pretending like the new viewport is still 1024x768).
Once you've resized the viewpoer, you need to rearrange your geometry. Your corner pieces need to be laid out at the fixed pixel size you want them to always appear, then you need your connecting elements to change size, horizontally or vertically, to fill the space between the corner pieces. You usually rely on texture stretching or repeating to fill the space as the piece of geometry gets stretched.
If none of that makes any sense, I can describe more.
I've been looking for a solution for this one all day.
I have 4 NSTextFields (actually subclassed for a few custom operations), which all share the same X position.
The problem is, some have different styles (light, regular, bold) and might have different sizes.
What happens is that, even though the X origin is the same, the 1st letter always has a bit of (consistently different) left margins.
Please see pic: https://dl.dropbox.com/u/1977230/Screen%20Shot%202012-12-11%20at%2017.55.58.png
I want to make sure that all lines start exactly at the same point, say 100px from the left.
Any idea how to override that weird padding?
Cheers
The margin you're talking about I'm pretty sure is the lineFragmentPadding on the NSTextContainer that is used by the NSTextField.
See the NSTextContainer reference:
http://developer.apple.com/library/Mac/#documentation/Cocoa/Reference/ApplicationKit/Classes/NSTextContainer_Class/Reference/Reference.html
And here's a page from the tutorial on Text Layout:
https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/TextLayout/Concepts/CalcTextLayout.html
It states in that article:
The typesetter makes one final adjustment when it actually fits text
into the rectangle. This adjustment is a small amount fixed by the
NSTextContainer object, called the line fragment padding, which
defines the portion on each end of the line fragment rectangle left
blank. Text is inset within the line fragment rectangle by this amount
(the rectangle itself is unaffected). Padding allows for small-scale
adjustment of the text container’s region at the edges and around any
holes and keeps text from directly abutting any other graphics
displayed near the region. You can change the padding from its default
value with the setLineFragmentPadding: method. Note that line fragment
padding isn’t a suitable means for expressing margins; you should set
the NSTextView object’s position and size for document margins or the
paragraph margin attributes for text margins.
Unfortunately, it looks like NSTextField's NSTextContainer and NSLayoutManager are private and inaccessible, but it appears they are accessible in an NSTextView:
https://developer.apple.com/library/mac/#documentation/Cocoa/Reference/ApplicationKit/Classes/NSTextView_Class/Reference/Reference.html#//apple_ref/occ/cl/NSTextView
So that may be the class you need to subclass if you want to have minute control over this kind of functionality.
Have you looked into CoreText? I think it may provide the facilities to do what you're looking for. From the docs...
The Core Text layout engine is designed specifically to make simple text layout operations easy to do and to avoid side effects.
You are able to access "font metrics," which enable you to (from the docs)...
For every font, glyph designers provide a set of measurements, called metrics, which describe the spacing around each glyph in the font. The typesetter uses these metrics to determine glyph placement. Font metrics are parameters such as ascent, descent, leading, cap height, x-height, and so on.
EDIT:
It just may be that NSTextField was not designed for what you are trying to do. NSTextField does custom layout apart from a NSLayoutManager.
You may need to upgrade to a NSTextView, which always has a dedicated NSLayoutManager attached. Apple has some example projects you could search for using NSLayoutManager and NSTextView.
If you're using NSTextField to draw simple static text, take a look at AppKit additions to NSString. Use sizeWithAttributes: to get size of the "text" image. Then use the size to calculate rects for drawing. Finally use one of draw methods to actually draw text. Don't forget to "round" result of sizeWithAttributes! It's not pixel aligned.
But if you need to draw something more complex than simple label, use Core Text. You can find very good example of how to use it in twui source code.
I have a view with custom drawRect method which has two text lines drawn in fixed width.
This view is being redrawn constantly at rate of about 16 timer per second with position of text and content of text changing all the time.
I also need my text to be drawn in such a way that it is clearly visible at any background, and for that purpose I do the following:
CGContextSetTextDrawingMode(ctx, kCGTextStroke); // Border mode
[string drawAtPoint:point withFont:font];
CGContextSetTextDrawingMode(ctx, kCGTextFill); // Text mode
[string drawAtPoint:point withFont:font];
This code draws the text in border mode with fixed line width, and then draws the text again at same position but in fill mode. In this way I get a blue text with white border around each letter.
The result is absolutely satisfactory for me except the performance.
Using Time Profiler I've noticed that about 70% of time spent for drawing the whole view is spent on execution of drawing the text in border (stroke) mode. But drawing in fill mode takes only 3% of the whole view drawing time. I think that this is not efficient considering the frequency of redrawing of the view.
So does anybody know how to draw the text with border around each letter in more efficient way?
Two options:
Use a shadow instead of drawing the outline: CGContextSetShadowWithColor
Cache the image of the string and it's outline using a CGLayer: CGLayerCreateWithContext
Explanation for 2:
Drawing text is highly optimized for the standard case where the letters are just filled with one color. Individual glyphs (letters) are not rendered from the outline each time. Instead the glyphs are drawn only once into buffered images which are cached and reused.
Since drawing outlines is seldom there's probably no caching of glyphs or other optimizations for this mode. So the idea is to do the caching yourself: Draw the whole string into one image, keep that image around and draw it instead of the text from within your drawRect: method.
There are several options how to do that:
Use a CGBitmapContext
Use UIGraphicsBeginImageContext
Use a CGLayer
I have a UIView that allows the user to draw a line (myLine) on the screen. This UIView is directly above another UIView that has several shapes drawn with CGPaths. When the user taps on one of these shapes I need to erase any portion of myLine that is above one of these other shapes as if I was erasing the pixels with an eraser.
What would be the best way to approach this?
I need the light blue part of the line to be erased leaving the dark blue portion
1) (current approach partially works) I'm able to use the path shape from the bottom view as a mask in the top view but it is only masking the UIView. If I later need to change the mask location the vector strokes are still there. (I know this is because all off my lines are being redrawn in the drawrect of the view)
2) After I draw each line should I somehow cache the drawing as an image and THEN
slice out the parts inside the triangle?
3)Is there a better approach to this?
This link provided the answer:
Building a Simple Drawing App
I cache the drawing to a bitmap context and then clip out
the unneeded parts of the bitmap.
I'm looking to implement something like the famous "letterpress" effect in my application. Here's what I'm talking about: (just a quick example made in PShop)
As you can see, it looks like it's pressed into the background. I wonder if it's possible to do something like this on the Mac dynamically. Is there a way? Thanks!
You can do the gradient fill portion of the text using the code I provide in this answer. Check the coordinate space first, because I described that for the iPhone, which has an inverted Y axis when compared to the Mac's normal Quartz coordinates.
The text is first used to create a clipping path, and the gradient is drawn within that path.
As far as the internal shadow, you might be able to draw this after the gradient is drawn by using CGContextSetShadowWithColor() with an appropriate downward offset and black color, then drawing the text again using just the stroke of the text. deanWombourne has some sample code for a similar task in his answer here.
Draw the text with a normal font to create a black and white bitmap of the text.
Draw another image that is is the same size and completely filled with the gray-to-white gradient you have above.
Create a completely white image with the same size as your other images.
Draw your back and white text image (1) onto the white image (3) with NSCompositeDestinationOut.
This gives you a white image with your text cut out.
Draw the white image with the text cut out on top of the gradient image and apply a shadow while drawing.