I've made a Button class which allows me to have buttons (Kind of obvious). But in my button class, I'm using an image to display the button on the screen. I got that to work, but I want to resize the image to the size of the button.
My "Image Resizer" works flawlessly, but when I try to resize the button, the button doesn't show up. I don't get any errors.
Here's my Button class:
private String text;
private int size = 0;
private BufferedImage buttonHD;
public Button(int x, int y, int width, int height, int size) {
super(x, y, width, height);
this.size = size;
buttonHD = Renderer.resizeImage(Images.button, x, y, width, height);
}
public Button setText(String text) {
this.text = text;
return this;
}
public void drawButton(Graphics g, int xoffset, int yoffset) {
int xx = x + xoffset;
int yy = y + yoffset;
if(!MouseInput.MOUSE.intersects(this)) {
g.drawImage(buttonHD, x, y, width, height, null);
} else if(MouseInput.MOUSE.intersects(this)){
g.setColor(Color.DARK_GRAY);
g.fillRect(x, y, width, height);
}
Renderer.drawText(text, g, xoffset, yoffset, size);//Draws button text
}
The original image that I'm resizing is stored into my Images class as:
public static BufferedImage button;
Here's my "Button Resizer" method:
public static BufferedImage resizeImage(BufferedImage origImg, int x, int y, int initWidth, int initHeight) {
BufferedImage resizedImg = new BufferedImage(initWidth, initHeight, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2d = resizedImg.createGraphics();
g2d.drawImage(origImg, x, y, initWidth, initHeight, null);
g2d.dispose();
return resizedImg;
}
The way I'm using these buttons are in ScreenState classes. Each class representing as each state. The buttons are set in there and are loaded up by the class's constructor.
The buttons do work as they should, but the images just don't show up. If more code is needed, just let me know and I'll provide you with it.
I've been trying to fix this problem, but had no luck. If someone could just hint out as to where my problem is or maybe have a solution, that'd be great. Thanks!
This function resizes the BufferedImage to the given width and height:
public static BufferedImage resizeImage(BufferedImage image, int width, int height) {
// calculate the scale factor
double xScale = width / (double) image.getWidth();
double yScale = height / (double) image.getHeight();
// create the object that will contain the resized image
BufferedImage resizedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
// resize the image
Graphics2D g = (Graphics2D) resizedImage.getGraphics();
g.scale(xScale, yScale);
g.drawImage(image, 0, 0, null);
g.dispose();
// return the resized image
return resizedImage;
}
Then simply use it:
public class MyButton extends JButton
{
private BufferedImage image;
public MyButton() {
image = resizeImage(ImageIO.read(IMAGE_PATH), BUTTON_WIDTH, BUTTON_HEIGHT);
}
#Override protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.drawImage(image, 0, 0, null);
}
}
IMAGE_PATH is the File where your image is located, BUTTON_WIDTH and BUTTON_HEIGHT is your button dimension.
Related
I have a such code:
private Image image;
public void paint(GraphicsContext g, double x, double y) {
if (image == null) return;
g.drawImage(image, x, y);
}
How to change chage brightness and then draw the image?
I am aware about ColorAdjust effect and ImageView, but how to use it in this case?
You can set a ColorAdjust effect on the GraphicsContext object with setEffect(Effect):
public void paint(GraphicsContext g, double x, double y) {
if (image == null) return;
ColorAdjust colorAdjust = new ColorAdjust();
colorAdjust.setBrightness(0.1);
g.setEffect(colorAdjust);
g.drawImage(image, x, y);
}
Don't know if it was a very specific title, but I have already asked this question but has gone dead.
I am trying to execute paintComponent() so I can draw rectangles, triangles and more with the class being a JComponent.
Here is my code so far:
public class Design extends JComponent {
private static final long serialVersionUID = 1L;
private List<ShapeWrapper> shapesDraw = new ArrayList<ShapeWrapper>();
private List<ShapeWrapper> shapesFill = new ArrayList<ShapeWrapper>();
GraphicsDevice gd = GraphicsEnvironment.getLocalGraphicsEnvironment().getDefaultScreenDevice();
int screenWidth = gd.getDisplayMode().getWidth();
int screenHeight = gd.getDisplayMode().getHeight();
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
for(ShapeWrapper s : shapesDraw){
g2d.setColor(s.color);
g2d.draw(s.shape);
}
for(ShapeWrapper s : shapesFill){
g2d.setColor(s.color);
g2d.fill(s.shape);
}
}
public void drawRect(int xPos, int yPos, int width, int height) {
shapesDraw.add(new Rectangle(xPos, yPos, width, height));
repaint();
}
public void fillRect(int xPos, int yPos, int width, int height) {
shapesFill.add(new Rectangle(xPos, yPos, width, height));
repaint();
}
public void drawTriangle(int leftX, int topX, int rightX, int leftY, int topY, int rightY) {
shapesDraw.add(new Polygon(
new int[]{leftX, topX, rightX},
new int[]{leftY, topY, rightY},
3));
repaint();
}
public void fillTriangle(int leftX, int topX, int rightX, int leftY, int topY, int rightY) {
shapesFill.add(new Polygon(
new int[]{leftX, topX, rightX},
new int[]{leftY, topY, rightY},
3));
repaint();
}
public Dimension getPreferredSize() {
return new Dimension(getWidth(), getHeight());
}
public int getWidth() {
return screenWidth;
}
public int getHeight() {
return screenHeight;
}
}
class ShapeWrapper {
Color color;
Shape shape;
public ShapeWrapper(Color color , Shape shape){
this.color = color;
this.shape = shape;
}
}
As shown above, everything works perfectly fine, except for being able to choose a colour.
I want to be able to define the rectangles and triangles with their respective positions and lengths but also want to add a colour with it.
But I get an error.
The error says:
The method add(ShapeWrapper) in the type List< ShapeWrapper > is not applicable for the arguments (Rectangle)
And:
The method add(ShapeWrapper) in the type List< ShapeWrapper > is not applicable for the arguments (Polygon)
Please help! I am so stressed trying to figure this out as it is blocking me from doing many things.
The answer is pretty basic...Shape is not a type of ShapeWrapper, therefore it can't be added to a List decalred as List<ShapeWrapper>
What you should be doing instead of
shapesDraw.add(new Rectangle(xPos, yPos, width, height));
is something more like...
shapesDraw.add(new ShapeWrapper(Color.BLACK, new Rectangle(xPos, yPos, width, height)));
The same goes for your ...Triangle methods. You need to wrap the resulting Polygon in a ShapeWrapper before trying to add it to the List
I have a 10000x10000 BufferedImage and I'm looking to draw only part of it to a Canvas, is there a way to do this using args such as:
x, y, width, height ?
So for example, drawImage(img, x, y, width, height) would draw a rectangle from the image starting at (x, y) and having (width, height) as the dimensions?
EDIT:
I'm going to re- word this question:
I have a 10000x10000 image and I only want to display a portion of it on the screen, the problem with just offsetting it by x and y is that this still causes lag as the entire image is being rendered, just most of it off canvas. How can I basically make it so that the entire image is rendered but I can scroll around it without causing the canvas to lag?
I have a 10000x10000 BufferedImage and I'm looking to draw only part
of it to a Canvas, is there a way to do this using args such as:
Don't use canvas for custom painting in java. use JComponent or JPanel instead. It has a nice function paintComponent(Graphics g), override it and paint your image inside with g.drawImage(x, y, width, height, observer);
Swing graphics has Graphics.clipRect(int x, int y, int width, int height) to bound the area rectangle to which you wish to draw prior to drawing the image.
Edit (In response to your edited question):
First approach is to use BufferedImage..getSubimage(x, y, width, height) to get a sub image with specified rectangle region. It is faster.
BufferedImage img = ImageIO.read(new File("file"));
img = img.getSubimage(50, 50, 500, 500); // 500 x 500
This function will give you a new image cropped with the rectangle(x, y, width, height) of your original image you specified. Use the returned image to draw on your component.
Tutorial resource: Clipping the Drawing Region
Demo: Demonstrating clipping Image with Animation:
import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.URL;
import java.util.*;
import java.util.logging.*;
import javax.imageio.ImageIO;
import javax.swing.*;
import javax.swing.Timer;
class MyCanvas extends JPanel implements ActionListener
{
public BufferedImage buffImg;
public Rectangle rectangle;
Random random;
long lastTimeChanged;
int dirX = 1, dirY = 1;
volatile static boolean imageLoading = true;
public MyCanvas() {
random = new Random();
rectangle = new Rectangle(50, 50, 250, 250);
lastTimeChanged = System.currentTimeMillis();
setBackground(Color.WHITE);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if(imageLoading)
{
showWaitForLoading(g);
return;
}
g.clipRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
g.drawImage(buffImg, 0, 0, getWidth(), getHeight(), this);
}
public void showWaitForLoading(Graphics g)
{
Graphics2D g2d = (Graphics2D)g.create();
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setColor(Color.DARK_GRAY);
g2d.fillRoundRect(getWidth()/2-100, getHeight()/2-15, 200, 30, 30, 30);
g2d.setColor(Color.WHITE);
g2d.drawString("Loading image...", getWidth()/2 - 45, getHeight()/2 + 3 );
g2d.dispose();
}
#Override
public void actionPerformed(ActionEvent e) {
long endTime = System.currentTimeMillis();
if(endTime - lastTimeChanged > 500)
{
dirX = random.nextInt(2) == 0 ? -1 : 1;
dirY = random.nextInt(2) == 0 ? -1 : 1;
lastTimeChanged = endTime;
}
if(rectangle.x < 0)dirX = 1;
else if(rectangle.x + rectangle.width > getWidth())dirX = -1;
if(rectangle.y < 0)dirY = 1;
else if(rectangle.y + rectangle.height > getHeight())dirY = -1;
rectangle.x = rectangle.x + dirX * 10;
rectangle.y = rectangle.y + dirY * 10;;
repaint();
}
}
public class CustomPainting {
public static void main(String[] args) throws IOException {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
final MyCanvas canvas = new MyCanvas();
JFrame frame = new JFrame();
frame.setSize(new Dimension(500, 500));
frame.add(canvas);
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Timer timer = new Timer(200, canvas);
timer.start();
new Thread()
{
public void run()
{
try {
canvas.buffImg = ImageIO.read(new URL("http://images6.fanpop.com/image/photos/33400000/Cute-Panda-beautiful-pictures-33434826-500-500.jpg"));
MyCanvas.imageLoading = false;
} catch (IOException ex) {
Logger.getLogger(CustomPainting.class.getName()).log(Level.SEVERE, null, ex);
}
}
}.start();
}
});
}
}
You can scale or draw a part of an image using Graphics.drawImage as mentioned another answer and according to Java documentation, ImageObserver argument is not needed for BufferedImage so you can just pass null.
http://docs.oracle.com/javase/7/docs/api/java/awt/Graphics.html
However, my choice would be the clipping drawing region of image instead.
Here is an example you can try:
Graphics2D g = BufferedImage.getGraphics;
g.setClip(x, y, width, height);
g.drawImage(sx, sy, x - sx, y - sy, null );
Yes there is: drawImage(Image img, int x, int y, int width, int height, ImageObserver observer)
I just want to display my String inside a rectangle filled with black. Thanks for the help!
Here you are:
public class MyPanel extends JPanel{
public void paintComponent(Graphics g) {
super.paintComponent(g);
g.drawRect(10/*x*/, 10/*y*/, 80/*width*/, 30/*hight*/);
g.drawString("TextToDraw", 25/*x*/, 25/*y*/);
}
}
public class LabeledRectangle extends Rectangle{
public LabeledRectangle(int x, int y, int width, int height, String text) {
super (x, y, width, height);
this.text = text;
}
public void draw(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
g2.draw(new Rectangle2D.Double(x, y, width,height));
Font font = g2.getFont();
FontRenderContext context = g2.getFontRenderContext();
g2.setFont(font);
int textWidth = (int) font.getStringBounds(text, context).getWidth();
LineMetrics ln = font.getLineMetrics(text, context);
int textHeight = (int) (ln.getAscent() + ln.getDescent());
int x1 = x + (width - textWidth)/2;
int y1 = (int)(y + (height + textHeight)/2 - ln.getDescent());
g2.setColor(Color.red);
g2.drawString(text, (int) x1, (int) y1);
}
private String text;
}
I want to align a Custom Button Field (the Star on the Screenshot) to the center in a Horizontal Manager
Definition of the HFM
final HorizontalFieldManager _navigation = new HorizontalFieldManager(HorizontalFieldManager.NO_VERTICAL_SCROLL | HorizontalFieldManager.FIELD_VCENTER | Field.USE_ALL_WIDTH)
{
protected void paint(Graphics graphics)
{
graphics.setGlobalAlpha(100);
int[] xInds = new int[]{0, getExtent().width, getExtent().width, 0};
int[] yInds = new int[]{0, 0, getExtent().height, getExtent().height};
final int[] cols = new int[]{Color.WHITE, Color.WHITE, color_computacenter_light_blue, color_computacenter_light_blue};
graphics.drawShadedFilledPath(xInds, yInds, null, cols, null);
super.paint(graphics);
}
protected void sublayout(int maxWidth, int maxHeight)
{
super.sublayout(maxWidth, maxHeight);
setExtent(maxWidth, navigation_vertical_manager_height);
}
};
Custom Field (partial)
public class NavigationButton extends Field
{
private String label;
Bitmap img;
int horizontalPadding = 4;
int verticalPadding = 10;
static int height;
static int weight;
ToolTip _tooltip;
public NavigationButton(String name, Bitmap img)
{
label = name;
this.img = img;
this.height = img.getHeight() + 4;
this.weight = img.getWidth() + 2;
}
public NavigationButton(String name, Bitmap img, long style)
{
super(style);
label = name;
this.img = img;
this.height = img.getHeight() + 4;
this.weight = img.getWidth() + 2;
}
protected void layout(int maxWidth, int maxHeight)
{
setExtent(maxWidth, maxHeight);
// setExtent(Math.min(weight, maxWidth), Math.min(height, maxHeight));
}
protected void paint(Graphics graphics)
{
// Draw background
graphics.setGlobalAlpha(255);
if(isFocus())
{
graphics.setColor(0x005AA1);
graphics.drawRoundRect(0 ,0 , weight + 1, height + 1, 2, 2);
}
if (img != null)
{
graphics.drawBitmap(0, 0 , img.getWidth(), img.getHeight(), img, 0, 0);
}
}
[...]
Any Ideas, what I'm doing wrong?!
Thanks!
I haven't tested this code out, but I suspect your problem is in the layout method of your field:
protected void layout(int maxWidth, int maxHeight)
{
setExtent(maxWidth, maxHeight);
// setExtent(Math.min(weight, maxWidth), Math.min(height, maxHeight));
}
Is there a reason you commented that line? I think what's happening is that your custom field is taking up the whole width, and in your paint method you're drawing the bitmap at the extreme left, making it look like the field is aligned left. If you uncomment that line, and add a field style bit of Field.FIELD_HCENTER when you construct your field it should work.
Alternatively, you can keep the layout as is, and just draw the bitmap centered, by changing the line in your paint method to something like this
graphics.drawBitmap((this.getWidth()-img.getWidth())/2, 0 , img.getWidth(), img.getHeight(), img, 0, 0);
The field will still take up the whole width, but the image will be centered. This might cause unexpected behavior on touchscreen devices (i.e. the Storm).
Actually, it is quite simple. You must use HorizontalFieldManger and DrawStyle.Center.
here is the code snippet (in case you haven't solved it yet) :
HorizontalFieldManager hfm = new HorizontalFieldManager(HorizontalFieldManager.FIELD_HCENTER);
ButtonField button = new ButtonField("Button",DrawStyle.HCENTER);
hfm.add(button);
Kindly,
Hrvoje