# Core Graphics Tutorial Part 2: Gradients and Contexts **URL:** \ **Category:** 🎓 Courses & Articles\ **Created:** [March 4, 2016, 10:51am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559 "2016-03-04T10:51:20Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\ **Post date:** [March 4, 2016, 10:51am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/1 "2016-03-04T10:51:20Z")
Continue learning about Core Graphics including concepts like clipping, gradients, contexts, transforms, and more! * * * This is a companion discussion topic for the original entry at [https://www.raywenderlich.com/1972-core-graphics-tutorial-part-2-gradients-and-contexts](https://www.raywenderlich.com/1972-core-graphics-tutorial-part-2-gradients-and-contexts) ---
**Author:** ![dboy](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/dboy/32/8302_2.png) [@dboy](https://forums.kodeco.com/u/dboy)\ **Post date:** [March 14, 2016, 4:16am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/2 "2016-03-14T04:16:59Z")
One note here: The `options` parameter for `UIView.transitionFromView:toView:duration:options:completion:` no longer support `|` operation. I did some survey for the reason for this and found out that `UIViewAnimationOptions` is now conform to `OptionSetType` protocol since Swift 2. That is to say you need to call `union` or `intersect` defined by the implementation of `OptionSetType` protocol. In Flo project, you need to change the line of code calling `UIView.transitionFromView` to ```auto let options = UIViewAnimationOptions.TransitionFlipFromLeft.union(.ShowHideTransitionViews) UIView.transitionFromView( graphView, toView: arcView, duration: 1.0, options: options, completion:nil ) ``` ---
**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\ **Post date:** [March 14, 2016, 1:05pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/3 "2016-03-14T13:05:09Z")
Thank you for pointing that out 🙂 - the swift 1.2 to 2.0 conversion tool suggests this: ```auto UIView.transitionFromView(counterView, toView: graphView, duration: 1.0, options: [TransitionFlipFromRight, .ShowHideTransitionViews], completion: nil) ``` So you can just put the options in an array without using .union. ---
**Author:** ![dboy](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/dboy/32/8302_2.png) [@dboy](https://forums.kodeco.com/u/dboy)\ **Post date:** [March 16, 2016, 7:20am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/4 "2016-03-16T07:20:35Z")
Nice, putting an array here makes more sense. ---
**Author:** ![nontomatic](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/nontomatic/32/81494_2.png) [@nontomatic](https://forums.kodeco.com/u/nontomatic)\ **Post date:** [May 7, 2016, 7:12pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/5 "2016-05-07T19:12:49Z")
A small correction for the current Swift version: When drawing the gradient for the first time in this tutorial, the line: `CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0)` needs to be `CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, CGGradientDrawingOptions(rawValue: 0))` ---
**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\ **Post date:** [May 7, 2016, 11:56pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/6 "2016-05-07T23:56:01Z")
Thank you, nontomatic 🙂 Swift 2.0 changed bitwise comparisons to OptionSetTypes. You can read more about them here: > **[Notes from WWDC 2015: The Enumerated Delights of Swift 2.0 Option Sets | |...](https://www.informit.com/articles/article.aspx?p=2420231)** > > Swift 2.0 contains a mix of updated, redesigned, and completely new features. In this article, Erica Sadun, author of \The Gourmet iOS... Better code would be this: ```auto CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, []) ``` where `[]` would be an array of `CGGradientDrawingOptions` with the necessary options in the array. ---
**Author:** ![trafnar](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/trafnar/32/34350_2.png) [@trafnar](https://forums.kodeco.com/u/trafnar)\ **Post date:** [June 14, 2016, 5:44am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/7 "2016-06-14T05:44:05Z")
In this line, `UIView.transitionFromView(GraphView, ...` I get the error "Cannot convert value of type ‘GraphView.Type’ to expected argument type ‘UIView’, which makes sense, but I’m not sure what to do about it. Any tips for me? ---
**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\ **Post date:** [June 15, 2016, 11:58pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/8 "2016-06-15T23:58:21Z")
Swift 2.0 changed bitwise comparisons to OptionSetTypes. You can read more about them here: [http://www.informit.com/articles/article.aspx?p=24202311](http://www.informit.com/articles/article.aspx?p=24202311) Try this: ```auto UIView.transitionFromView(graphView, toView: counterView, duration: 1.0, options: [.TransitionFlipFromLeft, .ShowHideTransitionViews], completion:nil) ``` Anywhere you see old code showing the bit mask or | operation, it’s probably changed to being an OptionSetType, which will be an array of all the options. It looks neater than the bit mask operation (I think) :). ---
**Author:** ![trafnar](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/trafnar/32/34350_2.png) [@trafnar](https://forums.kodeco.com/u/trafnar)\ **Post date:** [June 19, 2016, 12:25am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/9 "2016-06-19T00:25:24Z")
I may be misunderstanding, but I seem to be having a separate issue from that. I already changed my code to the array syntax based on an earlier comment. The part that seems to be producing my error is the first parameter to `transitionFromView` , which is `graphView`. Xcode is telling me it’s expecting a UIView rather than a GraphView type. Sorry if I am missing something with your explanation, and thanks for your help! ---
**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\ **Post date:** [June 20, 2016, 7:56am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/10 "2016-06-20T07:56:32Z")
I just noticed that you said: > `UIView.transitionFromView(GraphView,` `GraphView` is the class, but `graphView` is an instance of the class. Try changing from big G to small g and see if that helps. ---
**Author:** ![trafnar](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/trafnar/32/34350_2.png) [@trafnar](https://forums.kodeco.com/u/trafnar)\ **Post date:** [June 20, 2016, 4:28pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/11 "2016-06-20T16:28:36Z")
Of course. That’s an embarrassing mistake, thanks so much for the assistance! ---
**Author:** ![tanvu](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/tanvu/32/102075_2.png) [@tanvu](https://forums.kodeco.com/u/tanvu)\ **Post date:** [June 21, 2016, 2:16am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/12 "2016-06-21T02:16:08Z")
Just wonder why you don’t use CAGradientLayer when you create a gradient layer. It’s quite simple than using CGContextDrawLinearGradient function. Here’s are my solution: ```auto let gradientLayer = CAGradientLayer() gradientLayer.frame = bounds gradientLayer.colors = colors layer.insertSublayer(gradientLayer, atIndex: 0) ``` ---
**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\ **Post date:** [June 21, 2016, 11:18pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/13 "2016-06-21T23:18:46Z")
Thank you for adding this @tanvu. Yes, an alternative is `CAGradientLayer`, and I would encourage people to look into `CALayers`. It’s always good to know about alternatives and be able to use either equally well. In this particular situation, where I am drawing into a context already, I personally would use `CGContextDrawLinearGradient` as I have points in the method all worked out for masking. ---
**Author:** ![wolfi1991](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/wolfi1991/32/36978_2.png) [@wolfi1991](https://forums.kodeco.com/u/wolfi1991)\ **Post date:** [July 14, 2016, 4:10pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/14 "2016-07-14T16:10:54Z")
Hello, I was wandering what I would have to add to the ViewContoller.swift if I would like to change the data by a button. So like show the monthly data and then the graph shows the new data. `@IBAction func MonatAnzeigen(sender: AnyObject) { graphView.graphPoints = [320,321,333,310,219,284,312,313, 321, 164, 192, 430, 130, 122,231,123,318,275,391,258,283,192,371,293,371,263,192,374,400,300,123] setupGraphDisplay() }` If I impelemt the func like this only the labels change due to the setupGraphDisplay. How do I refresh the View as well? Thanks for the Help! Best Daniel ---
**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\ **Post date:** [July 15, 2016, 2:18am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/15 "2016-07-15T02:18:43Z")
@wolfi1991 Have you tried ``` graphView.setNeedsDisplay() ``` ? ---
**Author:** ![wolfi1991](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/wolfi1991/32/36978_2.png) [@wolfi1991](https://forums.kodeco.com/u/wolfi1991)\ **Post date:** [July 17, 2016, 6:53am UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/16 "2016-07-17T06:53:52Z")
@caroline Thank you! I’ve just tried it and it works perfectly. Thank you for your help Best Daniel ---
**Author:** ![icculus](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/icculus/32/39340_2.png) [@icculus](https://forums.kodeco.com/u/icculus)\ **Post date:** [August 21, 2016, 4:12pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/17 "2016-08-21T16:12:04Z")
I am Struggling with the graph and getting an error with these lines of code. graphPath.moveToPoint(CGPoint(x:columnXPoint(0), y:columnYPoint(graphPoints[0]))) for i in 1…\ **Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\ **Post date:** [August 21, 2016, 10:57pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/18 "2016-08-21T22:57:45Z") @icculus - the for loop you’ve written above doesn’t make sense. This code: ``` let graphPath = UIBezierPath() graphPath.moveToPoint(CGPoint(x:columnXPoint(0), y:columnYPoint(graphPoints[0]))) for i in 1.. **Author:** ![msheaver](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/msheaver/32/35604_2.png) [@msheaver](https://forums.kodeco.com/u/msheaver)\ **Post date:** [September 5, 2016, 7:51pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/20 "2016-09-05T19:51:07Z") This is a great discussion, and it really helped point me in the right direction. Swift 3 introduced a number of additional changes to the UIView.transition syntax, and the resulting code is: ``` UIView.transition(from: counterView, to: graphView, duration: 1.0, options: [.transitionFlipFromRight, .showHideTransitionViews], completion: nil) ``` ---
**Author:** ![msheaver](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/msheaver/32/35604_2.png) [@msheaver](https://forums.kodeco.com/u/msheaver)\ **Post date:** [September 18, 2016, 7:52pm UTC](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559/21 "2016-09-18T19:52:27Z")
In the GraphView class, inside the draw(\_ rect:) function we use addClip() to add the rounded corners. I understand how this works, for the documentation explains it pretty clearly: > This method modifies the visible drawing area of the current graphics context. I do have one question though: How is this operation able to work before the line: ` let context = UIGraphicsGetCurrentContext()` This throws me a curve, in that we can affect the context before we get the context back. How does this work? Unless the context is created as soon as the draw(rect:) function is called. [Next page](https://forums.kodeco.com/t/core-graphics-tutorial-part-2-gradients-and-contexts/6559.md?page=2)