CODEWITHSUNDEEP
ioscore-graphicscore-plot
Andy
Andy

Reputation: 727

Core Plot Symbol with Custom Path

I'm trying to make a custom plot symbol on Core Plot (iOS) using the class method:

+(CPPlotSymbol *)customPlotSymbolWithPath:(CGPathRef)aPath

I could find limited help on this particular topic, although I have been reading apple docs on creating CGPathRef however can't get the custom symbols working. My end target is to create symbols like so:

enter image description here enter image description here

Some of the symbols need to have the red inner circle and some the blue, and some don't have to have the outer circle at all (in which case I am using ellipsePlotSymbol without issues).

I am aware I could 'cheat(!)' and just use a background image fill with rectanglePlotSymbol or similar but I would really like to do this in code so I don't have to keep creating different images everytime I need a new color etc.

I have made a start but could an expert please complete/help with this! Thank you.

// Set up Risk Plot and add to Graph
self.riskValuesPlot = [[CPTScatterPlot alloc] init];
self.riskValuesPlot.dataSource = self;
self.riskValuesPlot.identifier = @"Risk Values";
CPTColor *riskPlotColor = [CPTColor colorWithComponentRed:49.0/255.0 green:82.0/255.0 blue:151.0/255.0 alpha:1.0];
[graph addPlot:self.riskValuesPlot toPlotSpace:plotSpace];

// Risk Values Line and Point Style
CPTMutableLineStyle *riskLineStyle = [self.riskValuesPlot.dataLineStyle mutableCopy];
riskLineStyle.lineWidth = 0.0f;
self.riskValuesPlot.dataLineStyle = riskLineStyle;

// Trying to draw the outer circle...help required
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0.0f, 0.0f);
CGPathAddArc(path, NULL, 0.0f, 0.0f, 3.0f, 0, M_PI * 180, YES);
CPTPlotSymbol *riskSymbol = [CPTPlotSymbol customPlotSymbolWithPath:path];
CGPathRelease(path);

// Draw inner circle here
// Set path color then draw circle path with fill?
...

CPTMutableLineStyle *riskSymbolLineStyle = [CPTMutableLineStyle lineStyle];
riskSymbolLineStyle.lineColor = riskPlotColor;
riskSymbol.lineStyle = riskSymbolLineStyle;
riskSymbol.size = CGSizeMake(8.0f, 8.0f);
self.riskValuesPlot.plotSymbol = riskSymbol;

Upvotes: 1

Views: 748

Answers (1)

Eric Skroch
Eric Skroch

Reputation: 27381

Try this:

CGMutablePathRef path = CGPathCreateMutable();

CGPathAddEllipseInRect( path, NULL, CGRectMake(0.0, 0.0, 10.0, 10.0) );
CGPathAddEllipseInRect( path, NULL, CGRectMake(2.0, 2.0, 6.0, 6.0) );
CGPathAddEllipseInRect( path, NULL, CGRectMake(4.0, 4.0, 2.0, 2.0) );

CPTPlotSymbol *riskSymbol = [CPTPlotSymbol customPlotSymbolWithPath:path];
riskSymbol.usesEvenOddClipRule = YES;
CGPathRelease(path);

Adjust the sizes of the circles to get the desired relative sizes between the ring and the circle in the middle. A solid color fill is easy and will give you the first sample image. You can use a radial gradient fill to get multiple colors. Set up the gradient so the color transition is hidden by the space between the solid circle and the ring.

Upvotes: 2

Related Questions