I have chart for OS X app that can be resized with the window. I expected when the width was reduced enough the legend would be truncated or clipped. However, it is spilling outside of the plot area as shown below. Ideally, I would like the legend to truncate or at least clip the contents. how can this be done?
My legend setup is as follows
- (void)configureLegend
{
// 1 - Get graph instance
CPTGraph *graph = self.graphHostingView.hostedGraph;
// 2 - Create legend
CPTLegend *theLegend;
if (!theLegend) {
theLegend = [CPTLegend legendWithGraph:graph];
}
//Configure Text
CPTMutableTextStyle *textStyle = [CPTMutableTextStyle textStyle];
textStyle.color = [CPTColor colorWithComponentRed:0.612f green:0.612f blue:0.612f alpha:1.00f];
textStyle.fontName = #"HelveticaNeue";
textStyle.fontSize = 12.0f;
theLegend.textStyle = textStyle;
// 3 - Configure legend
theLegend.numberOfColumns = 1;
theLegend.fill = nil;
theLegend.borderLineStyle = nil;
theLegend.swatchSize = CGSizeMake(10.0, 10.0);
theLegend.swatchCornerRadius = 5.0f;
// 4 - Add legend to graph
graph.legend = theLegend;
graph.legendAnchor = CPTRectAnchorLeft;
CGFloat viewWidth = self.graphHostingView.bounds.size.width;
CGFloat legendPadding = (viewWidth * 0.3) + self.pieChart.pieRadius + (viewWidth * 0.05);
graph.legendDisplacement = CGPointMake(legendPadding, 0.0);
}
Make sure the graph is masking its sublayers. Use masksToBounds to clip to the outside of the border line or masksToBorder to clip to the inside edge of the border.
Related
I'm rendering an image with text for one of my apps and has a noticeable impact on UI performance (can be as big as ~1 second freeze), so I am doing it on a background thread. Since the image has text, using UILabels and other UIViews makes it easy to lay everything out, and I render the view containing everything to an image.
However, I get a warning from Xcode saying that it's not allowed on the background thread because it uses UIKit. Why am I not allowed to call UIKit on the background thread even though my use case is completely self-contained and isolated from any rendering onscreen?
To help the code below make more sense, it draws an image that is a listing of several items, each of which consists of two small square images and the name of the item all in a row. The list can have several columns. The code has been tweaked slightly (mostly variable names) to avoid showing proprietary code, but does the same job.
My code:
NSArray<MyItem*>* items; // These are the items that I'm drawing. They
// get set before the following code is called.
// Processing code:
const CGFloat TITLE_FONT_SIZE = 50; // font size of the title
const CGFloat ITEM_FONT_SIZE = 25; // font size of the item names
const int OUTER_PADDING = 60; // padding from the edge of the image to the main content
const int ROW_PADDING = 13; // padding between rows
const int COL_PADDING = 100; // padding between columns
const int PADDING = 20; // padding between content items in a row
const int BOX_SIZE = 25; // how high/wide each image is
const int ROW_HEIGHT = BOX_SIZE; // pixel height of a line
const int COL_WIDTH = 500; // pixel width of a column (image1, image2, and name)
// compute the dimensions of the image
UILabel* titleLabel = [[UILabel alloc] init];
titleLabel.font = [UIFont systemFontOfSize:TITLE_FONT_SIZE];
titleLabel.text = #"My image";
[titleLabel sizeToFit];
titleLabel.frame = CGRectMake(OUTER_PADDING, OUTER_PADDING / 2, titleLabel.frame.size.width, titleLabel.frame.size.height);
const int MIN_NUM_COLS = 1 + ((titleLabel.frame.size.width - COL_WIDTH) / (COL_WIDTH + COL_PADDING));
const int NORMAL_NUM_COLS = (int)ceil(sqrt([items count] / (COL_WIDTH / (ROW_HEIGHT))));
const int NUM_COLS = (MIN_NUM_COLS > NORMAL_NUM_COLS ? MIN_NUM_COLS : NORMAL_NUM_COLS);
const int NUM_ROWS = (int)ceil([items count] / (float)NUM_COLS);
const int NUM_OVERFLOW_ROWS = [items count] % NUM_ROWS;
const int titleWidth = titleLabel.frame.size.width;
const int defaultWidth = (NUM_COLS * (COL_WIDTH + COL_PADDING)) - COL_PADDING;
const int pixelWidth = (2 * OUTER_PADDING) + (titleWidth > defaultWidth ? titleWidth : defaultWidth);
const int pixelHeight = (2 * OUTER_PADDING) + (TITLE_FONT_SIZE + PADDING) + (NUM_ROWS * (ROW_HEIGHT + ROW_PADDING)) - ROW_PADDING;
const int nbytes = 4 * pixelHeight * pixelWidth;
byte* data = (byte*)malloc(sizeof(byte) * nbytes);
memset(data, 255, nbytes);
CGContextRef context = CGBitmapContextCreate(data, pixelWidth, pixelHeight, 8, 4 * pixelWidth, CGColorSpaceCreateDeviceRGB(), kCGBitmapByteOrderDefault | kCGImageAlphaNoneSkipLast);
// --------------------------------------------------
// create a view heirarchy and then draw to our context
UIView* mainView = [[UIView alloc] init];
[mainView addSubview:titleLabel];
// setup all the views
int keyIndex = 0;
CGFloat x = OUTER_PADDING;
CGFloat starty = titleLabel.frame.origin.y + titleLabel.frame.size.height + PADDING;
for (int col = 0; col < NUM_COLS; col++)
{
int nrows = (col == NUM_COLS + 1 ? NUM_OVERFLOW_ROWS : NUM_ROWS);
CGFloat y = starty;
for (int row = 0; (row < nrows) && (keyIndex < [items count]); row++)
{
CGFloat tempx = x;
MyItem* item = [items objectAtIndex:keyIndex];
UIImageView* imageview1 = [[UIImageView alloc] initWithImage:item.image1];
imageview1.frame = CGRectMake(tempx, y, BOX_SIZE, BOX_SIZE);
[mainView addSubview:imageview1];
tempx += BOX_SIZE + PADDING;
UIImageView* imageview2 = [[UIImageView alloc] initWithImage:item.imageview2];
imageview2.frame = CGRectMake(tempx, y, BOX_SIZE, BOX_SIZE);
[mainView addSubview:imageview2];
tempx += BOX_SIZE + PADDING;
UILabel* label = [[UILabel alloc] init];
label.font = [UIFont systemFontOfSize:ITEM_FONT_SIZE];
label.text = item.name;
[label sizeToFit];
label.center = CGPointMake(tempx + (label.frame.size.width / 2), imageview2.center.y);
[mainView addSubview:label];
y += ROW_HEIGHT + ROW_PADDING;
keyIndex++;
}
x += COL_WIDTH + COL_PADDING;
}
// --------------------------------------------------
// draw everything to actually generate the image
CGContextConcatCTM(context, CGAffineTransformMake(1, 0, 0, -1, 0, pixelHeight));
[mainView.layer renderInContext:context];
CGImageRef cgimage = CGBitmapContextCreateImage(context);
myCoolImage = [UIImage imageWithCGImage:cgimage];
CGImageRelease(cgimage);
CGContextRelease(context);
free(data);
As we've established in comments, what you're doing is both illegitimate and slow.
Arranging and sizing UILabel and UIImageView objects is slow, and calling
CALayer renderInContext is really slow.
And it isn't how you draw.
Everything you're doing has its analogue in the actual drawing world (Quartz 2D), and if you did it that way, not only would it be legal in the background, it probably wouldn't even need to be in the background because it would be so much faster. So:
Every place you use a UILabel, you can achieve exactly the same effect by using NSAttributedString draw... commands.
Every place you use a UIImageView, you can achieve exactly the same effect by using UIImage draw... commands.
Any of us who does any extensive drawing has learned to create structured layouts of the type you're making by using actual drawing code, and now is your chance to learn to do it too.
I have a few elements that I want to lay out in a scrollView vertically with one element below the other. I have a UILabel, a UITextView, a UIImageView, another UITextView, followed by another UITextView (in the scrollView I want there to be a header, an intro paragraph, an image, a body paragraph, and a conclusion paragraph. I can't hard code the sizes of these elements because there are different dictionaries and images for different pages. How can I appropriately find the CGRect make float sizes for the frame of each view element? I am particularly having issues with the Y values.
This is the code that I have:
let startingY = (self.navigationController?.navigationBar.frame.height)! +
UIApplication.sharedApplication().statusBarFrame.size.height
//Position subViews on screen.
self.categoryTitle.frame = CGRectMake(0, startingY, self.view.bounds.width, 50)
let secondY = startingY + 50
self.categoryIntro.frame = CGRectMake(0, secondY, self.view.bounds.width, secondY + self.categoryIntro.contentSize.height)
let thirdY = secondY + self.categoryIntro.contentSize.height
self.imageView.frame = CGRectMake(0, thirdY, self.view.bounds.width, thirdY + image.size.height)
let fourthY = thirdY + image.size.height
self.categoryParagraph.frame = CGRectMake(0, fourthY, self.view.bounds.width, fourthY + self.categoryParagraph.contentSize.height)
let fifthY = fourthY + self.categoryParagraph.contentSize.height
self.categoryConclusion.frame = CGRectMake(0, fifthY, self.view.bounds.width, fifthY + self.categoryConclusion.contentSize.height)
Thanks so much!
If you want to increment the variable you're storing y in, you should use a var. The let keyword is for variables you want to keep constant.
You also don't need to add the y position to the last parameter of CGRectMake. The height will be added to the y position set in the second parameter.
You can then use the final value of the y position variable to update your scrollview's contentsize.
Additionally, if you've already positioned your scrollview below the status bar, you would start at zero.
You can then add the height of each view you add:
var yPos = 0;
self.categoryTitle.frame = CGRectMake(0, yPos, self.view.bounds.width, 50)
yPos += self.categoryTitle.frame.size.height;
self.categoryIntro.frame = CGRectMake(0, yPos, self.view.bounds.width, self.categoryIntro.contentSize.height)
yPos += self.categoryIntro.frame.size.height;
self.imageView.frame = CGRectMake(0, yPos, self.view.bounds.width, image.size.height);
yPos += self.imageView.frame.size.height;
I would like to create a circular progress with slices where each slice is an arc.
I based my code on this answer:
Draw segments from a circle or donut
But I don't know how to copy it and rotate it 10 times.
And I would like to color it following a progress variable (in percent).
EDIT: I would like something like this
Any help please
Regards
You could use a circular path and set the strokeStart and StrokeEnd. Something like this:
let circlePath = UIBezierPath(ovalInRect: CGRect(x: 200, y: 200, width: 150, height: 150))
var segments: [CAShapeLayer] = []
let segmentAngle: CGFloat = (360 * 0.125) / 360
for var i = 0; i < 8; i++ {
let circleLayer = CAShapeLayer()
circleLayer.path = circlePath.CGPath
// start angle is number of segments * the segment angle
circleLayer.strokeStart = segmentAngle * CGFloat(i)
// end angle is the start plus one segment, minus a little to make a gap
// you'll have to play with this value to get it to look right at the size you need
let gapSize: CGFloat = 0.008
circleLayer.strokeEnd = circleLayer.strokeStart + segmentAngle - gapSize
circleLayer.lineWidth = 10
circleLayer.strokeColor = UIColor(red:0, green:0.004, blue:0.549, alpha:1).CGColor
circleLayer.fillColor = UIColor.clearColor().CGColor
// add the segment to the segments array and to the view
segments.insert(circleLayer, atIndex: i)
view.layer.addSublayer(segments[i])
}
In my experiments with creating a pixel-centered image editor I've been trying to draw a precise grid overlay to help guide users when trying to access certain pixels. However, the grid I draw isn't very even, especially at smaller sizes. It's a regular pattern of one slightly larger column for every few normal columns, so I think it's a rounding issue, but I can't see it in my code. Here's my code:
- (void)drawRect:(NSRect)dirtyRect
{
context = [[NSGraphicsContext currentContext] graphicsPort];
CGContextAddRect(context, NSRectToCGRect(self.bounds));
CGContextSetRGBStrokeColor(context, 1.0f, 0.0f, 0.0f, 1.0f);
CGContextStrokePath(context);
CGContextSetInterpolationQuality(context, kCGInterpolationNone);
CGContextSetShouldAntialias(context, NO);
if (image)
{
NSRect imageRect = NSZeroRect;
imageRect.size = CGImageGetSize([image CGImage]);
drawRect = [self bounds];
NSRect viewRect = drawRect;
CGFloat aspectRatio = imageRect.size.width / imageRect.size.height;
if (viewRect.size.width / viewRect.size.height <= aspectRatio)
{
drawRect.size.width = viewRect.size.width;
drawRect.size.height = imageRect.size.height * (viewRect.size.width / imageRect.size.width);
}
else
{
drawRect.size.height = viewRect.size.height;
drawRect.size.width = imageRect.size.width * (viewRect.size.height / imageRect.size.height);
}
drawRect.origin.x += (viewRect.size.width - drawRect.size.width) / 2.0;
drawRect.origin.y += (viewRect.size.height - drawRect.size.height) / 2.0;
CGContextDrawImage(context, drawRect, [image CGImage]);
if (showPixelGrid)
{
//Draw grid by creating start and end points for vertical and horizontal lines.
//FIXME: Grid is uneven, especially at smaller sizes.
CGContextSetStrokeColorWithColor(context, CGColorGetConstantColor(kCGColorBlack));
CGContextAddRect(context, drawRect);
CGContextStrokePath(context);
NSUInteger numXPoints = (NSUInteger)imageRect.size.width * 2;
NSUInteger numYPoints = (NSUInteger)imageRect.size.height * 2;
CGPoint xPoints[numXPoints];
CGPoint yPoints[numYPoints];
CGPoint startPoint;
CGPoint endPoint;
CGFloat widthRatio = drawRect.size.width / imageRect.size.width;
CGFloat heightRatio = drawRect.size.height / imageRect.size.height;
startPoint.x = drawRect.origin.x;
startPoint.y = drawRect.origin.y;
endPoint.x = drawRect.origin.x;
endPoint.y = drawRect.size.height + drawRect.origin.y;
for (NSUInteger i = 0; i < numXPoints; i += 2)
{
startPoint.x += widthRatio;
endPoint.x += widthRatio;
xPoints[i] = startPoint;
xPoints[i + 1] = endPoint;
}
startPoint.x = drawRect.origin.x;
startPoint.y = drawRect.origin.y;
endPoint.x = drawRect.size.width + drawRect.origin.x;
endPoint.y = drawRect.origin.y;
for (NSUInteger i = 0; i < numYPoints; i += 2)
{
startPoint.y += heightRatio;
endPoint.y += heightRatio;
yPoints[i] = startPoint;
yPoints[i + 1] = endPoint;
}
CGContextStrokeLineSegments(context, xPoints, numXPoints);
CGContextStrokeLineSegments(context, yPoints, numYPoints);
}
}
}
Any ideas?
UPDATE: I managed to get your code running with a few tweaks - where did CGImageGetSize() come from? - and I can't really see the problem, other than columns aren't all exactly even at extremely small sizes. That's just how it has to work though. The only way around this is to either fix scaling to be integer multiples of the image size - in other words, get the largest integer multiple of the image size smaller than the view size -or reduce the number of lines drawn on the screen at very small sizes to get rid of this artefact. There's a reason the pixel grid only becomes visible when you zoom in a long way in most editors. Not to mention that if the grid is still visible at 3-4x resolution you're making the view just way too busy.
I couldn't run the code you provided because there's a bunch of class ivars in there, but from a cursory glance, I'd say it has something to do with drawing on pixel boundaries. After you round to an integer to get rid of fuzzy AA artefacts (I notice you turned AA off, but ideally you shouldn't have to do that), you then need to add 0.5 to your origin to get your line drawn in the center of the pixel rather than on the boundary.
Like this:
+---X---+---+---+---+---+
| | | | Y | | |
+---+---+---+---+---+---+
X : CGPoint (1, 1)
Y : CGPoint (3.5, 0.5)
You want to draw from the center of the pixel, because otherwise your line straddles two pixels.
In other words, where you're setting up xPoints and yPoints, make sure to floor() or round() your values, and then add 0.5.
CGRect rect1 = backgroundImageView.frame;
NSLog(#"%f,%f,%f,%f",rect1.origin.x,rect1.origin.y,
rect1.size.width,rect1.size.height);
angle = -90.0;
moveX = 0;
moveY = 0.0;
CGFloat degreesToRadians = M_PI * angle / 180.0;
CGAffineTransform landscapeTransform =
CGAffineTransformMakeRotation(degreesToRadians);
landscapeTransform =
CGAffineTransformTranslate(landscapeTransform, moveX, moveY);
[backgroundImageView setTransform:landscapeTransform];
rect1 = backgroundImageView.frame;
NSLog(#"%f,%f,%f,%f",rect1.origin.x,rect1.origin.y,
rect1.size.width,rect1.size.height);
the debug message output:
0.000000,0.000000,320.000000,480.000000
-80.000000,80.000000,480.000000,320.000000
why does the (x,y) changes to (-80,80)?
When you set the transform, the backgroundImageView.center does not change. If the parent view has already rotated, yout can do something like this after applying the transform.
backgroundImageView.center = backgroundImageView.superview.center;
Either way, for your purposes you should adjust the center and not translate the transform.