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
Related
I'm drawing a segment of a pie chart with the following code:
CAShapeLayer *segment = [CAShapeLayer layer];
UIBezierPath *segmentPath = [UIBezierPath bezierPath];
[segmentPath addArcWithCenter:segmentCenter radius:segmentRadius startAngle:angle1 endAngle:angle2 clockwise:YES];
segment.path = [segmentPath CGPath];
[segment setLineCap:kCALineJoinRound]; // this is the line which causes this
segment.lineWidth = 8;
segment.fillColor = [[UIColor clearColor] CGColor];
segment.strokeColor = [[UIColor orangeColor] CGColor];
[self.layer addSublayer:segment];
and as a sideffect of setting kCALineJoinRound I get also a little circle inside. I need to get rid of it, can you help me?
Solved, the problem was due to the CAShapeLayer being added twice in layoutSubviews which caused this strange effect.
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];
I am newbie to iOS app development. I am using CABasicAnimation to draw a line horizontally across my app screen. I am successfully able to draw the line however I am not able to control the speed of animation.
Below is the code for drawing line.
-(void)drawLine{
_boxPath = [UIBezierPath bezierPath];
[_boxPath moveToPoint:CGPointMake(0.0,60.0)];
[_boxPath addLineToPoint:CGPointMake(self.view.bounds.size.width/2, 60.0)];
CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = self.view.bounds;
layer.strokeColor = [[UIColor redColor] CGColor];
layer.fillColor = [[UIColor blueColor] CGColor];
layer.lineWidth = 5.0f;
layer.lineJoin = kCALineJoinBevel;
layer.path = _boxPath.CGPath;
layer.speed = 3.0;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"line"];
animation.duration = 3.0;
[self.view.layer addSublayer:layer];
[layer addAnimation:animation forKey:#"line"];
}
No matter whatever values I change for layer speed and animation duration theres no change in animation speed. I want to slow the speed by which the line is drawn.
Any suggestions would be of great help
Your code is nonsense. Three points:
If you're going to use implicit animation, you would use CATransaction setAnimationDuration: to set a longer duration.
If you're going to use explicit animation, use it correctly. Creating a CABasicAnimation and just adding it does nothing; you need to configure it first. There is no "line" key path so your animation is meaningless.
You cannot animate nothing. You have to animate a change in something. What you probably want to animate is a change in the strokeEnd from zero to one.
I am currently using CAShapeLayer for one of my requirement. I was successful in implementing the fillcolor, strokecolor, etc... but I wanted to change the color of outer part of that CAShapeLayer. I tried doing it with backgroundcolor, & followed many answers from SO, but was unable to do it. Could anyone guide me with the solution. Screenshot attached
Edit 1: Code for creating the layer
// create layer mask for map
CAShapeLayer *maskLayer = [CAShapeLayer layer];
mapView.layer.mask = maskLayer;
// maskLayer.backgroundColor = [[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.7] CGColor];
self.maskLayer = maskLayer;
// create shape layer for circle we'll draw on top of map (the boundary of the circle)
CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.lineWidth = 3.0;
circleLayer.fillColor = [[UIColor clearColor] CGColor];
circleLayer.strokeColor = [[UIColor blackColor] CGColor];
// circleLayer.borderColor = [[UIColor blackColor] CGColor];
// circleLayer.backgroundColor = [[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.7] CGColor];
[mapView.layer addSublayer:circleLayer];
self.circleLayer = circleLayer;
Edit 2: Xcode's Viewer's Debugger
In the above image I can see that I have set the background color to self.view. But I want it to be over my map view & the the color should be semi transparent so that map data outside circle should also be visible.
Have you tried using XCode views's debugger to know where this white background belongs in your view hierarchy ?
You're using your view's maskLayer as a circle. So my guess is that this white background must be OUTSIDE your view - everything out your mask gets clipped - so you should probably try to change your viewController's view backgroundColor (or any other view that is just above your custom rounded view)
[self.view.layer setBackgroundColor:[UIColor grayColor].CGColor];
UIBezierPath *circle = [UIBezierPath bezierPathWithArcCenter:self.view.center
radius:45.0
startAngle:0
endAngle:2.0*M_PI
clockwise:YES];
CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.bounds = CGRectMake(0, 0, 2.0*(45.0), 2.0*(45.0));
circleLayer.path = circle.CGPath;
circleLayer.strokeColor = [UIColor orangeColor].CGColor;
circleLayer.fillColor = [UIColor whiteColor].CGColor;
circleLayer.lineWidth = 3.0; // your line width
[self.view.layer addSublayer:circleLayer];
See if it helps you.
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.