7

To sort out my last problem : Draw/Paint like sketch color inside a bezier path in UIView, I took an exact Image (of path) filled with selected color. Then, to draw that in UIView, for context color I took:

lineColor=[UIColor colorWithPatternImage:img];

in drawrect :

CGPoint mid1 = midPoint(previousPoint1, previousPoint2);
CGPoint mid2 = midPoint(currentPoint, previousPoint1);
[curImage drawInRect:CGRectZero];
CGContextRef context = UIGraphicsGetCurrentContext();
[self.layer renderInContext:context];
CGContextMoveToPoint(context, mid1.x, mid1.y);
CGContextAddQuadCurveToPoint(context, 
                             previousPoint1.x, 
                             previousPoint1.y, 
                             mid2.x, 
                             mid2.y);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetBlendMode(context, kCGBlendModeCopy);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetStrokeColorWithColor(context,lineColor.CGColor);
CGContextSetShouldAntialias(context, YES);
CGContextSetAllowsAntialiasing(context, YES);
CGContextSetFlatness(context,0.5);
CGContextSetAlpha(context, 1.0);
CGContextStrokePath(context);

It draws exactly in the path of view but on boundaries the color goes out like melting effect.

Source Image in which color has to be filled : Image to be filled with color

image to be used as colorWithPatternImage (img)enter image description here

After drawing on touches ,resultimg Image : enter image description here

What am I missing here to fill it perfectly? Any help with core graphics is most welcomed! Thank You!

To mask the image I also did :

-(void)clipView :(MyUIBezierPath*)path drawingView:(DrawingView*)myView
{
    MyUIBezierPath *myClippingPath =path;
    CAShapeLayer *mask = [CAShapeLayer layer];
    mask.path = myClippingPath.CGPath;
    myView.layer.mask = mask;
}

But colorWithPatternImage and this masking does the same trick i.e lets me draw only inside the path , the problem I am facing now is : It gives a bad effect on drawing on touch points around the boundaries of path !

Community
  • 1
  • 1
  • Should you not be applying a clipping mask to the layer, so you only see it draw inside the bezier. See http://stackoverflow.com/questions/20410146/use-bezier-path-as-clipping-mask – Rory McKinnel Jun 08 '15 at 13:19
  • I tried it all ready.Its the same issue with this , the color around boundary still feels like flowing , not outside though , from inside it flows away from boundary of path.Problem is with draw at touch points , masking isn't the issue. –  Jun 08 '15 at 13:55
  • Is it the same with anti-alias off? – Rory McKinnel Jun 08 '15 at 14:06
  • Yes I tried : CGContextSetShouldAntialias(context, NO); CGContextSetAllowsAntialiasing(context, NO); but this also doesnt help !! –  Jun 09 '15 at 05:20

2 Answers2

1

Well its working with my own masking method via colorWithPatternImage , though masking it by clipping is the same thing.Drawing issue was because of the image being drawn at touch point in the method "calculateMinImageArea: CGPoint1 :CGPoint2 :CGPoint3". Changing its dimensions (height-width according to line width) sorts it out.

Blind Ninja
  • 1,063
  • 13
  • 28
0

You can create a path points out of this image. Then make a CGPathRef or CGMutablePathRef and then use it as a mask to your CGContextRef.

CodenameLambda1
  • 1,299
  • 7
  • 17
  • Create a path out of which image ? –  Jun 08 '15 at 12:51
  • source image which you've posted first. – CodenameLambda1 Jun 08 '15 at 12:52
  • I already have the path stored and with that only I am getting the second Image.The concern is on continously calling touches moved around boundaries , the color start flowing out. See my linked question to see how I am drawing it in drawRect. –  Jun 08 '15 at 12:55
  • if you have the path, then you can try masking as in my answer above. – CodenameLambda1 Jun 08 '15 at 14:11
  • As I mentioned , masking isnt the issue now , masking it this way or getitng an image and doing colorwithpatternimage does the same task , the issue is with the draw technique ! inside the path it works fine but on the boundaries , while moving the touch , it gives a effect like color is flowing as you can see in the last image ! –  Jun 09 '15 at 05:27