Creating a PNG with rounded corners, background colour + gradient with alpha for use as a background
Creating a PNG with rounded corners, background colour + gradient with alpha for use as a background
- Subject: Creating a PNG with rounded corners, background colour + gradient with alpha for use as a background
- From: Michael Robinson <email@hidden>
- Date: Thu, 2 Oct 2008 12:06:32 +1300
I'm making a plugin for Rapidweaver, and need to create a background
image that has rounded corners + a border, an optional gradient, an
optional background colour (that may show through the gradient
depending on gradient's opacity).
When I've got the image drawing correctly, depending on the image's
size, I plan to chop it up and use divs to display the various pieces;
or just use it as a solid image - if it is under say, 50k for a
400x400 image.
I'm more interested in getting the image drawn correctly first.
So far I have successfully:
Created an NSBitmapImageRep of user-defined size.
Drawn a border around the image of the user-defined width + colour
Filled the image with user-defined colour + alpha
Filled the image with user-defined 2 colour gradient + alpha
Saved the image to file
Thanks to the genius-level knowledge of the members of this list, I
have been able to get the above functions working fine - here is an
example: http://pagesofinterest.net/code/slider_progress_report/index.html
I would now like to draw the corners. As the user has the option of
defining corner type and radius for each corner, I need to draw _each_
corner separately - so when the code is sorted I can just replace the
start/end/radius values with values computed from user input.
There will be: rounded, notch or bevel corners offered, but I'm
starting with rounded as they seem the most difficult, and I imagine I
will be able to implement the remaining two with no trouble after
learning how to create the rounded corners.
I think I should be using [aPath
appendBezierPathWithArcFromPoint:<#(NSPoint)point1#>
toPoint:<#(NSPoint)point2#> radius:<#(CGFloat)radius#>] to draw the
curved corners, but I've had a hard time implementing this.
Here is my function that creates the background image (my attempts at
curving corners removed because they resulted in fantastically stupid
images and were obviously 100% wrong):
- (NSString*)makeBG
{
NSString* path = [self tempFilesDirectory];
int w = [portalWidth intValue];
int h = [portalHeight intValue];
NSBitmapImageRep *rep = [[NSBitmapImageRep alloc]
initWithBitmapDataPlanes:NULL pixelsWide:w pixelsHigh:h
bitsPerSample:8samplesPerPixel:4hasAlpha:YESisPlanar:NO
colorSpaceName:NSDeviceRGBColorSpace bytesPerRow:0
bitsPerPixel:0];
[NSGraphicsContext saveGraphicsState];
[NSGraphicsContext setCurrentContext:[NSGraphicsContext
graphicsContextWithBitmapImageRep:rep]];
//draw border (this is where I imagine I need to be drawing the
corners, but my attempts FAILED MISERABLY!)
NSBezierPath *aPath=[NSBezierPath bezierPath];
[aPath moveToPoint:NSMakePoint(0.0,0.0)];
//a corner here?
/*
something like:
[aPath appendBezierPathWithArcFromPoint:NSMakePoint(10.0,0.0)
toPoint:NSMakePoint(0.0, 10.0) radius:10.0];
which to me, draws a curve from 10x 0y to 0x 10y (a curve around um,
the left corner?)
I _did_ try many variations over the past 3 hours - I would never ask
the list if I did not feel I had tried my best an failed.
*/
[aPath lineToPoint:NSMakePoint(w,0.0)];
//a corner here?
[aPath lineToPoint:NSMakePoint(w,h)];
//a corner here?
[aPath lineToPoint:NSMakePoint(0.0,h)];
[aPath moveToPoint:NSMakePoint(0.0,0.0)]; //if I just tried to keep
drawing I got some really weird results, this was the only way I could
make a filled rectangle
//a corner here?
[aPath lineToPoint:NSMakePoint(0.0,h)];
[aPath setLineWidth:[borderBorderTFAll floatValue]];
[[portalBGColour color] set];
//fill path with bg colour
[aPath fill];
NSGradient* aGradient = [[[NSGradient alloc]
initWithColorsAndLocations:[gradientColour1 color], (CGFloat)0.0,
[gradientColour2 color], (CGFloat)1.0,nil] autorelease];
//user gets to choose horizontal or vertical (because I will be
slicing these to save page load time)
if([gradientVertHorRB selectedColumn] == 0){
[aGradient drawInBezierPath:aPath angle:0.0];
}
else{
[aGradient drawInBezierPath:aPath angle:90];
}
//draw in gradient
[aPath moveToPoint:NSMakePoint(0.0,0.0)];
[aPath lineToPoint:NSMakePoint(w,0.0)];
[aPath lineToPoint:NSMakePoint(w,h)];
[aPath lineToPoint:NSMakePoint(0.0,h)];
[aPath moveToPoint:NSMakePoint(0.0,0.0)];
[aPath lineToPoint:NSMakePoint(0.0,h)];
[[borderBorderAllCW color] set];
[aPath stroke];
//put info into image??
[rep drawAtPoint:[aPath currentPoint]];
[NSGraphicsContext restoreGraphicsState];
NSData *pngData = [rep representationUsingType:NSPNGFileType
properties:nil];
[pngData writeToFile:[NSString stringWithFormat:@"%@/slider_bg
%@.png",path,[self uniqueID]] atomically:YES];
}
Thank you all for your time and patience, I cannot express how much I
appreciate it!
- - -
Server's poor response
Not quick enough for browser.
Timed out, plum blossom.
- - -
Rik Jespersen
_______________________________________________
Cocoa-dev mailing list (email@hidden)
Please do not post admin requests or moderator comments to the list.
Contact the moderators at cocoa-dev-admins(at)lists.apple.com
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden