I ran across a need to rotate a gradient drawn with the drawing API. It wasn’t obvious how to go about it. I tried rotating the Sprite that it was drawn on but that presented issues and I know it wasn’t the right way to do it. I expect that lots of people need to create gradients that are vertical so it shouldn’t be too difficult.
Since the beginGradientFill expects a matrix as the 5th parameter I figured that was the obvious place to change the orientation of the gradient. Now the question becomes what sort of matrix do I need to create the effect I’m looking for? After toying around for a while I was able to change the gradient but not in the way I expected. Changing values and the publishing again really isn’t a good way to figure out how something works. So I created an explorer for the createGradientBox method so that I could see it change and better understand how it works. Which reminds me of one of my favorite quotes from DUNE.
A process cannot be understood by stopping it. Understanding must move with the flow of the process, must join it and flow with it.
-First Law of Mentat, DUNE
Now you can explore the createGradientBox to your hearts content.
| view source |
Hello, thanks for making this, it makes a great visual instruction manual and found the bug I was having (eg: the gradient's angle is affected by the width and height of the box).
@Caz, glad this helped out. That's why I made it. Well, that and it helps me understand it as well.
Bless you for this =) Gradients always make me a little shaky and I'm going to burn this into my head now. Just figured out how tx/ty work much better than the livedocs try.
@Kaolin, glad I could help. I was a bit shaky on gradients myself. Which was the inspiration for this post.
Yeah, thanks. This is amazingly useful!
Appreciated.
-B
Thanks a million,I clearly understood the logic of createGradientBox.I want to ask a question,the width and height property comparison with x and y translation.Sorry to say ,I haven't got deep understanding on gradients,but from this example the width and height is functioning in same way as tx and ty.I just want to ask is significance of width and height in relation to tx and ty.
@Santosh, interesting, I thought I knew how it worked. After playing around with it a bit I’m not sure now. Thank’s for making me stupider. :)
Great sample. Thanks a ton!!!
How hard would it be to extend this tester to show “radial” fillTypes?