×

Discussion Board

Results 1 to 9 of 9

Thread: Radial Gradient

  1. #1
    Registered User
    Join Date
    Oct 2009
    Posts
    5

    Radial Gradient

    Hi!

    I'm new to symbian development and I'm trying to draw a pie via the DrawPie() method.
    So far I managed to do it with success but only for solid colors. I need a "radial gradient" brush instead.
    Does anyone knows a way to do this effect? What classes and/or resources should I look for?

    Thanks,
    - Magneto

  2. #2
    Registered User
    Join Date
    Nov 2008
    Location
    Mumbai-India
    Posts
    379

    Re: Radial Gradient

    chk ColorUtils class in sdk help

  3. #3
    Nokia Developer Moderator
    Join Date
    Feb 2006
    Location
    Oslo, Norway
    Posts
    28,752

    Re: Radial Gradient

    Gradient brushes do not really exist as far as I know, however if you have a bitmap containing a suitable gradient pattern (or anything else), you can use it as brush pattern.
    Actually there is an API for creating gradients: ColorUtils::CreateGradientBitmapL is able to do that. Unfortunately it is capable of creating horizontal and vertical gradients only, no radial stuff.
    However a thing which supports radial gradient is .svg, so you could load a .svg/mif and use it for brush pattern.

  4. #4
    Registered User
    Join Date
    Oct 2009
    Posts
    5

    Re: Radial Gradient

    Thank you guys for your help so far...

    Can you please share with my a code snippet on how to use the mentioned class and an .svg file. Or the process to tryout something? I never used external images inside my application.
    The only thing I remember seeing was a graphical effect using the brush pattern and the image was tiled all around the area plotted. This is not my desired effect at all. :(

  5. #5
    Nokia Developer Moderator
    Join Date
    Feb 2006
    Location
    Oslo, Norway
    Posts
    28,752

    Re: Radial Gradient

    Which SDK do you use?

  6. #6
    Registered User
    Join Date
    Oct 2009
    Posts
    5

    Re: Radial Gradient

    3rd Edition with and without FP.

  7. #7
    Nokia Developer Moderator
    Join Date
    Feb 2006
    Location
    Oslo, Norway
    Posts
    28,752

    Re: Radial Gradient

    So, here is a rude, but working example:
    Create a file, grad.svg
    Code:
    <svg width="100" height="100" viewBox="0 0 100 100">
      <radialGradient id="PieGrad" gradientUnits="userSpaceOnUse" cx="50" cy="50" r="50" fx="50" fy="50">
        <stop offset="0%" stop-color="black" />
        <stop offset="30%" stop-color="yellow" />
        <stop offset="60%" stop-color="red" />
        <stop offset="100%" stop-color="black" />
      </radialGradient>
      <rect fill="url(#PieGrad)" width="100" height="100" />
    </svg>
    this will be used as the fill pattern (you can check it in an SVG viewer) - you are right about repetition of tiles, but since SVG is Scalable Vector Graphics, we will simply rescale the pattern prior to filling, so the tile will be properly sized for the give pie-slice.

    Then convert it to .mif - this example is for S60 3rd MR:
    Code:
    \Symbian\9.1\S60_3rd_MR\Epoc32\tools\mifconv.exe \Symbian\9.1\S60_3rd_MR\Epoc32\winscw\c\grad.mif /c24,1 grad.svg
    the proper way would be creating a long makefile - you can check that in the SDK examples. But a single line is more efficient to post.

    Then we are ready. Load the .mif file in the ConstructL of the control:
    Code:
    #include <akniconutils.h>
    
    void CGradTestView::ConstructL(const TRect& aRect)
    {
        CreateWindowL();
        SetRect(aRect);
        iGrad=AknIconUtils::CreateIconL(_L("c:\\grad.mif"),16384);
        AknIconUtils::PreserveIconData(iGrad);
        ActivateL();
    }
    and resize+use it as fill pattern in Draw:
    Code:
    void CGradTestView::Draw(const TRect& /*aRect*/) const
    {
        CWindowGc& gc = SystemGc();
        gc.Clear();
    
        AknIconUtils::SetSize(iGrad,TSize(30,30),EAspectRatioNotPreserved);
        gc.BitBlt(TPoint(0,0),iGrad);
        gc.UseBrushPattern(iGrad);
        gc.SetBrushStyle(CGraphicsContext::EPatternedBrush);
        gc.SetBrushOrigin(TPoint(0,50));
        gc.DrawPie(TRect(0,50,30,80),TPoint(0,0),TPoint(0,80));
        
        AknIconUtils::SetSize(iGrad,TSize(200,150),EAspectRatioNotPreserved);
        gc.BitBlt(TPoint(40,0),iGrad);
        gc.UseBrushPattern(iGrad);
        gc.SetBrushOrigin(TPoint(40,100));
        gc.DrawPie(TRect(40,100,240,250),TPoint(0,250),TPoint(320,250));
    }
    where iGrad is "CFbsBitmap *iGrad;" in the .h file (do not forget deleting it in the destructor), and you will need aknicon.lib in the .mmp

  8. #8
    Registered User
    Join Date
    Oct 2009
    Posts
    5

    Re: Radial Gradient

    Thank so much for your help!
    I will try it out...

    - Magneto

  9. #9
    Nokia Developer Moderator
    Join Date
    Feb 2006
    Location
    Oslo, Norway
    Posts
    28,752

    Re: Radial Gradient

    Recently I have a bad feeling about the interpretation of "radial". So "radialgradient" of SVG is about "filling with concentric ellipses" (roughly said). If you meant a "color picker"-like gradient, where color changes with the angle, that would be an other story, with trigonometric magic.

Similar Threads

  1. Howto: Change gradient of Polygon element programmatically
    By ieising in forum Mobile Java Media (Graphics & Sounds)
    Replies: 0
    Last Post: 2009-05-25, 16:22
  2. [moved] S60 SDK5th edition and gradient bitmaps cause Panic BITGDI 13.
    By palringosymbian in forum Symbian User Interface
    Replies: 7
    Last Post: 2009-02-12, 13:57
  3. Gradient
    By j.teixeira in forum Mobile Java Media (Graphics & Sounds)
    Replies: 4
    Last Post: 2007-03-15, 00:28
  4. SVG Application gradient problem
    By stenlik in forum Symbian Media (Closed)
    Replies: 7
    Last Post: 2007-02-25, 20:08
  5. Gradient Fill Banding Problems
    By benc_1 in forum Mobile Java Media (Graphics & Sounds)
    Replies: 2
    Last Post: 2005-09-14, 13:53

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×