I am working on a bluetooth LE drawing app. I have it so when I draw a line on the first device a bezier curve is draw between the various points. and I have the app sending the various x and y positions for these point to the receiving device and I can have the lines draw on it. However I would like to have the receiving drawing to be curved as now the lines between the points are straight.
Here is my code to draw the lines using bezier curves on the sending device.
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
ctr = 0;
UITouch *touch = [touches anyObject];
pts[0] = [touch locationInView:self.tempImage];
lastPoint = [touch locationInView:tempImage];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint p = [touch locationInView:self.tempImage];
currentPoint = [touch locationInView:tempImage];
ctr++;
pts[ctr] = p;
if (ctr == 4)
{
pts[3] = CGPointMake((pts[2].x + pts[4].x)/2.0, (pts[2].y + pts[4].y)/2.0); // move the endpoint to the middle of the line joining the second control point of the first Bezier segment and the first control point of the second Bezier segment
[path moveToPoint:pts[0]];
[path addCurveToPoint:pts[3] controlPoint1:pts[1] controlPoint2:pts[2]]; // add a cubic Bezier from pt[0] to pt[3], with control points pt[1] and pt[2]
[self draw2];
// replace points and get ready to handle the next segment
pts[0] = pts[3];
pts[1] = pts[4];
ctr = 1;
}
NSLog(@"ctr:%d",ctr);
lastPoint = currentPoint;
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
[path removeAllPoints];
ctr = 0;
UIGraphicsBeginImageContext(self.tempImage.frame.size);
[self.imageView.image drawInRect:CGRectMake(0,0, self.imageView.frame.size.width, self.imageView.frame.size.height) blendMode:kCGBlendModeNormal alpha:1.0];
[self.tempImage.image drawInRect:CGRectMake(0,0, self.tempImage.frame.size.width, self.tempImage.frame.size.height) blendMode:kCGBlendModeNormal alpha:1.0];
self.imageView.image = UIGraphicsGetImageFromCurrentImageContext();
self.tempImage.image = nil;
UIGraphicsEndImageContext();
}
- (void)draw2
{
UIGraphicsBeginImageContext(self.tempImage.frame.size);
[self.tempImage.image drawInRect:CGRectMake(0, 0, self.tempImage.frame.size.width, self.tempImage.frame.size.height)];
pts[3] = CGPointMake((pts[2].x + pts[4].x)/2.0, (pts[2].y + pts[4].y)/2.0); // move the endpoint to the middle of the line joining the second control point of the first Bezier segment and the first control point of the second Bezier segment
[path moveToPoint:pts[0]];
[path addCurveToPoint:pts[3] controlPoint1:pts[1] controlPoint2:pts[2]]; // add a cubic Bezier from pt[0] to pt[3], with control points pt[1] and pt[2]
[[UIColor blackColor] setStroke];
[path setLineWidth:1.0];
[path stroke];
CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeNormal);
// CGContextStrokePath(UIGraphicsGetCurrentContext());
self.tempImage.image = UIGraphicsGetImageFromCurrentImageContext();
[self.tempImage setAlpha:1.0];
UIGraphicsEndImageContext();
}
}
then I send the x,y coordinates with this code
- (void)peripheralManager:(CBPeripheralManager *)peripheral central:(CBCentral *)central didSubscribeToCharacteristic:(CBCharacteristic *)characteristic
{
ax = lastPoint.x;
ay = lastPoint.y;
xString = [NSString stringWithFormat:@"%f",ax/see];
textView.text = xString;
yString = [NSString stringWithFormat:@"%f",ay/see];
textView3.text = yString;
NSString *stringOne = self.textView.text;
NSString *stringTwo = [stringOne stringByAppendingString:@","];
NSString *stringThree = [stringTwo stringByAppendingString:self.textView3.text];
self.dataToSend = [stringEleven dataUsingEncoding:NSUTF8StringEncoding];
[self.peripheralManager updateValue:dataToSend forCharacteristic:self.transferCharacteristic onSubscribedCentrals:nil];
self.sendDataIndex = 0;
// Start sending
[self sendData];
}
On the receiving device I use this code to get the x,y coordinates
NSArray *coorArray = [stringFromData componentsSeparatedByString:@","];
firstString = [coorArray objectAtIndex:0];
secondString = [coorArray objectAtIndex:1];
x = firstString.intValue;
message2.text = secondString2;
y = secondString.intValue;
CGPoint currentPoint2 = CGPointMake(x, y) ;
And this is the code I use to draw the lines between the points I have tried using the same code to draw the bezier curve above but I end up with lines radiating from (0,0) out to the various points and I have tried to send the ctr values to the receiving device and then plugging them into the formula but I got some very strange lines depending on how fast or slow I drew in the original shape on device 1. Any ideas would be greatly appreciated.
UIGraphicsBeginImageContext(tempImage.frame.size);
[tempImage.image drawInRect:CGRectMake(0,0,tempImage.frame.size.width, tempImage.frame.size.height)];
[imageView.image drawInRect:CGRectMake(0,0,imageView.frame.size.width, imageView.frame.size.height)];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineJoin(UIGraphicsGetCurrentContext(), kCGLineJoinRound );
else {
CGContextSetStrokeColorWithColor(UIGraphicsGetCurrentContext(), [[UIColor clearColor] CGColor]);
CGContextBeginPath(UIGraphicsGetCurrentContext());
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), currentPoint2.x, lastPoint.y);
CGContextClearRect (UIGraphicsGetCurrentContext(), CGRectMake(lastPoint.x, lastPoint.y,20,20));
CGContextStrokePath(UIGraphicsGetCurrentContext());
NSLog(@"clearing");
}
CGContextBeginPath(UIGraphicsGetCurrentContext());
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint2.x, currentPoint2.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());
imageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
lastPoint = currentPoint2;
if(!mouseSwiped) {
UIGraphicsBeginImageContext(imageView.frame.size);
[tempImage.image drawInRect:CGRectMake(0, 0,tempImage.frame.size.width, tempImage.frame.size.height)];
[imageView.image drawInRect:CGRectMake(0, 0,imageView.frame.size.width, imageView.frame.size.height)];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 1.0);
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
if (mode == DrawingModePen) {
CGContextSetStrokeColorWithColor(UIGraphicsGetCurrentContext(), [_drawingPenBlack CGColor]);
}
else {
CGContextSetStrokeColorWithColor(UIGraphicsGetCurrentContext(), [self.backgroundColor CGColor]);
}
CGContextStrokePath(UIGraphicsGetCurrentContext());
CGContextFlush(UIGraphicsGetCurrentContext());
imageView.image = UIGraphicsGetImageFromCurrentImageContext();
tempImage.image = nil;
UIGraphicsEndImageContext();
}
- (void) draw3
{
NSLog(@"this is being called");
UIGraphicsBeginImageContext(self.tempImage.frame.size);
[self.tempImage.image drawInRect:CGRectMake(0, 0, self.tempImage.frame.size.width, self.tempImage.frame.size.height)];
self.tempImage.image = UIGraphicsGetImageFromCurrentImageContext();
[self.tempImage setAlpha:1.0];
UIGraphicsEndImageContext();
}
I figured this out
And this is the code I used to draw the lines between the points