Drawing images to 4 different points

Question

I have a quadrilateral drawn in Path2D, and I would like for there to be an image on it. More specifically, I am trying to draw an image of my choice to 4 different points on a quadrilateral. In my case, it is a parallelogram. I do not want the image to go over the paralellogram. A better way to see what I am trying to say is to see the screenshot below.

I would like the image to be transformed to fit the green area. Not clipped.

I want the image to be pinned over the green paralellogram. However. I do not want the image to go over into the blue paralellogram, or the white space foe that matter.

So far I have tried

• Researching for a way to place images directly onto Path2D.Double() objects. No answer
• Rotating the image to fit the paralellogram. Didnt work.
• Using AffineTransform in java. Dont get it ;-;

Thanks. I am new to java so do try to be lenient?

Answer 1

One way is to:

1. create a separate BufferedImage.
2. Apply a transform to the new image.
3. Draw your image to that new image.
4. Use the Shape object for the green area as a clip on the main drawing area
5. Draw the transformed image onto the main drawing area.

It's been a while since I have done transformations. You may have to set the transformation first and then draw the image after. Transformation has to come first.

public void paintComponent(Graphics g) {
    Graphics2D g2 = (Graphics2D)g;
    g2.transform(AffineTransform.getShearInstance(1.0, 0));
    g2.drawImage(image, 0, 0, this);
}

Here is a simple example of how transforms work. You will have to spend some time on figuring out what values you need to make it work or if you might need to manually create a transformation matrix yourself.