Graphics2D draw image inside of defined quadrilateral - java

I cannot find a draw image overload inside of Graphics2D which will enable me to perform such a task, can someone help me figure out how one might do this - preferably without swapping to more advanced graphics frameworks such as OpenGl,
thanks.
To clarify, a quad can be defined by anything with four-sides; that means a diamond or a rectangle or more elaborate shapes.
Mre has removed many of his remarks and so It seems as though I am responding to no-one, however all I have said in the comments were responses to what mre had said.

See Andrew Thomson's solution for the basics.
Instead of using a "text shape", I created a Shape using:
Polygon polygon = new Polygon();
polygon.addPoint(250, 50);
polygon.addPoint(350, 50);
polygon.addPoint(450, 150);
polygon.addPoint(350, 150);
g.setClip(polygon);
g.drawImage(originalImage, 0, 0, null);

Inherited Graphicsimage drawing methods
drawImage(Image img, int x, int y, Color bgcolor, ImageObserver observer)
drawImage(Image img, int x, int y, ImageObserver observer)
drawImage(Image img, int x, int y, int width, int height, Color bgcolor, ImageObserver observer)
drawImage(Image img, int x, int y, int width, int height, ImageObserver observer)
drawImage(Image img, int dx1, int dy1, int dx2, int dy2, int sx1, int sy1, int sx2, int sy2, Color bgcolor, ImageObserver observer)
drawImage(Image img, int dx1, int dy1, int dx2, int dy2, int sx1, int sy1, int sx2, int sy2, ImageObserver observer)
Choose your poison. Since you weren't even able to locate these, I'm assuming that going into detail about Intermediate Images when faced with scaling and frequent rendering would be futile.
Example 1 -- drawing a circle in a square
public class DrawCircleInSquare {
public static void main(String[] args){
SwingUtilities.invokeLater(new Runnable(){
#Override
public void run() {
createAndShowGUI();
}
});
}
private static void createAndShowGUI(){
final JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
final JPanel panel = new JPanel(){
#Override
protected void paintComponent(Graphics g){
Graphics2D g2 = (Graphics2D)g.create();
// Clear background to white
g2.setColor(Color.WHITE);
g2.clearRect(0, 0, getWidth(), getHeight());
// Draw square
g2.setColor(Color.BLACK);
g2.drawRect(50, 50, 100, 100);
// Draw circle inside square
g2.setColor(Color.RED);
g2.fillOval(88, 88, 24, 24);
g2.dispose();
}
#Override
public Dimension getPreferredSize(){
return new Dimension(200, 200);
}
};
frame.add(panel);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
}
Output
Example 2 -- draw an image in a square
public class DrawImageInSquare {
private static BufferedImage bi;
public static void main(String[] args){
try {
// Load image
loadImage();
// Create and show GUI
SwingUtilities.invokeLater(new Runnable(){
#Override
public void run() {
createAndShowGUI();
}
});
} catch (IOException e) {
// handle exception
}
}
private static void loadImage() throws IOException{
bi = ImageIO.read(new File("src/resources/psyduck.png"));
}
private static void createAndShowGUI(){
final JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
final JPanel panel = new JPanel(){
#Override
protected void paintComponent(Graphics g){
Graphics2D g2 = (Graphics2D)g.create();
// Clear background to white
g2.setColor(Color.WHITE);
g2.clearRect(0, 0, getWidth(), getHeight());
// Draw square
g2.setColor(Color.BLACK);
g2.drawRect(50, 50, 100, 100);
// Draw image inside square
g2.setRenderingHint(
RenderingHints.KEY_INTERPOLATION,
RenderingHints.VALUE_INTERPOLATION_BICUBIC);
g2.drawImage(bi, 50, 50, 100, 100, null);
g2.dispose();
}
#Override
public Dimension getPreferredSize(){
return new Dimension(200, 200);
}
};
frame.add(panel);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
}
Output

Related

JPanel flickering issue

For my game, I paint to a java.awt.Image then draw the Image onto a JPanel. I do this for a couple of reasons, mainly because I didn't want game rendering to hog up cpu cycles on the EDT, and for portability.
A problem arised which caused flickering on the java.awt.JPanel when using
graphics#drawImage(Image img, int x, int y, int width, int height,
ImageObserver observer)
.
However,
graphics#drawImage(Image img, int x, int y, ImageObserver observer)
did not cause this issue.
Here is my code:
Sandbox.java
public class Sandbox implements Paintable {
public static void main(String[] args) throws Exception {
GameWindow window = new GameWindow("Test", 800, 600);
GameScreen screen = new GameScreen(800, 600);
Sandbox sandbox = new Sandbox();
window.add(screen);
window.setVisible(true);
boolean running = true;
while(running) {
sandbox.update();
screen.getPaintBuffer().clear();
screen.getPaintBuffer().paint(sandbox);
screen.repaint();
Thread.sleep(1000 / 60);
}
}
private int x = 0, y = 0;
public void update() {
x++;
y++;
}
public void paint(Graphics g) {
g.drawRect(x, y, 50, 50);
}
}
GameWindow.java
public class GameWindow extends JFrame {
public GameWindow(String title, int width, int height) {
setTitle(title);
setSize(width, height);
setResizable(false);
setLocationByPlatform(true);
setDefaultCloseOperation(3);
}
}
GameScreen.java
public class GameScreen extends JPanel {
private ImageBuffer buffer;
public GameScreen(int width, int height) {
buffer = new ImageBuffer(width, height);
}
public void paint(Graphics g) {
g.drawImage(getPaintBuffer().getBuffer(), 0, 0, getWidth(), getHeight(), null);
}
public ImageBuffer getPaintBuffer() {
return buffer;
}
}
Paintable.java
public interface Paintable {
public void paint(Graphics g);
}
ImageBuffer.java
public class ImageBuffer {
private final Image buffer;
private int width, height;
public ImageBuffer(int width, int height) {
buffer = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
this.width = width;
this.height = height;
}
public void paint(Paintable paintable) {
paintable.paint(buffer.getGraphics());
}
public void clear() {
buffer.getGraphics().clearRect(0, 0, width, height);
}
public Image getBuffer() {
return buffer;
}
}
Change the GameScreen's paint method to...
Override paintComponent instead
Call super.paintComponent in order to maintain the paint chain's contract
Pass this as the ImageObsever parameter to drawImage
For example...
public class GameScreen extends JPanel {
private ImageBuffer buffer;
public GameScreen(int width, int height) {
buffer = new ImageBuffer(width, height);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.drawImage(getPaintBuffer().getBuffer(), 0, 0, getWidth(), getHeight(), this);
}
public ImageBuffer getPaintBuffer() {
return buffer;
}
}
Have a look at Painting in AWT and Swing and Performing Custom Painting for more details about how painting works
Updated
The basic problem is a scaling issue...
The image you're using to draw with is 800x600, but the GameScreen is actually 794x572 (on my PC), this causes the image to be scaled. Now, Swing's default scaling isn't pretty and is based on speed over quality generally.
Now, there are a number of ways you could improve this, but a quick way would be to apply some higher rendering hints, for example
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
g2d.setRenderingHint(RenderingHints.KEY_ALPHA_INTERPOLATION, RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHint(RenderingHints.KEY_COLOR_RENDERING, RenderingHints.VALUE_COLOR_RENDER_QUALITY);
g2d.setRenderingHint(RenderingHints.KEY_DITHERING, RenderingHints.VALUE_DITHER_ENABLE);
g2d.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);
g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
g2d.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
g2d.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_PURE);
g2d.drawImage(getPaintBuffer().getBuffer(), 0, 0, getWidth(), getHeight(), this);
g2d.dispose();
}
Now, I've gone overboard with this, so you might want to remove some and see what changes
Updated
Rendering hints could slow the rendering process down, so a better solution might to override the getPreferredSize method of GameScreen and return the expected size
public static class GameScreen extends JPanel {
private ImageBuffer buffer;
private Dimension size;
public GameScreen(int width, int height) {
buffer = new ImageBuffer(width, height);
this.size = new Dimension(width, height);
}
#Override
public Dimension getPreferredSize() {
return new Dimension(800, 600);
}
Then, rather then passing the size to GameWindow, simply call pack
GameWindow window = new GameWindow("Test");
GameScreen screen = new GameScreen(800, 600);
Sandbox sandbox = new Sandbox();
window.add(screen);
window.pack();
window.setVisible(true);
This way, everybody's on the same size

Java Graphics and Bordering Problems in JScrollPane

I have found a CustomScrollbarUIExample, and I am trying to change it completely into my own (with attribution, of course, this is legal). I have immediately run into a problem.
What I am trying to achieve is put a border around not the JScrollPane itself, but the moveable block if you understand what I meen.
I have put the modified source code below, and I have highlighted my problem.
package com.finn.chess;
import java.awt.*;
import java.awt.image.BufferedImage;
import javax.swing.*;
import javax.swing.plaf.metal.MetalScrollBarUI;
/** #see https://stackoverflow.com/a/12270067/230513 */
public class CustomScrollbarUIExample {
public static void main(String[] args) {
JScrollPane before = makeExamplePane();
JScrollPane after = makeExamplePane();
after.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_ALWAYS);
JScrollBar sb = after.getVerticalScrollBar();
sb.setUI(new MyScrollbarUI());
JFrame f = new JFrame();
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setLayout(new GridLayout(0,1));
f.add(before);
f.add(after);
f.pack();
f.setSize(320, 240);
f.setVisible(true);
}
private static JScrollPane makeExamplePane() {
JTextArea text = new JTextArea(16, 16);
text.append("Lorem ipsum dolor sit amet…");
JScrollPane scroll = new JScrollPane(text);
return scroll;
}
static class MyScrollbarUI extends MetalScrollBarUI {
private Image imageThumb, imageTrack;
private JButton b = new JButton() {
#Override
public Dimension getPreferredSize() {
return new Dimension(0, 0);
}
};
MyScrollbarUI() {
imageThumb = FauxImage.create(32, 32, Color.blue.brighter());
imageTrack = FauxImage.create(32, 32, Color.BLACK);
}
#Override
protected void paintThumb(Graphics g, JComponent c, Rectangle r) {
g.setColor(Color.blue);
((Graphics2D) g).drawImage(imageThumb,
r.x, r.y, r.width, r.height, null);
}
#Override
protected void paintTrack(Graphics g, JComponent c, Rectangle r) {
((Graphics2D) g).drawImage(imageTrack,
r.x, r.y, r.width, r.height, null);
}
#Override
protected JButton createDecreaseButton(int orientation) {
return b;
}
#Override
protected JButton createIncreaseButton(int orientation) {
return b;
}
}
private static class FauxImage {
static public Image create(int w, int h, Color c) {
BufferedImage bi = new BufferedImage(
w, h, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2d = bi.createGraphics();
g2d.setPaint(c);
g2d.fillRect(0, 0, w, h);
// THIS IS MY PROBLEM, THE BORDER
g2d.setPaint(Color.WHITE);
g2d.drawRect(0, 0, w-1, h-1);
g2d.dispose();
return bi;
}
}
}
Just at the end, you can see that I setup a border to put around it.
But in big sizes, it appears like this:
I don't want that massive block of white down the bottom; I want a simple, one pixel high border.
How do I achieve this?
Also I am posting a brand new thread because the other one was 2 years old, and I can't add ALL this into a comment.
Add the border in paintThumb(), after the image has been scaled by drawImage(). Starting from the original and using Color.red for emphasis, the result is seen below:
#Override
protected void paintThumb(Graphics g, JComponent c, Rectangle r) {
g.setColor(Color.blue);
Graphics2D g2d = (Graphics2D) g;
g2d.drawImage(imageThumb, r.x, r.y, r.width, r.height, null);
g2d.setPaint(Color.red);
g2d.drawRect(r.x, r.y, r.width - 1, r.height);
}

Rectangle not drawing on BufferedImage

I'e been learning java for a while and I've just started a project to make a functional drawing program. However the code below is supposed to draw a rectangle on a bufferedimage but it does not work.
Code for drawing rectangle
public class DrawRectangle extends Panel {
public void drawRect(int x, int y, int width, int height) {
System.out.println("new Rectangle = X:" + x + " Y:" + y + " Width:" + width + " height:" + height);
canvas.createGraphics().draw(new Rectangle2D.Double(x, y, width, height));
}}
public class Panel extends JPanel {
BufferedImage canvas = new BufferedImage(400,400, BufferedImage.TYPE_INT_ARGB);
......
public void paintComponent(Graphics g) {
super.paintComponent(g);
System.out.println("Repainting");
g.drawImage(canvas, 25, 25, null);
}}
Note: All the methods are going off correctly so it is not simply me neglecting to initiate drawRectangle()
Edit my bad: you're not setting color properly. To wit:
e.g.,
import java.awt.*;
import java.awt.geom.*;
import java.awt.image.*;
import javax.swing.*;
public class FunnyDraw {
private static void createAndShowGui() {
DrawRectangle mainPanel = new DrawRectangle();
mainPanel.drawRect(10, 10, 100, 100);
mainPanel.betterDrawRect(200, 200, 200, 200);
JFrame frame = new JFrame("FunnyDraw");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(mainPanel);
frame.pack();
frame.setLocationByPlatform(true);
frame.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
createAndShowGui();
}
});
}
}
class HisPanel extends JPanel {
private static final Color COLOR = Color.black;
private static final int PREF_W = 600;
private static final int PREF_H = 450;
protected BufferedImage canvas = new BufferedImage(PREF_W, PREF_H,
BufferedImage.TYPE_INT_ARGB);
public void paintComponent(Graphics g) {
super.paintComponent(g);
System.out.println("Repainting");
g.drawImage(canvas, 25, 25, null);
}
#Override
public Dimension getPreferredSize() {
return new Dimension(PREF_W, PREF_H);
}
public void draw(Shape shape) {
Graphics2D g2 = canvas.createGraphics();
g2.setColor(COLOR);
g2.draw(shape);
g2.dispose();
repaint();
}
}
class DrawRectangle extends HisPanel {
public void drawRect(int x, int y, int width, int height) {
Graphics2D g2 = canvas.createGraphics();
g2.setColor(Color.black);
g2.draw(new Rectangle2D.Double(x, y, width, height));
g2.dispose();
repaint();
}
public void betterDrawRect(int x, int y, int width, int height) {
draw(new Rectangle2D.Double(x, y, width, height));
}
}

Why i can't see shadow generated with this ShadowRenderer?

I'm trying to use the ShadowRenderer from swingx to create a shadow for a panel. Here is what i did so far:
Creating the shadow renderer one time in the panel constructor.
public CustomPanel() {
super();
renderer = new ShadowRenderer(20, 0.5f, Color.RED);
}
Each time the panel is resized, i recalculate the new shadow.
#Override
public void setBounds(int x, int y, int width, int height) {
super.setBounds(x, y, width, height);
shadow = renderer.createShadow(GraphicsUtilities.createCompatibleTranslucentImage(width, height));
}
And then i override the paintComponent method of my panel to draw the generated image:
protected void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D) g.create();
g2.drawImage(shadow, 0, 0, null);
//super.paintComponent(g);
}
But the shadow image is never shown. Why? I read this and i except my code to draw a kind of "shadowed" image generated by the shadow renderer.
Here's a shortened example of DropShadowDemo
JXPanel panel = new JXPanel() {
int shadowSize = 40;
ShadowRenderer renderer = new ShadowRenderer(shadowSize/ 2, 0.5f, Color.RED);
BufferedImage imageA =
XTestUtils.loadDefaultImage("moon.jpg");
BufferedImage shadow;
#Override
public void setBounds(int x, int y, int width, int height) {
super.setBounds(x, y, width, height);
// not really needed here - the base image size is fixed
shadow = renderer.createShadow(imageA);
}
#Override
protected void paintComponent(Graphics g) {
int x = (getWidth() - imageA.getWidth()) / 2;
int y = (getHeight() - imageA.getHeight()) / 2;
Graphics2D g2 = (Graphics2D) g;
Composite c = g2.getComposite();
g2.setComposite(AlphaComposite.SrcOver.derive(renderer.getOpacity()));
g.drawImage(shadow, x - shadowSize / 2, y - shadowSize / 2, null);
g2.setComposite(c);
g.drawImage(imageA, x, y, null);
}
#Override
public Dimension getPreferredSize() {
return new Dimension(imageA.getWidth() + shadowSize, imageA.getHeight()+ shadowSize);
}
};
panel.setOpaque(false);

Translucent JFrame border JDK 7

I was asking question about Translucent JFrame border (see here) and I got very good answers, but unfortunatelly, given answers work perfectly only on JDK 6, but not 7. Any ideas how to make it work with JDK 7?
In JDK 6 it looks like this:
And JDK 7:
And my code looks like this:
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.imageio.ImageIO;
import javax.swing.border.AbstractBorder;
public class ShadowBorder extends AbstractBorder {
private static final int RADIUS = 30;
private static BufferedImage shadowTop;
private static BufferedImage shadowRight;
private static BufferedImage shadowBottom;
private static BufferedImage shadowLeft;
private static BufferedImage shadowTopLeft;
private static BufferedImage shadowTopRight;
private static BufferedImage shadowBottomLeft;
private static BufferedImage shadowBottomRight;
private static boolean shadowsLoaded = false;
public ShadowBorder() {
if (!shadowsLoaded) {
try {
shadowTop = ImageIO.read(getClass().getResource("/cz/vutbr/fit/assets/shadow-top.png"));
shadowRight = ImageIO.read(getClass().getResource("/cz/vutbr/fit/assets/shadow-right.png"));
shadowBottom = ImageIO.read(getClass().getResource("/cz/vutbr/fit/assets/shadow-bottom.png"));
shadowLeft = ImageIO.read(getClass().getResource("/cz/vutbr/fit/assets/shadow-left.png"));
shadowTopLeft = ImageIO.read(getClass().getResource("/cz/vutbr/fit/assets/shadow-top-left.png"));
shadowTopRight = ImageIO.read(getClass().getResource("/cz/vutbr/fit/assets/shadow-top-right.png"));
shadowBottomLeft = ImageIO.read(getClass().getResource("/cz/vutbr/fit/assets/shadow-bottom-left.png"));
shadowBottomRight = ImageIO.read(getClass().getResource("/cz/vutbr/fit/assets/shadow-bottom-right.png"));
shadowsLoaded = true;
} catch (IOException ex) {
Logger.getLogger(ShadowBorder.class.getName()).log(Level.SEVERE, null, ex);
}
}
}
#Override
public boolean isBorderOpaque() {
return false;
}
#Override
public Insets getBorderInsets(Component c) {
return new Insets(RADIUS, RADIUS, RADIUS, RADIUS);
}
#Override
public Insets getBorderInsets(Component c, Insets insets) {
insets.top = RADIUS;
insets.left = RADIUS;
insets.bottom = RADIUS;
insets.right = RADIUS;
return insets;
}
#Override
public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
Graphics2D g2d = (Graphics2D) g.create();
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.DST_ATOP, 1f));
int recWidth = width - (2 * RADIUS);
int recHeight = height - (2 * RADIUS);
int recX = width - RADIUS;
int recY = height - RADIUS;
//edges
g2d.drawImage(shadowTop.getScaledInstance(recWidth, RADIUS, Image.SCALE_REPLICATE), RADIUS, 0, null);
g2d.drawImage(shadowRight.getScaledInstance(RADIUS, recHeight, Image.SCALE_REPLICATE), recX, RADIUS, null);
g2d.drawImage(shadowBottom.getScaledInstance(recWidth, RADIUS, Image.SCALE_REPLICATE), RADIUS, recY, null);
g2d.drawImage(shadowLeft.getScaledInstance(RADIUS, recHeight, Image.SCALE_REPLICATE), 0, RADIUS, null);
//corners
g2d.drawImage(shadowTopLeft, 0, 0, null);
g2d.drawImage(shadowTopRight, recX, 0, null);
g2d.drawImage(shadowBottomLeft, 0, recY, null);
g2d.drawImage(shadowBottomRight, recX, recY, null);
}
}
Thanks a lot!
I've just solved my problem. The problem was, that JDK 7 implements AWTUtilities.setWindowOpaque() method from JDK6 in setBackground() method and I was (NetBeans did :-)) setting default background for JFrame in different place, so setting background to new Color(0, 0, 0, 0); makes JFrame transparent and all goes well now.
For whoever stumbles upon this thread and wants his own transparent window, I devised this example. With how little information is available on the web, I almost had to break a leg to come up with something just works, and doesn't use image files or anything. (Combined from different examples on this site)
public class GradientTranslucentWindowDemo
{
public static void main(String[] args)
{
// Create the GUI on the event-dispatching thread
SwingUtilities.invokeLater(new Runnable()
{
#Override
public void run()
{
final JFrame f = new JFrame("Per-pixel translucent window");
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setUndecorated(true);
f.setBackground(new Color(0, 0, 0, 0));
final BufferedImage backrgoundImage = makeBackrgoundImage(400, 400);
JPanel panel = new JPanel()
{
#Override
public void paintComponent(Graphics g)
{
super.paintComponent(g);
if (g instanceof Graphics2D)
{
g.drawImage(backrgoundImage, 0, 0, null);
}
}
};
panel.setOpaque(false);
f.setContentPane(panel);
f.setLayout(new GridBagLayout()); // Centers the button
f.add(new JButton(new AbstractAction("Close")
{
#Override
public void actionPerformed(ActionEvent e)
{
f.dispose();
}
}));
f.setBounds(100, 100, 400, 400);
f.setVisible(true);
}
});
}
static BufferedImage makeBackrgoundImage(int w, int h)
{
BufferedImage img = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);
// Draw something transparent
Graphics2D g = img.createGraphics();
g.setPaint(new RadialGradientPaint(new Point2D.Float(w / 2, h / 2), (w + h) / 4, new float[]{0, 1}, new Color[]{Color.RED, new Color(1f, 0, 0, 0)}));
g.fillRect(0, 0, w, h);
g.setPaint(Color.RED);
g.drawRect(0, 0, w - 1, h - 1);
g.dispose();
return img;
}
}

Categories

Resources