Strange effect when using Drawable opacity. bug?

General JUCE discussion
1

ok, im using Drawable::drawWithin to position someting and it works fine when opacity = 1. However, when i change this value to non-unity, the object comes out in a different position (ie the wrong position). i had a look at the code and it’s to do with setting up a transparent layer. after that i got lost.

i think this is a bug. im using the latest code. anything in this area changed recently?

– hugh.

2

Hmm… To test this, I ran the jucedemo rendering page, selected “SVG” and turned down the opacity, but that seems to work ok.

Does sound like a bug though, can you give me a code snippet that would reproduce it?

3

here’s a sample app. i create a component with SVG image. when opacity != 1, the figure is shifted down, chopping off the man’s feet. when opacity = 1, everything is ok.

#include "MainWindow.h"

namespace images
{
    extern const char*  man_svg;
    const int           man_svgSize = 3349;

};

static const unsigned char temp1[] = {60,63,120,109,108,32,118,101,114,115,105,111,110,61,34,49,46,48,34,32,101,110,99,111,100,105,110,103,61,34,85,84,70,45,56,34,32,115,116,97,
  110,100,97,108,111,110,101,61,34,110,111,34,63,62,10,60,33,45,45,32,67,114,101,97,116,101,100,32,119,105,116,104,32,73,110,107,115,99,97,112,
  101,32,40,104,116,116,112,58,47,47,119,119,119,46,105,110,107,115,99,97,112,101,46,111,114,103,47,41,32,45,45,62,10,10,60,115,118,103,10,32,
  32,32,119,105,100,116,104,61,34,55,52,52,46,48,57,52,52,56,56,49,57,34,10,32,32,32,104,101,105,103,104,116,61,34,49,48,53,50,46,51,
  54,50,50,48,52,55,34,10,32,32,32,105,100,61,34,115,118,103,50,34,10,32,32,32,118,101,114,115,105,111,110,61,34,49,46,49,34,10,32,32,
  32,105,110,107,115,99,97,112,101,58,118,101,114,115,105,111,110,61,34,48,46,52,56,46,49,32,34,10,32,32,32,115,111,100,105,112,111,100,105,58,
  100,111,99,110,97,109,101,61,34,78,101,119,32,100,111,99,117,109,101,110,116,32,49,34,62,10,32,32,60,103,10,32,32,32,32,32,105,110,107,115,
  99,97,112,101,58,108,97,98,101,108,61,34,76,97,121,101,114,32,49,34,10,32,32,32,32,32,105,110,107,115,99,97,112,101,58,103,114,111,117,112,
  109,111,100,101,61,34,108,97,121,101,114,34,10,32,32,32,32,32,105,100,61,34,108,97,121,101,114,49,34,62,10,32,32,32,32,60,112,97,116,104,
  10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,116,121,112,101,61,34,97,114,99,34,10,32,32,32,32,32,32,32,115,116,121,108,101,
  61,34,102,105,108,108,58,35,49,99,51,101,102,49,59,102,105,108,108,45,111,112,97,99,105,116,121,58,49,59,115,116,114,111,107,101,58,110,111,110,
  101,34,10,32,32,32,32,32,32,32,105,100,61,34,112,97,116,104,50,57,56,53,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,
  99,120,61,34,52,56,51,46,51,51,51,51,52,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,99,121,61,34,53,49,51,46,48,
  50,56,56,55,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,114,120,61,34,49,55,56,34,10,32,32,32,32,32,32,32,115,111,
  100,105,112,111,100,105,58,114,121,61,34,50,48,52,46,54,54,54,54,55,34,10,32,32,32,32,32,32,32,100,61,34,109,32,54,54,49,46,51,51,
  51,51,52,44,53,49,51,46,48,50,56,56,55,32,97,32,49,55,56,44,50,48,52,46,54,54,54,54,55,32,48,32,49,32,49,32,45,51,53,54,
  44,48,32,49,55,56,44,50,48,52,46,54,54,54,54,55,32,48,32,49,32,49,32,51,53,54,44,48,32,122,34,10,32,32,32,32,32,32,32,116,
  114,97,110,115,102,111,114,109,61,34,116,114,97,110,115,108,97,116,101,40,45,49,48,52,44,45,54,56,41,34,32,47,62,10,32,32,32,32,60,112,
  97,116,104,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,116,121,112,101,61,34,97,114,99,34,10,32,32,32,32,32,32,32,115,116,
  121,108,101,61,34,102,105,108,108,58,35,49,99,51,101,102,49,59,102,105,108,108,45,111,112,97,99,105,116,121,58,49,59,115,116,114,111,107,101,58,
  110,111,110,101,34,10,32,32,32,32,32,32,32,105,100,61,34,112,97,116,104,50,57,56,55,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,
  100,105,58,99,120,61,34,51,55,54,46,54,54,54,54,54,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,99,121,61,34,49,55,
  57,46,54,57,53,53,49,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,114,120,61,34,55,50,46,54,54,54,54,54,52,34,10,
  32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,114,121,61,34,55,48,34,10,32,32,32,32,32,32,32,100,61,34,109,32,52,52,57,46,
  51,51,51,51,50,44,49,55,57,46,54,57,53,53,49,32,97,32,55,50,46,54,54,54,54,54,52,44,55,48,32,48,32,49,32,49,32,45,49,52,
  53,46,51,51,51,51,51,44,48,32,55,50,46,54,54,54,54,54,52,44,55,48,32,48,32,49,32,49,32,49,52,53,46,51,51,51,51,51,44,48,
  32,122,34,10,32,32,32,32,32,32,32,116,114,97,110,115,102,111,114,109,61,34,116,114,97,110,115,108,97,116,101,40,45,52,44,45,52,41,34,32,
  47,62,10,32,32,32,32,60,112,97,116,104,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,116,121,112,101,61,34,97,114,99,34,10,
  32,32,32,32,32,32,32,115,116,121,108,101,61,34,102,105,108,108,58,35,49,99,51,101,102,49,59,102,105,108,108,45,111,112,97,99,105,116,121,58,
  49,59,115,116,114,111,107,101,58,110,111,110,101,34,10,32,32,32,32,32,32,32,105,100,61,34,112,97,116,104,50,57,56,57,34,10,32,32,32,32,
  32,32,32,115,111,100,105,112,111,100,105,58,99,120,61,34,49,51,52,46,54,54,54,54,55,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,
  100,105,58,99,121,61,34,50,52,49,46,48,50,56,56,53,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,114,120,61,34,52,48,
  34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,114,121,61,34,52,51,46,51,51,51,51,51,50,34,10,32,32,32,32,32,32,32,
  100,61,34,109,32,49,55,52,46,54,54,54,54,55,44,50,52,49,46,48,50,56,56,53,32,97,32,52,48,44,52,51,46,51,51,51,51,51,50,32,
  48,32,49,32,49,32,45,55,57,46,57,57,57,57,57,56,44,48,32,52,48,44,52,51,46,51,51,51,51,51,50,32,48,32,49,32,49,32,55,57,
  46,57,57,57,57,57,56,44,48,32,122,34,10,32,32,32,32,32,32,32,116,114,97,110,115,102,111,114,109,61,34,116,114,97,110,115,108,97,116,101,
  40,53,56,46,54,54,54,54,54,54,44,56,48,41,34,32,47,62,10,32,32,32,32,60,112,97,116,104,10,32,32,32,32,32,32,32,116,114,97,110,
  115,102,111,114,109,61,34,116,114,97,110,115,108,97,116,101,40,52,51,55,46,51,51,51,51,50,44,57,49,46,51,51,51,51,50,57,41,34,10,32,
  32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,116,121,112,101,61,34,97,114,99,34,10,32,32,32,32,32,32,32,115,116,121,108,101,61,34,
  102,105,108,108,58,35,49,99,51,101,102,49,59,102,105,108,108,45,111,112,97,99,105,116,121,58,49,59,115,116,114,111,107,101,58,110,111,110,101,34,
  10,32,32,32,32,32,32,32,105,100,61,34,112,97,116,104,50,57,56,57,45,53,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,
  99,120,61,34,49,51,52,46,54,54,54,54,55,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,99,121,61,34,50,52,49,46,48,
  50,56,56,53,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,114,120,61,34,52,48,34,10,32,32,32,32,32,32,32,115,111,100,
  105,112,111,100,105,58,114,121,61,34,52,51,46,51,51,51,51,51,50,34,10,32,32,32,32,32,32,32,100,61,34,109,32,49,55,52,46,54,54,54,
  54,55,44,50,52,49,46,48,50,56,56,53,32,97,32,52,48,44,52,51,46,51,51,51,51,51,50,32,48,32,49,32,49,32,45,55,57,46,57,57,
  57,57,57,56,44,48,32,52,48,44,52,51,46,51,51,51,51,51,50,32,48,32,49,32,49,32,55,57,46,57,57,57,57,57,56,44,48,32,122,34,
  32,47,62,10,32,32,32,32,60,112,97,116,104,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,116,121,112,101,61,34,97,114,99,34,
  10,32,32,32,32,32,32,32,115,116,121,108,101,61,34,102,105,108,108,58,35,49,99,51,101,102,49,59,102,105,108,108,45,111,112,97,99,105,116,121,
  58,49,59,115,116,114,111,107,101,58,110,111,110,101,34,10,32,32,32,32,32,32,32,105,100,61,34,112,97,116,104,51,48,49,53,34,10,32,32,32,
  32,32,32,32,115,111,100,105,112,111,100,105,58,99,120,61,34,49,53,53,46,51,51,51,51,51,34,10,32,32,32,32,32,32,32,115,111,100,105,112,
  111,100,105,58,99,121,61,34,56,48,57,46,54,57,53,53,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,114,120,61,34,53,56,
  34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,114,121,61,34,49,52,48,34,10,32,32,32,32,32,32,32,100,61,34,109,32,50,
  49,51,46,51,51,51,51,51,44,56,48,57,46,54,57,53,53,32,97,32,53,56,44,49,52,48,32,48,32,49,32,49,32,45,49,49,54,46,48,48,
  48,48,48,50,44,48,32,53,56,44,49,52,48,32,48,32,49,32,49,32,49,49,54,46,48,48,48,48,48,50,44,48,32,122,34,10,32,32,32,32,
  32,32,32,116,114,97,110,115,102,111,114,109,61,34,116,114,97,110,115,108,97,116,101,40,49,52,52,44,45,49,48,49,46,51,51,51,51,51,41,34,
  32,47,62,10,32,32,32,32,60,112,97,116,104,10,32,32,32,32,32,32,32,116,114,97,110,115,102,111,114,109,61,34,116,114,97,110,115,108,97,116,
  101,40,51,48,51,46,51,51,51,51,52,44,45,49,48,50,46,54,54,54,54,52,41,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,
  58,116,121,112,101,61,34,97,114,99,34,10,32,32,32,32,32,32,32,115,116,121,108,101,61,34,102,105,108,108,58,35,49,99,51,101,102,49,59,102,
  105,108,108,45,111,112,97,99,105,116,121,58,49,59,115,116,114,111,107,101,58,110,111,110,101,34,10,32,32,32,32,32,32,32,105,100,61,34,112,97,
  116,104,51,48,49,53,45,53,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,99,120,61,34,49,53,53,46,51,51,51,51,51,34,
  10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,99,121,61,34,56,48,57,46,54,57,53,53,34,10,32,32,32,32,32,32,32,115,111,
  100,105,112,111,100,105,58,114,120,61,34,53,56,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,114,121,61,34,49,52,48,34,10,
  32,32,32,32,32,32,32,100,61,34,109,32,50,49,51,46,51,51,51,51,51,44,56,48,57,46,54,57,53,53,32,97,32,53,56,44,49,52,48,32,
  48,32,49,32,49,32,45,49,49,54,46,48,48,48,48,48,50,44,48,32,53,56,44,49,52,48,32,48,32,49,32,49,32,49,49,54,46,48,48,48,
  48,48,50,44,48,32,122,34,32,47,62,10,32,32,32,32,60,112,97,116,104,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,116,121,
  112,101,61,34,97,114,99,34,10,32,32,32,32,32,32,32,115,116,121,108,101,61,34,102,105,108,108,58,35,102,102,102,102,102,102,59,102,105,108,108,
  45,111,112,97,99,105,116,121,58,49,59,115,116,114,111,107,101,58,110,111,110,101,34,10,32,32,32,32,32,32,32,105,100,61,34,112,97,116,104,51,
  56,50,55,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,99,120,61,34,51,53,50,34,10,32,32,32,32,32,32,32,115,111,100,
  105,112,111,100,105,58,99,121,61,34,51,56,48,46,51,54,50,49,56,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,114,120,61,
  34,50,52,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,114,121,61,34,50,53,46,51,51,51,51,51,52,34,10,32,32,32,32,
  32,32,32,100,61,34,109,32,51,55,54,44,51,56,48,46,51,54,50,49,56,32,97,32,50,52,44,50,53,46,51,51,51,51,51,52,32,48,32,49,
  32,49,32,45,52,56,44,48,32,50,52,44,50,53,46,51,51,51,51,51,52,32,48,32,49,32,49,32,52,56,44,48,32,122,34,10,32,32,32,32,
  32,32,32,116,114,97,110,115,102,111,114,109,61,34,109,97,116,114,105,120,40,48,46,53,53,50,54,51,49,53,57,44,48,44,48,44,48,46,53,53,
  50,54,51,49,53,57,44,49,53,50,46,48,55,48,49,55,44,45,53,48,46,53,48,52,54,52,52,41,34,32,47,62,10,32,32,32,32,60,112,97,
  116,104,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,116,121,112,101,61,34,97,114,99,34,10,32,32,32,32,32,32,32,115,116,121,
  108,101,61,34,102,105,108,108,58,35,102,102,102,102,102,102,59,102,105,108,108,45,111,112,97,99,105,116,121,58,49,59,115,116,114,111,107,101,58,110,
  111,110,101,34,10,32,32,32,32,32,32,32,105,100,61,34,112,97,116,104,51,56,50,55,45,53,34,10,32,32,32,32,32,32,32,115,111,100,105,112,
  111,100,105,58,99,120,61,34,51,53,50,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,99,121,61,34,51,56,48,46,51,54,50,
  49,56,34,10,32,32,32,32,32,32,32,115,111,100,105,112,111,100,105,58,114,120,61,34,50,52,34,10,32,32,32,32,32,32,32,115,111,100,105,112,
  111,100,105,58,114,121,61,34,50,53,46,51,51,51,51,51,52,34,10,32,32,32,32,32,32,32,100,61,34,109,32,51,55,54,44,51,56,48,46,51,
  54,50,49,56,32,97,32,50,52,44,50,53,46,51,51,51,51,51,52,32,48,32,49,32,49,32,45,52,56,44,48,32,50,52,44,50,53,46,51,51,
  51,51,51,52,32,48,32,49,32,49,32,52,56,44,48,32,122,34,10,32,32,32,32,32,32,32,116,114,97,110,115,102,111,114,109,61,34,109,97,116,
  114,105,120,40,48,46,53,53,50,54,51,49,53,57,44,48,44,48,44,48,46,53,53,50,54,51,49,53,57,44,50,48,56,46,49,52,48,51,52,44,
  45,53,49,46,49,55,49,51,49,41,34,32,47,62,10,32,32,60,47,103,62,10,60,47,115,118,103,62,10,0,0};
const char* images::man_svg = (const char*) temp1;

class Panel: public Component
{
public:

    Panel()
    {
        setSize(640,480);
        _img = Drawable::createFromImageData(images::man_svg,
                                             images::man_svgSize);
    }

    ~Panel() { delete _img; }

    void paint(Graphics& g)
    {
        // background
        g.fillAll(Colours::yellow);

        // image will come out in wrong place, moved down.
        // change this to 1.0 and everything works!
        float opacity = 0.4f;

        // draw image
        RectanglePlacement place(0);
        Rectangle<int> bounds = getLocalBounds();
        _img->drawWithin(g, bounds.toFloat(), place, opacity);
    }

private:

    Drawable*   _img;
};


//==============================================================================
MainAppWindow::MainAppWindow()
    : DocumentWindow (JUCEApplication::getInstance()->getApplicationName(),
                      Colours::lightgrey,
                      DocumentWindow::allButtons)
{

    centreWithSize (500, 400);
    setResizable(true, false);
    setContentOwned(new Panel, true);    
    setVisible(true);

}

void MainAppWindow::closeButtonPressed()
{
    JUCEApplication::getInstance()->systemRequestedQuit();
}
4

Ouch! It was a particularly silly typo! Thanks for the example code - should be fixed now!

5

Thanks for the fix, but it didnt pull here. have there been any new branch changes recently?

6

Yep, everything’s moved back onto the master branch now!

7

ahah! ok, i’ve switched to the master branch (and got some other fixes too!).

Thanks. everything works now.

– hugh.