Hi I am doing the legend for the different polygon colors in a map, and I want to show a little square with the UIColor used for that certain item. I was thinking of using a UIImage and setting the background color to that color but I can't figure it out. What is the best way to go about this problem?
Thanks
If you need user interaction with this square than use UIView, in other case you need to use CAShapeLayer. There wont be any visual difference, but using layer is preferred if you have only show something without any interaction.
use [UIBezierPath bezierPathWithRect:(CGRect)rect]
and than with that path
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [path CGPath];
shapeLayer.fillColor = [[UIColor clearColor] CGColor];
Add that CAShapeLayer to your view's layer:
[self.view.layer addSublayer:shapeLayer];
Related
Is there a way to get a tableview seperator effect like the screenshot below, the effect has been used in the fast company app and shows two rows in the views being separated by a triangular seperator.
Any pointers on how this effect can be achieved in a tableview would be highly appreciated. The seperator at the bottom of the screen is semi transparent and the image associated with the next row shows through.
A link to the screenshot is here: https://s3-us-west-1.amazonaws.com/jjm.so/17427B2C-3837-4428-B82E-8D1C57BFA706B53CD936-AE93-4F2A-B3DB-7F7018A02CBA.jpg
There you go:
CGRect frame = imageView.bounds;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, frame.size.height)];
[path addLineToPoint:CGPointMake(0, frame.size.height-60)];
[path addLineToPoint:CGPointMake(frame.size.width/2, frame.size.height-20)];
[path addLineToPoint:CGPointMake(frame.size.width, frame.size.height-60)];
[path addLineToPoint:CGPointMake(frame.size.width, frame.size.height)];
[path closePath];
CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = path.CGPath;
mask.strokeColor = [UIColor clearColor].CGColor;
mask.fillColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:0.5].CGColor;
[imageView.layer addSublayer:mask];
I think you use ImageMasking on that, It may be Help you. Just simple create Image of Layer which is you required.and then Just add masking too Image.
I think that is a custom UIView inside the cell that is created by drawing a bezierPathto get the shape. The UIView is having a colour of 0,0,0 and alpha of 0.3-0.4 and is a subview of the cell.contentView. The tableview has separator as None,and the custom view lies at the bottom of the cell, thus rendering the effect that it is being used as a custom separator of triangle shape.
I need some help to get this thing working..
Basically on button click, I have to add a line of fixed width with circle end points on the ImageView. User can add upto 5 lines. If I click on any circle (red dot) end point of line, it should allow to resize the line. Point can be dragged to any position on screen and line has to be straight. At the end, i should be able to calculate the length of each line. I just spent a lot of time on this and referring other similar answers. But so far, no luck.. Any reference code or links is greatly appreciated.
Thanks!
WOW, where to even start. OK, first of all, you should not be doing your drawing in the "viewDidLoad" method of your ViewController. You should make a subclass of UIView (let's call it DrawView) and do all your drawing within the "drawRect" method. And within DrawView, you can then intercept touches.
So to get a little more precise:
create subclass of UIView called DrawView
Move your drawing into the drawRect method
Within DrawView, over-ride the various "touchesXXXX" methods (of UIResponder) to detect and respond to touches and figure out what shape has been touched
Within the storyboard, drag a UIView object onto your ViewController and make sure it's class is set to "DrawView".
This is for starters. Haven't even talked about how to record/store your various points and shapes.
To Draw line on image view the following code work for me even in view did load.
first int image view
second write following code
//line 1
CAShapeLayer *shapeLayerOne = [CAShapeLayer layer];
shapeLayerOne.path = [LineOne CGPath];
shapeLayerOne.strokeColor = [[UIColor blueColor] CGColor];
shapeLayerOne.lineWidth = 1.0;
shapeLayerOne.fillColor = [[UIColor clearColor] CGColor];
//line 2
CAShapeLayer *shapeLayerTwo = [CAShapeLayer layer];
shapeLayerTwo.path = [LineTwo CGPath];
shapeLayerTwo.strokeColor = [[UIColor blueColor] CGColor];
shapeLayerTwo.lineWidth = 1.0;
shapeLayerTwo.fillColor = [[UIColor clearColor] CGColor];
//line 3
CAShapeLayer *shapeLayerThree = [CAShapeLayer layer];
shapeLayerThree.path = [LineThree CGPath];
shapeLayerThree.strokeColor = [[UIColor blueColor] CGColor];
shapeLayerThree.lineWidth = 1.0;
shapeLayerThree.fillColor = [[UIColor clearColor] CGColor];
//line 4
CAShapeLayer *shapeLayerFour = [CAShapeLayer layer];
shapeLayerFour.path = [LineFour CGPath];
shapeLayerFour.strokeColor = [[UIColor blueColor] CGColor];
shapeLayerFour.lineWidth = 1.0;
shapeLayerFour.fillColor = [[UIColor clearColor] CGColor];
[self.view.layer addSublayer:shapeLayerOne];
[self.view.layer addSublayer:shapeLayerTwo];
[self.view.layer addSublayer:shapeLayerThree];
[self.view.layer addSublayer:shapeLayerFour];
your output is blue line
I am trying to make a game where a ball is bouncing off a user drawn line. The code for drawing the line is included below and works fine but how would I remove the line once the ball makes contact with it or the player draws a new line?
path = [UIBezierPath bezierPath];
// Start Coords of Line
[path moveToPoint:CGPointMake(pos2x, pos2y)];
[path addLineToPoint:CGPointMake(pos1x, pos1y)];
// End Coords of Line
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = [[UIColor whiteColor] CGColor];
shapeLayer.lineWidth = 3.0;
shapeLayer.fillColor = [[UIColor clearColor] CGColor];
[self.view.layer addSublayer:shapeLayer];
Thanks in advance!
When you say this:
[self.view.layer addSublayer:shapeLayer];
...also keep a reference to that shape layer. For example, you might have a property currentShapeLayer:
self.currentShapeLayer = shapeLayer;
Now that you have a reference, you can easily remove the layer:
[self.currentShapeLayer removeFromSuperlayer];
Programming iOS is all about keeping references to things you know you'll need later on. If there are more paths, meaning more shape layers, you will need a more complex, intelligent way of distinguishing which is which and which one you want to remove.
I have used CAShapeLayer for masking my image and i want to retrieve only the portion that i have masked.
When i retrieve, i am getting only the full image.
Can anyone please provide me some code/information regarding this ?
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = CGRectMake(0, 0, clippingPath.bounds.size.width, clippingPath.bounds.size.height) ;
maskLayer.path = [clippingPath CGPath];
maskLayer.fillColor = [[UIColor blackColor] CGColor];
maskLayer.backgroundColor = [[UIColor clearColor] CGColor];
[ imgView removeFromSuperview ] ;
imgView.layer.mask = maskLayer ;
Thanks in advance :)
A CALayer is for display only, it is not actually modifying the image itself.
To mask an image you'll have to create that yourself, either using Quartz 2D drawing or using CIFilter/CIImage from the CoreImage framework.
To mask an image using Core Graphics (Quartz 2D) use CGImageCreateWithMask and CGImageMaskCreate. These functions allow you to mask one image with the contents of the other. You say you now use a bezier path to mask, so you would have to render that path into an image first to be able to mask your original image.
To mask an image using CoreImage take a look at the CIBlendWithMask filter.
I can draw a path and make the view drag-able via gesture recognizer. How would I make a point on the path drag-able. I suppose I would need to identify that point to check it's location in the view and to reset it's location to the point to which it is dragged, but that is what I am not sure how to do.
Bro there are function for detecting a hit on CGPath or UIBezierPath. ON touchesBegan: method you can use either one of following methods to detect if the hit point is on the path or not.
For UIBezierPath: - (BOOL)containsPoint:(CGPoint)point
For GGPath :
bool CGContextPathContainsPoint (
CGContextRef context,
CGPoint point,
CGPathDrawingMode mode
);
Then if this point is on your path then you can set a flag. and In touchesEnd method you can get the translated point. However need to redraw the path. Path will not be elastic.
EDIT: One thing that my work for your case is CAShapeLayer. CAShapeLayer can draw a UIBazierPath or CGPathRef. And also its animatable via its properties of strokeend and strokestart. See following code to get the idea of drawing a path with CAShapeLayer
UIBezierPath *path = [UIBezierPath bezierPath];
// Draw your path acording to your requirements
// Remember that you don't need to stroke path in this implementation
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath; // path is a UIBezierPath object
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 1.5;
shapeLayer.strokeStart = 0.0;
shapeLayer.strokeEnd = 1.0;
[shapeLayer renderInContext:ctx]; // you can also use addSubLayer: and drawInContext