Best approach to draw an oblique design?


Simple question, what approach would do you use to draw a design like this with Juce?



Create one big Path object, and add the stripes with addLine(). It'll be more efficient to draw it all as one Path than drawing each stripe individually.


Here is a class I just wrote for you:

class ObliqueStripRectangle : public Component, private ComponentListener
    ObliqueStripRectangle(const int stripWidth, const int alternateWidth, const Colour& stripColour = Colours::orange, const Colour& bkColour = Colours::black)
        : bk(bkColour)
        , fg(stripColour)
        , sw(stripWidth)
        , aw(alternateWidth)
        , dirty(true)
        jassert(stripWidth > 0 && alternateWidth >= 0);
        setInterceptsMouseClicks(false, false);
    ~ObliqueStripRectangle(){ patternCache = nullptr; }
    void paint(Graphics& g) override
        if (dirty)
            patternCache = nullptr;
            const int patternWidth = sw + aw;
            patternCache = new Image(Image::PixelFormat::ARGB, patternWidth, patternWidth, false);
            Path p;
            p.startNewSubPath(0, (float)patternWidth);
            p.lineTo((float)patternWidth, 0);
            p.lineTo((float)patternWidth - sw, 0);
            p.lineTo(0, (float)patternWidth - sw);
            p.startNewSubPath((float)patternWidth - sw, (float)patternWidth);
            p.lineTo((float)patternWidth, (float)patternWidth - sw);
            p.lineTo((float)patternWidth, (float)patternWidth);
            juce::Graphics ig(*patternCache);
            dirty = false;
        g.setTiledImageFill(*patternCache, 0, 0, 1.0f);
    int sw, aw;
    bool dirty;
    Colour bk;
    Colour fg;
    ScopedPointer<Image> patternCache;
    void componentMovedOrResized(Component& component,
        bool wasMoved,
        bool wasResized) override
        if (wasResized)
            dirty = true;


ObliqueStripRectangle shape(stripWidth, alternateWidth, stripColour, bkColour);
shape.setSize(w, h);


and the way to achive this:

1, make a tile first like this:

2, then set it as tile image for the graphics context


3, and then just call the fillAll method...


and simple test case:

class testWin : public TopLevelWindow
        : TopLevelWindow("test", true)
        centreWithSize(800, 600);
        testShape = new ObliqueStripRectangle(20, 20);
        testShape->setSize(getWidth(), getHeight());
    void paint(Graphics& g) override {
    ScopedPointer<ObliqueStripRectangle> testShape;


Thank you, I'm going to try it right now :)