CODEWITHSUNDEEP
opengl-escocos2d-iphoneuiimageview
tams
tams

Reputation: 830

Cocos2d: Drawing on a UIImageView causes weird line jumps

Screenshot

I am implementing a CCLayer subclass that houses 2 UIImageViews. The views and layer are all the same size: I initialized the UIImageViews with the same frame, and set the contentSize of the layer to be the frame as well. Everything is working fine, but it seems as though something is going haywire with the first point when drawing. When the image is just tapped there is no line jump, but when I attempt to draw a stroke, as soon as I move my finger, the start of the line jumps down randomly(so in this screenshot I am drawing from left to right except for bottom-left line). I am not sure where I am going wrong in my code:

//_drawImageView is the UIImageView I am drawing in.

#pragma mark - Touch Methods

- (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event
{
    penStroked = NO;
    _prevPoint = [touch locationInView:[[CCDirector sharedDirector]view]];

    CGRect rect = self.boundingBox;
    if (CGRectContainsPoint(rect, _prevPoint)) {
        return YES;
    }

    return NO;
}

- (void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event
{
    penStroked = YES;
    _currPoint = [touch locationInView:_drawImageView];

    UIGraphicsBeginImageContext(self.contentSize);
    [_drawImageView.image drawInRect:CGRectMake(0, 0, _drawImageView.frame.size.width, _drawImageView.frame.size.height)];
    CGContextMoveToPoint(UIGraphicsGetCurrentContext(), _prevPoint.x, _prevPoint.y);
    CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), _currPoint.x, _currPoint.y);
    CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
    CGContextSetLineWidth(UIGraphicsGetCurrentContext(), penSize);
    CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), penColor.r, penColor.g, penColor.b, 1.0);
    CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeNormal);

    CGContextStrokePath(UIGraphicsGetCurrentContext());
    _drawImageView.image = UIGraphicsGetImageFromCurrentImageContext();
    [_drawImageView setAlpha: penOpacity];
    UIGraphicsEndImageContext();

    _prevPoint = _currPoint;
}

I was having a really hard time initially aligning the point at which the line would be draw n and the actual position of my finger, so that is why in the ccTouchBegan method the touch is taken from the CCDirector and in ccTouchMoved it is taken from the _drawImageView. This is the only way it seems to draw perfectly besides the initial wonky behavior.

Upvotes: 0

Views: 169

Answers (1)

tams
tams

Reputation: 830

enter image description here

The problem was definitely caused by the differing references for the touches. As I had said before though, it was the only way to have the line match the position my finger was in. I figured that the line jump was due to the line of code:

CGContextMoveToPoint(UIGraphicsGetCurrentContext(), _prevPoint.x, _prevPoint.y);

The problem was that on the first go around, or the first time that the pen/finger is stroked, the previous point was referenced from the CCDirectors view while the current point was from the imageView. I created an int variable, that was incremented every time the pen was stroked and when penStrokedInt == 1 (first stroke), I corrected the _prevPoint to the WorldSpace using the current point coordinates:

    _prevPoint = [self convertToWorldSpace:_currPoint];

which basically got rid of the very first point in the line. It's not the best solution, but now it works! Make sure to reset the penStrokedInt back to 0 when the ccTouchEnded.

Upvotes: 1

Related Questions