How do I create and distribute diagonal stripes on a rectangle?

Question

I would like to be able to create bar charts with JFreeChart that looks similar to the following picture.

It is a very basic mono-colored bar chart, but with one "fancy" detail: the diagonal stripes. I was thinking that this could be made possible by overlaying another picture on top of the normal bar. This picture would have the same dimensions as the bar, have diagonal white stripes and a transparent background. I am not quite sure how to do this though, as I have very little GUI experience, but I found a very useful article that deals with overlaying images on top of graphics from JFreeChart, so I am quite certain I should be able to pull that of.

But how should I create the diagonal stripes? I see how I could distribute the lines from the lower left corner to the upper right corner, but not the capped lines in the upper left and lower right corner. Can I somehow paint outside the rectangle (and not have it included in the picture)?

edit: After some searching I cannot see that my suggestion of overlaying an image with a transparent background would work, as I cannot find any examples on how to do this. On the other hand, merely painting the lines on the rectangle is probably easier.

Geometrician

Do you want this pattern on the chart's bars or background? – Otology

I want to paint the bars, not the background. – Geometrician

Answer 1

Using a gradient fill to draw lines

On trashgod's tip I tried filling a shape with a gradient that had sharp edges to simulate line drawing. This would prevent a lot of calculations and could potentially be a lot simpler. It worked quite ok for thick lines, but not for thinner lines. Using the following code produces the fill in the first picture:

    rect.setSpace(spaceBetweenLines);
    Color bg = Color.YELLOW;
    Color fg = Color.BLUE;
    rect.setPaint(new LinearGradientPaint(
            (float) startX, (float) startY, (float) (startX + spaceBetweenLines), (float) (startY + spaceBetweenLines),
            new float[] {0,.1f,.1001f}, new Color[] {fg,fg,bg}, MultipleGradientPaint.CycleMethod.REPEAT)
    );

Drawing lines using graphic primitives

Although simpler it did not work in my case. The more elaborate, but to me, more natural way of doing it, is simply drawing lines on top of the shape (rectangle, cirle, ...). The following code was used in producing the second image. Observe the use of the clip(Shape s) to restrict the line drawing to the shape underneath. The reason for not simply drawing a rectangle and using clip() to limit the shape is that the clip() operation is not aliased, thus producing jaggies. Therefore I have to draw the shape first to get smooth edges, then set the clip to prevent overflow in the forthcoming line drawing, and finally draw the lines.

public void paint(Graphics g) {
    Graphics2D g2 = (Graphics2D) g;
    g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

    g2.setPaint(getBackground());
    g2.fill(getShape());
    g2.setClip(getShape());

    // draw diagonal lines
    g2.setPaint(getLineColor());

    for (int x = (int) this.x, y = (int) (this.y); y - height < (this.y + height + getSpace()); ) {
        g2.drawLine(x, y ,  x + (int) width , y  - (int) width);

        y += getSpace();
    }

Geometrician

Just had a similar requirement and used linear gradient with MultipleGradientPaint.CycleMethod.REFLECT. No corruption this way. – Lipfert

is there any way to achieve this code in android or please post full code for the above answer @Geometrician – Sweetscented

@KoVartthan This is the full code. The code is using Swing and AWT primitives. They are not supported on Android. And I haven't coded Java in 4 years, so no, I cannot do your homework. – Geometrician

Answer 2

The source code for BarChartDemo1 shows how to apply a GradientPaint, but you may want to experiment with LinearGradientPaint to get the diagonal effect.

I want to paint the bars, not the background.

If you already have a suitable image, TexturePaint may be an alternative.

Otology

Thanks for that, but that seems more advanced than what is necessary ... ? I updated my question with some more info: its drawing the corner cases (literally) that is the problem. – Geometrician

Note LinearGradientPaint requires Java 1.6+. – Otology

Using a linear gradient fill does kind of work, but only for thicker lines. Once you try to do sub 5px lines you start getting weird artifacts. I experimented a bit with this, but it was a no go ... It was faster than drawing lots of lines though! Thanks for the tip. – Geometrician

Predi added a tip for avoid the corruption btw. Haven't tested it though (not doing Java atm). – Geometrician