Core Graphics - How to draw a shadow without drawing a line?

Question

Take a look at this code:

- (void)drawRect:(CGRect)rect
{
  [super drawRect:rect];

  CGContextRef context = UIGraphicsGetCurrentContext();

  CGSize  myShadowOffset = CGSizeMake (-10,  15);

  CGContextSaveGState(context);

  CGContextSetShadow (context, myShadowOffset, 5);

  CGContextSetLineWidth(context, 4.0);
  CGContextSetStrokeColorWithColor(context,
                                 [UIColor blueColor].CGColor);
  CGRect rectangle = CGRectMake(60,170,200,200);
  CGContextAddEllipseInRect(context, rectangle);
  CGContextStrokePath(context);
  CGContextRestoreGState(context);
}

what it does it draws a circle and a shadow for this circle. However i can't make my mind how to draw only shadow without drawing circle's line? How do i do that? Answers to similar questions here on SO didn't help me

Answer 1

Please try the following:

//If you would like your shadow color to be blue, change it to blue.
CGContextSetShadowWithColor(context, CGSizeMake(-10.0f,  15.0f), 5.0f, [UIColor lightGrayColor].CGColor);
CGContextSetStrokeColorWithColor(context, self.backgroundColor.CGColor);
CGContextStrokePath(context);

I just ran a test on it; and the effect seems desirable.

Hope this helps.

Answer 2

I was able to achieve this using stroke color white, and blend mode multiply:

// ...
context.setStrokeColor(UIColor.white.cgColor)
context.setShadow(offset: CGSize.zero, blur: 8.0, color: UIColor.black.cgColor)
context.setBlendMode(.multiply)
context.addPath(...) <--- ADD YOUR PATH HERE
context.strokePath()
// ...

It draws only the shadow, without the stroke.

Answer 3

Here is a way to render the shadow only. The way is background color, shadow color agnostic.

The gist is

1. add a big horizontal offset to the shadow you want to render. So that the shadow is separated out from the shadow shape.
2. Translate the context with a negative same horizontal offset, so that the shadow shape is moved out of the rendering area, and the shadow is moved back.
3. Render normally, you will get the shadow rendering only.

Example code:

func normalShadowRendering() {
    let context = UIGraphicsGetCurrentContext()!

    // the shape, a triangle
    let bezierPath = UIBezierPath()
    bezierPath.move(to: CGPoint(x: 0, y: 32))
    bezierPath.addLine(to: CGPoint(x: 16, y: 0))
    bezierPath.addLine(to: CGPoint(x: 32, y: 32))
    bezierPath.close()

    // set shadow
    context.setShadow(offset: CGSize(width: 4, height: 4), blur: 8.0, color: UIColor.black.cgColor)

    // render the shape with shadow
    context.addPath(bezierPath.cgPath)
    UIColor.red.setStroke()
    context.setLineWidth(4)
    context.strokePath()
  }

The rendering result is:

func shadowOnlyRendering() {
    let context = UIGraphicsGetCurrentContext()!

    // the shape, a triangle
    let bezierPath = UIBezierPath()
    bezierPath.move(to: CGPoint(x: 0, y: 32))
    bezierPath.addLine(to: CGPoint(x: 16, y: 0))
    bezierPath.addLine(to: CGPoint(x: 32, y: 32))
    bezierPath.close()

    // set shadow
    // `drawingRect` is the canvas rect
    // add the canvas width extra horizontal offset, so that
    // shadow is separated out
    context.setShadow(offset: CGSize(width: 4 + drawingRect.width, height: 4), blur: 8.0, color: UIColor.black.cgColor)

    // compensate the extra horizontal offset added to the shadow
    // so that the shadow is rendered at correct place, and the 
    // main shape is moved out of the canvas.
    context.translateBy(x: -drawingRect.width, y: 0)

    // render the shadow only
    // shape is out of the canvas
    context.addPath(bezierPath.cgPath)
    UIColor.red.setStroke()
    context.setLineWidth(4)
    context.strokePath()
}

The rendering result is: