I want to add a widget to my graph that a user can click and drag. I've managed to do this using CPTPlotSpaceAnnonation (because I also want it to also scroll with the data) and CPTBorderedLayer. The basic functionality works and now I want to improve the look of the widget. So far it's just a green circle.
The follow code generates the circle below, notice how the shadow is clipped to the rect of the layer and the border follows the layer and not the circle,
How can I stroke the circle and not the layer? I guess I can avoid clipping by making the frame of the layer larger. Is possible to use CAShapeLayer class with the Core Plot annotations? This would be an easy way of drawing the widgets.
// Add a circular annotation to graph with fill and shadow
annotation = [[CPTPlotSpaceAnnotation alloc]
initWithPlotSpace:graph.defaultPlotSpace
anchorPlotPoint:anchorPoint];
// Choosing line styles and fill for the widget
NSRect frame = NSMakeRect(0, 0, 50.0, 50.0);
CPTBorderedLayer *borderedLayer = [[CPTBorderedLayer alloc] initWithFrame:frame];
// Circular shape with green fill
CGPathRef outerPath = CGPathCreateWithEllipseInRect(frame, NULL);
borderedLayer.outerBorderPath = outerPath;
CPTFill *fill = [CPTFill fillWithColor:[CPTColor greenColor]];
borderedLayer.fill = fill;
// Basic shadow
CPTMutableShadow *shadow = [CPTMutableShadow shadow];
shadow.shadowOffset = CGSizeMake(0.0, 0.0);
shadow.shadowBlurRadius = 6.0;
shadow.shadowColor = [[CPTColor blackColor] colorWithAlphaComponent:1.0];
borderedLayer.shadow = shadow;
// Add to graph
annotation.contentLayer = borderedLayer;
annotation.contentLayer.opacity = 1.0;
[graph addAnnotation:annotation];
Don't set the border paths of the layer. Instead, just set the cornerRadius to half the width of the frame.
borderedLayer.cornerRadius = frame.size.width * 0.5;
Related
I have been working on a puzzle game that uses a customizable grid with levels that are preset and created when the scene inits. They are comprised of static blocks scattered around the grid and a movable player controlled block. The gravity of the world is controllable and the block falls in that direction (up, down, left, right). I am using SKContactDelegate to track when the player block touches a block or the edge of the grid and stops it in place.
The problems I am having involve the physics bodies of the blocks and grid edge.
I am using bodyWithRectOfSize for the blocks and bodyWithEdgeLoopFromRect for the grid border.
The physics bodies of 1x1 blocks placed in the grid and the player 1x1 block have normal physics bodies (as they should be). However, larger blocks ex: 1x5, the bodies are shifted down on the y axis for no reason. Also depending on the grid size, the grid edge would be offset by a random number. Note: the bodies are offset and the nodes themselves are in the right place.
This is the code for creating the blocks; this one works fine
(cellsize is the size of each grid space)
Basic 1x1 block
-(SKShapeNode *)basic {
CGRect blockRect = CGRectMake(10, 10, self.cellSize, self.cellSize);
UIBezierPath *blockPath = [UIBezierPath bezierPathWithRoundedRect:blockRect cornerRadius:8];
SKShapeNode *blockNode = [SKShapeNode node];
blockNode.path = blockPath.CGPath;
blockNode.fillColor =[UIColor blackColor];
blockNode.lineWidth = 0;
blockNode.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:blockRect.size];
blockNode.physicsBody.categoryBitMask = blockCategory;
blockNode.physicsBody.dynamic = NO;
return blockNode;
}
and custom blocks (offset down on the y axis)
-(SKShapeNode *)basicWithWidth:(int)width WithHeight:(int)height {
CGRect blockRect = CGRectMake(10, 10, self.cellSize * width, self.cellSize * height);
UIBezierPath *blockPath = [UIBezierPath bezierPathWithRoundedRect:blockRect cornerRadius:8];
SKShapeNode *blockNode = [self basic];
blockNode.path = blockPath.CGPath;
blockNode.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:blockRect.size];
blockNode.physicsBody.categoryBitMask = blockCategory;
blockNode.physicsBody.dynamic = NO;
return blockNode;
}
And here is the grid edge
SKShapeNode *edge = [SKShapeNode node];
CGRect edgeRect = CGRectMake(10, 10, 260, 260);
UIBezierPath *edgeShape = [UIBezierPath bezierPathWithRoundedRect:edgeRect cornerRadius:8];
edge.path = edgeShape.CGPath;
edge.lineWidth = 0;
edge.fillColor = [UIColor grayColor];
edge.physicsBody = [SKPhysicsBody bodyWithEdgeLoopFromRect:edgeRect];
edge.physicsBody.categoryBitMask = boardCategory;
[self addChild:edge];
Note: The edge and blocks are children to a "board" node that is a child of the game scene
Thank you for reading this.
When you use SKPhysicsBody's bodyWithRectangleOfSize:, it is centered on its node's origin. What you want to do in your case is center them on the center of the rect that defines your node. To do that, use bodyWithRectangleOfSize:center: instead.
For example, you define your block with the rect:
CGRect blockRect = CGRectMake(10, 10, self.cellSize, self.cellSize);
So, you'll want your physicsBody centered on the center of that rect. You easily get the center of a CGRect with:
CGPoint center = CGPointMake(CGRectGetMidX(blockRect), CGRectGetMidY(blockRect));
To create the physicsBody centered there, use:
blockNode.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:blockRect.size center:center];
Note: bodyWithRectangleOfSize:center: is only available in iOS 7.1 and later
iOS 7.0 method
For iOS 7.0, you can use bodyWithPolygonFromPath: instead, it just takes an additional line of code:
CGPathRef blockPath = CGPathCreateWithRect(blockRect, nil);
blockNode.physicsBody = [SKPhysicsBody bodyWithPolygonFromPath: blockPath];
I have a custom view for a loading indicator which is comprised of a number of CAShapeLayers which I perform various animations on to represent various states. In the init method I create a number of shape layers and add them as sublayers to the view's layer. The issue I'm having is the shapes that I'm drawing have very rough edges and don't seem to be antialiased. I've tried a number of things from similar answers on here but I can't seem to antialias the shapes. I've never had this problem before then drawing directly in drawRect.
Is there anything I'm missing or is there a better way to accomplish what I'm trying to do?
Update: Here's a comparison of how the shapes are being drawn:
On the left I'm drawing in layoutSubviews using this code:
CGFloat lineWidth = 2.5f;
CGFloat radius = (self.bounds.size.width - lineWidth)/2;
CGPoint center = CGPointMake(CGRectGetWidth(self.frame)/2, CGRectGetHeight(self.frame)/2);
CGFloat startAngle = - ((float)M_PI / 2);
CGFloat endAngle = (2 * (float)M_PI) + startAngle;
UIBezierPath *trackPath = [UIBezierPath bezierPathWithArcCenter:center
radius:radius
startAngle:startAngle
endAngle:endAngle
clockwise:YES];
self.trackLayer.path = trackPath.CGPath;
self.trackLayer.lineWidth = lineWidth;
On the right I'm calling a separate method from awakeFromNib:
-(void)awakeFromNib
{
....
self.trackLayer = [self trackShape]
[self.layer addSublayer:self.trackLayer];
}
-(CAShapeLayer*)trackShape
{
float start_angle = 2*M_PI*-M_PI_2;
float end_angle = 2*M_PI*1-M_PI_2;
float minSize = MIN(self.frame.size.width, self.frame.size.height);
float radius = (minSize-_strokeWidth)/2 -4;
CGPoint center = CGPointMake(self.frame.size.width/2,self.frame.size.height/2);
CAShapeLayer *circle = [CAShapeLayer layer];
circle.path = [UIBezierPath bezierPathWithArcCenter:center
radius:radius
startAngle:start_angle
endAngle:end_angle
clockwise:YES].CGPath;
circle.strokeColor = self.trackColor.CGColor;
circle.fillColor = nil;
circle.lineWidth = (_strokeWidth == -1.0) ? minSize * _strokeWidthRatio
: _strokeWidth;
circle.rasterizationScale = [[UIScreen mainScreen] scale];
return circle;
}
The picture you provided is exactly what happened to me. I got the chunky circle. In my case, the code was inside the drawRect method. The problem was that I was adding a CAShapeLayer, as a subLayer of my view, every time drawRect was called.
So to anyone who stumbles upon something similar, keep track of the CAShapeLayer you are adding or clear everything before drawing again in the drawRect.
I have a UIView. Inside this UIView, I have two intersecting subviews. I want to draw a common outline between these two sub-UIViews. How do I get about this?
To make it clear:
[mainView addSubview:subView1];
[mainView addSubview:subView2];
I need to draw an outline for both these intersecting UIViews.
You can combine shapes of both rectangles and create new sublayer from the final shape. This layer will act as your outline.
See my code, its fully commented:
// Create shape of merged rectangles
UIBezierPath *outlinePath = [UIBezierPath bezierPathWithRect:subView1.frame];
[outlinePath appendPath:[UIBezierPath bezierPathWithRect:subView2.frame]];
// Configure the outline
UIColor *outlineColor = [UIColor redColor];
CGFloat outlineWidth = 1.0f * [[UIScreen mainScreen] scale];
// Create shape layer representing the outline shape
CAShapeLayer *outlineLayer = [CAShapeLayer layer];
outlineLayer.frame = mainView.bounds;
outlineLayer.fillColor = outlineColor.CGColor;
outlineLayer.strokeColor = outlineColor.CGColor;
outlineLayer.lineWidth = outlineWidth;
// Set the path to the layer
outlineLayer.path = outlinePath.CGPath;
// Add sublayer at index 0 - below everything already in the view
// so it looks like the border
// "outlineLayer" is in fact the shape of the combined rectangles
// outset by layer border
// Moving it at the bottom of layer hierarchy imitates the border
[mainView.layer insertSublayer:outlineLayer atIndex:0];
Output looks like this:
Edit: I misunderstood the question at first. Below is my original answer which outlines rects intersection.
You can just create another view which will be representing the intersection and add it above the two subviews. It's frame would be intersection of the subView1 and subView2 frames. Just give it clear background color and border using its layer property
Your code could look like this:
// Calculate intersection of 2 views
CGRect intersectionRect = CGRectIntersection(subView1.frame, subView2.frame);
// Create intersection view
UIView *intersectionView = [[UIView alloc] initWithFrame:intersectionRect];
[mainView addSubview:intersectionView];
// Configure intersection view (no background color, only border)
intersectionView.backgroundColor = [UIColor clearColor];
intersectionView.layer.borderColor = [UIColor redColor].CGColor;
intersectionView.layer.borderWidth = 1.0f;
I am trying to put 6 Coreplot charts on an iPad in landscape mode so each chart is 128pixels in height (ie. 768/6)
The issue I am having is that if I set all the padding to 0 the chart still has lots of padding around the chart being plotted.
Is there a way to remove this default padding from the chart?
Thanks in advance
Damien
The pink marks in the image are the padding I want to remove
http://i.stack.imgur.com/nXzFv.png
or
http://s10.postimage.org/d2rl0ajsn/Image13.png
Here is the chart without the theme applied (The padding is still present) I added a pink border so you can see the actual size
I also tried setting the padding to -20.0 and the same padding was present but the visible chart area was cutting the chart off.
There seems to be an outer frame which is setting this padding and holding the chart area..
The default padding on the graph itself (not the plot area frame) is 20 pixels on each side. You can change that, too.
graph.paddingLeft = 0.0;
graph.paddingTop = 0.0;
graph.paddingRight = 0.0;
graph.paddingBottom = 0.0;
HINT:
Temporarily set the background color of the different views to wild colors so that you can see the affect of various padding values.
self.graph.plotAreaFrame.backgroundColor = [[UIColor yellowColor] CGColor];
self.graph.plotAreaFrame.paddingTop = 2.0f;
self.graph.plotAreaFrame.paddingRight = 8.0f;
self.graph.plotAreaFrame.paddingBottom = 30.0f;
self.graph.plotAreaFrame.paddingLeft = 42.0f;
self.graph.backgroundColor = [[UIColor greenColor] CGColor];
self.graph.paddingTop = 2.0f;
self.graph.paddingRight = 2.0f;
self.graph.paddingBottom = 2.0f;
self.graph.paddingLeft = 2.0f;
// Tie the graph we've created with the hosting view.
self.hostingView.hostedGraph = self.graph;
self.hostingView.backgroundColor = [UIColor redColor];
I am plotting graph using core plot. I am trying to plot my graph on plot area, but it contains white background. But i want to plot graph with my own background. This is my code.
CGRect frame = [self.hostingView bounds];
self.graph = [[[CPTXYGraph alloc] initWithFrame:frame] autorelease];
// Add some padding to the graph, with more at the bottom for axis labels.
self.graph.plotAreaFrame.paddingTop = 10.0f;
self.graph.plotAreaFrame.paddingRight = 10.0f;
self.graph.plotAreaFrame.paddingBottom = 25.0f;
self.graph.plotAreaFrame.paddingLeft = 30.0f;
self.graph.plotAreaFrame.plotArea.fill=[(CPTFill *)[CPTFill alloc] initWithColor: [CPTColor colorWithComponentRed:0.8 green:0.8 blue:0.8 alpha:1.0]];
// Tie the graph we've created with the hosting view.
self.hostingView.hostedGraph = self.graph;
}
In above code i tried to change color but i want to draw horizontal dotted lines for each ticks on y axis.
To draw horizontal lines, set the majorGridLineStyle and/or minorGridLineStyle for the y-axis to draw lines from the major ticks and minor ticks, respectively. Use the dashPattern and patternPhase properties of the line style to control the dotting pattern. See Apple's Quartz 2D docs for details on how to use those line style properties.
try this:-
//configure plot method
//0 - Create Theme
CPTTheme *theme = [CPTTheme themeNamed:kCPTPlainWhiteTheme];
// 1 - Create the graph
CPTGraph *graph = [[CPTXYGraph alloc] initWithFrame:self.GraphView.frame];
graph = (CPTXYGraph *)[theme newGraph];
graph.fill = [CPTFill fillWithColor:[CPTColor clearColor]];
graph.plotAreaFrame.fill = [CPTFill fillWithColor:[CPTColor clearColor]];