The Paint2D component allows to create a graphic image using the graphic2D features of JDK. The attribute paint should point to a method of the bean that accept to parameters.

The first parameter has a Graphic2D type. I.e, it is a graphic canvas you can draw on.

The second parameter is your custom data you can pass to a paint method using a data attribute of the paint2D component. The Object type is using. So, you can use the bean of any type. The bean should be serializable.

To improve the performance and avoid the extra unnecessary traffic over the net, a generated image will be cached if the data is not changed. You can turn this feature off with a cacheable attribute.

Paint2D demo

Color:

Shadow:

HideView Page Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

    <br/>

        <h:form>
            <h:panelGrid columns="3" width="100%">

                <h:panelGroup>
                    <br/>
                    <h:inputText value="#{paintData.text}">
                        <a4j:support event="onkeyup" reRender=":painter" />
                    </h:inputText>
                </h:panelGroup>

                <h:panelGroup>
                        Color:
                        <rich:inputNumberSlider showInput="false"
                        showBoundaryValues="false" showToolTip="false"
                        value="#{paintData.color}" step="255" minValue="0"
                        maxValue="16000000">
                        <a4j:support event="onchange" reRender=":painter" />
                    </rich:inputNumberSlider>

                </h:panelGroup>

                <h:panelGroup>
                        Shadow:
                    <rich:inputNumberSlider showInput="false"
                        showBoundaryValues="false" showToolTip="false"
                        value="#{paintData.scale}" step="0.5" minValue="0" maxValue="3">
                        <a4j:support event="onchange" reRender=":painter" />
                    </rich:inputNumberSlider>
                     
                </h:panelGroup>

            </h:panelGrid>
        </h:form> 
        <rich:paint2D id="painter" width="300" height="120"
            data="#{paintData}" format="png" paint="#{paintBean.paint}" />

    <br/>

</ui:composition>

<<Hide Source

HideView PaintBean.java Source

package org.richfaces.demo.paint2d;


import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.geom.AffineTransform;

public class PaintBean {

       private int fontSize;

       public void paint(Graphics2D g2d, Object obj) {
       
           PaintData data = (PaintData) obj;
           
           int testLenght = data.text.length();
           fontSize = testLenght < 8? 40 : 40 - (testLenght - 8);
            if (fontSize < 12)fontSize = 12;
            Font font = new Font("Serif", Font.HANGING_BASELINE, fontSize);
            g2d.setFont(font);
           
            int x = 10;
            int y = fontSize*5/2;
            g2d.translate(x, y);
            Color color = new Color(data.color );
            
            g2d.setPaint(new Color(color.getRed(),color.getGreen(), color.getBlue(), 30));
            AffineTransform origTransform = g2d.getTransform();
            g2d.shear(-0.5*data.scale, 0);
            g2d.scale(1, data.scale);
            g2d.drawString(data.text, 0, 0);
            
            g2d.setTransform(origTransform);
            g2d.setPaint(color);
            g2d.drawString(data.text, 0, 0);
       }
}

<<Hide Source