Creating Arrow Icon Help

[Alexander Walker]

Hi,

Is there anyway to make an arrow Icon that looks good? I tried making one, but it doesn't look any good. Like the lines are not smooth (if you can say so), or like you can see the pixels.
Is there anyway to fix this? And Yes, I do need it to be an Icon.

The commented code are code to add a line at the edge of the arrow, making it a two colored arrow, one color at the edge, and one filled inside the arrow. But after doing that, the arrow became even more messed up.

Please help.

import java.awt.Color;
import java.awt.Component;
import java.awt.Graphics;

import javax.swing.Icon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;


public class ArrowIconExample extends JPanel{
	public ArrowIconExample() {
		JFrame mainFrame = new JFrame();
		JLabel label = new JLabel("label");
		
		label.setIcon(new SortArrowIcon(2));
		
		mainFrame.getContentPane().add(label);
		mainFrame.setSize(100, 100);
		mainFrame.setVisible(true);
	}

	public static void main(String[] a) {
		new ArrowIconExample();
	}
	  
	class SortArrowIcon implements Icon {
		public static final int NONE = 0;
		public static final int DECENDING = 1;
		public static final int ASCENDING = 2;

		protected int direction;
		protected int width = 8;
		protected int height = 8;
		
		public SortArrowIcon(int direction) {
			this.direction = direction;
		}
		
		public int getIconWidth() {
			return width;
		}

		public int getIconHeight() {
			return height;
		}

		public void paintIcon(Component c, Graphics g, int x, int y) {

			int w = width;
			int h = height;
			int m = w / 2;
			if (direction == DECENDING) {
					
				int xPoints[] = {x, x+w, x+m};
				int yPoints[] = {y, y, y+h};
				g.setColor(Color.BLACK);
				g.fillPolygon(xPoints, yPoints, 3);
				g.drawPolygon(xPoints, yPoints, 3);
					
				/*g.setColor(Color.BLUE);//g.drawline
				g.drawLine(x, y, x + w, y);
				g.setColor(Color.BLUE);
				g.drawLine(x, y, x + m, y + h);
				g.setColor(Color.BLUE);
				g.drawLine(x + w, y, x + m, y + h);*/
					
			}
			if (direction == ASCENDING) {
					
				int xPoints[] = {x+m, x, x+w};
				int yPoints[] = {y, y+h, y+h};
				g.setColor(Color.BLACK);
				g.fillPolygon(xPoints, yPoints, 3);
				g.drawPolygon(xPoints, yPoints, 3);
					
				/*g.setColor(Color.BLUE);
				g.drawLine(x + m, y, x, y + h);
				g.setColor(Color.BLUE);
				g.drawLine(x, y + h, x + w, y + h);
				g.setColor(Color.BLUE);
				g.drawLine(x + m, y, x + w, y + h);*/
			}
		}
	}
}

[Michael Dunn]

have a look at the code for BasicArrowButton

[Alexander Walker]

Michael Dunn wrote:have a look at the code for BasicArrowButton

Thanks it helped a lot. I was able to do what I think is a pretty decent arrow.

Heres the code for it, for those who want it.

import java.awt.Color;
import java.awt.Component;
import java.awt.Graphics;

import javax.swing.Icon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;


public class ArrowIconExample extends JPanel{
	public ArrowIconExample() {
		JFrame mainFrame = new JFrame();
		JLabel label = new JLabel("");
		
		label.setIcon(new SortArrowIcon(1));

		mainFrame.getContentPane().add(label);
		mainFrame.setSize(100, 100);
		mainFrame.setVisible(true);
	}

	public static void main(String[] a) {
		new ArrowIconExample();
	}
	  
	class SortArrowIcon implements Icon {
		public static final int NONE = 0;
		public static final int DECENDING = 1;
		public static final int ASCENDING = 2;

		protected int direction;
		// the with needs to bee twice the height
		protected int width = 16;
		protected int height = 8;
		
		public SortArrowIcon(int direction) {
			this.direction = direction;
		}
		
		public int getIconWidth() {
			return width;
		}

		public int getIconHeight() {
			return height;
		}

		public void paintIcon(Component c, Graphics g, int x, int y) {
			int w = width;
			int h = height;
			int m = w / 2;
			
			g.translate(x, y);
			if (direction == DECENDING) {
				
				//drawing the arrow
				g.setColor(Color.BLACK);
				for(int i = y+h, j=0; i >= y; i--, j++)   {
                    g.drawLine(x+m-j, i, x+m+j, i);
                }
				
				// drawing the border
				g.setColor(Color.BLUE);
				g.drawLine(x, y, x + w, y);
				g.drawLine(x, y, x + m, y + h);
				g.drawLine(x + w, y, x + m, y + h);
			}
			if (direction == ASCENDING) {
				//the commented code is if you want to have the same with and height of the arrow
				/*for(int i = y, j=0; i <= y+h; i++)      {
					
					if(i%2==0){
						j++;
					}
						g.drawLine(x+m-j, i, x+m+j, i);
                }*/
				
				// drawing the arrow
				g.setColor(Color.BLACK);
				for(int i = y, j=0; i <= y+h; i++, j++)      {
					g.drawLine(x+m-j, i, x+m+j, i);
				}
				
				// drawing the border
				g.setColor(Color.BLUE);
				g.drawLine(x + m, y, x, y + h);;
				g.drawLine(x, y + h, x + w, y + h);
				g.drawLine(x + m, y, x + w, y + h);
			}
		}
	}
}

[Alexander Walker]

I updated the code to make the arrows look better, and I made two versions, one where the width and height is the same. And one where the width is twice the size of the height. thought I should share them, They look nicer then the last version anyway.

Edit: I forgot to remove "g.translate(x, y);" in paintIcon

import java.awt.Color;
import java.awt.Component;
import java.awt.Graphics;

import javax.swing.Icon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;


public class ArrowIconExample2 extends JPanel{
	public ArrowIconExample2() {
		JFrame mainFrame = new JFrame("");
		JLabel label = new JLabel("");
		
		label.setIcon(new SortArrowIcon(2, Color.GREEN, Color.DARK_GRAY));

		mainFrame.getContentPane().add(label);
		mainFrame.setSize(100, 100);
		mainFrame.setVisible(true);
	}

	public static void main(String[] a) {
		new ArrowIconExample2();
	}

	/**
	 * Creates an arrow Icon with the 
	 * width twice the size of the height
	 * NONE = 0
	 * DECENDING = 1
	 * ASCENDING = 2
	 * 
	 * the default arrowColor is set to black
	 * the default borderColor is set to blue
	 * the default height is set to 8
	 * the width is twice the size 
	 * of the height, 16 if the height is 8
	 * 
	 * @author Alexander
	 *
	 */
	class SortArrowIcon implements Icon {
		public static final int NONE = 0;
		public static final int DECENDING = 1;
		public static final int ASCENDING = 2;

		protected int direction;
		// the with needs to be twice the height
		protected int width;
		protected int height;
		protected Color arrowColor;
		protected Color borderColor;
		
		/**
		 * initiate SortArrowIcon
		 * @param direction the direction of the arrow
		 */
		public SortArrowIcon(int direction) {
			this.direction = direction;
			this.arrowColor=Color.BLACK;
			this.borderColor=Color.BLUE;
			this.height=8;
			this.width=height*2;
		}
		
		/**
		 * initiate SortArrowIcon
		 * @param direction the direction of the arrow
		 * @param height of the arrow. 
		 * 		  the width is twice the size of the height
		 */
		public SortArrowIcon(int direction, int height) {
			this.direction = direction;
			arrowColor=Color.BLACK;
			borderColor=Color.BLUE;
			this.height=height;
			this.width=height*2;
		}
		
		/**
		 * initiate SortArrowIcon
		 * @param direction the direction of the arrow
		 * @param arrowColor the color of the arrow
		 * @param borderColor the color of the arrows border
		 */
		public SortArrowIcon(int direction, Color arrowColor, Color borderColor) {
			this.direction = direction;
			this.arrowColor = arrowColor;
			this.borderColor = borderColor;
			this.height=8;
			this.width=height*2;
		}
		
		/**
		 * 
		 * @param direction the direction of the arrow
		 * @param arrowColor the color of the arrow
		 * @param borderColor the color of the arrows border
		 * @param height height of the arrow.
		 * 		  the width is twice the size of the height
		 */
		public SortArrowIcon(int direction, Color arrowColor, Color borderColor, int height) {
			this.direction = direction;
			this.arrowColor = arrowColor;
			this.borderColor = borderColor;
			this.height=height;
			this.width=height*2;
		}
		
		/**
		 * @return int the icon width
		 */
		public int getIconWidth() {
			return width;
		}

		/**
		 * @return int the icon height
		 */
		public int getIconHeight() {
			return height;
		}

		/**
		 * paints the icon
		 */
		public void paintIcon(Component c, Graphics g, int x, int y) {
			int w = width;
			int h = height;
			int m = w / 2;
			
			if (direction == DECENDING) {
				for(int i = y+h, j=0; i >= y; i--, j++)   {
					// drawing the arrow
					g.setColor(arrowColor);
					g.drawLine(x+m-j, i, x+m+j, i);
                    
					// drawing the arrows border
					g.setColor(borderColor);
                    if((i == y+h) || (i==y)){
                    	g.drawLine(x+m-j, i, x+m+j, i);
                    }else{
                    	g.drawLine(x+m-j+1, i, x+m-j, i);
                    	g.drawLine(x+m+j-1, i, x+m+j, i);
                    }
                }
			}
			if (direction == ASCENDING) {
				for(int i = y, j=0; i <= y+h; i++, j++)      {
					// drawing the arrow
					g.setColor(arrowColor);
					g.drawLine(x+m-j, i, x+m+j, i);
					
					// drawing the arrows border
					g.setColor(borderColor);
					if((i == y+h) || (i==y)){
						g.drawLine(x+m-j, i, x+m+j, i);
					}else{
						g.drawLine(x+m-j-1, i, x+m-j, i);	
						g.drawLine(x+m+j+1, i, x+m+j, i);
					}
				}
			}
		}
	}
}

import java.awt.Color;
import java.awt.Component;
import java.awt.Graphics;

import javax.swing.Icon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;


public class ArrowIconExample3 extends JPanel{
	public ArrowIconExample3() {
		JFrame mainFrame = new JFrame("");
		JLabel label = new JLabel("");
		
		label.setIcon(new SortArrowIcon(2, Color.GREEN, Color.DARK_GRAY));

		mainFrame.getContentPane().add(label);
		mainFrame.setSize(100, 100);
		mainFrame.setVisible(true);
	}

	public static void main(String[] a) {
		new ArrowIconExample3();
	}

	/**
	 * Creates an arrow Icon with the same with and height
	 * NONE = 0
	 * DECENDING = 1
	 * ASCENDING = 2
	 * 
	 * the default arrowColor is set to black
	 * the default borderColor is set to blue
	 * the default height is set to 8
	 * the width is the same size as the height.
	 * 
	 * @author Alexander
	 *
	 */
	class SortArrowIcon implements Icon {
		public static final int NONE = 0;
		public static final int DECENDING = 1;
		public static final int ASCENDING = 2;

		protected int direction;
		// the with needs to be twice the height
		protected int width;
		protected int height;
		protected Color arrowColor;
		protected Color borderColor;
		
		/**
		 * initiate SortArrowIcon
		 * @param direction the direction of the arrow
		 */
		public SortArrowIcon(int direction) {
			this.direction = direction;
			this.arrowColor=Color.BLACK;
			this.borderColor=Color.BLUE;
			this.height=8;
			this.width=height*2;
		}
		
		/**
		 * initiate SortArrowIcon
		 * @param direction the direction of the arrow
		 * @param height of the arrow. 
		 * 		  the width is the same size as the height.
		 */
		public SortArrowIcon(int direction, int height) {
			this.direction = direction;
			arrowColor=Color.BLACK;
			borderColor=Color.BLUE;
			this.height=height;
			this.width=height*2;
		}
		
		/**
		 * initiate SortArrowIcon
		 * @param direction the direction of the arrow
		 * @param arrowColor the color of the arrow
		 * @param borderColor the color of the arrows border
		 */
		public SortArrowIcon(int direction, Color arrowColor, Color borderColor) {
			this.direction = direction;
			this.arrowColor = arrowColor;
			this.borderColor = borderColor;
			this.height=8;
			this.width=height*2;
		}
		
		/**
		 * 
		 * @param direction the direction of the arrow
		 * @param arrowColor the color of the arrow
		 * @param borderColor the color of the arrows border
		 * @param height height of the arrow.
		 * 		  the width is the same size as the height.
		 */
		public SortArrowIcon(int direction, Color arrowColor, Color borderColor, int height) {
			this.direction = direction;
			this.arrowColor = arrowColor;
			this.borderColor = borderColor;
			this.height=height;
			this.width=height*2;
		}
		
		/**
		 * @return int the icon width
		 */
		public int getIconWidth() {
			return width;
		}

		/**
		 * @return int the icon height
		 */
		public int getIconHeight() {
			return height;
		}

		/**
		 * paints the icon
		 */
		public void paintIcon(Component c, Graphics g, int x, int y) {
			int w = width;
			int h = height;
			int m = w / 2;
			
			if (direction == DECENDING) {
				for(int i = y+h, j=0; i >= y; i--)   {
					// drawing the arrow
					g.setColor(arrowColor);
					g.drawLine(x+m-j, i, x+m+j, i);
                    
					// drawing the arrows border
                    g.setColor(borderColor);
                    if((i == y+h) || (i==y)){
                    	g.drawLine(x+m-j, i, x+m+j, i);
                    }else{
                    	g.drawLine(x+m-j+1, i, x+m-j, i);
                    	g.drawLine(x+m+j-1, i, x+m+j, i);
                    }
                    
                    if(i%2==0){
                    	j++;
                    }
                }
			}
			if (direction == ASCENDING) {
				for(int i = y, j=0; i <= y+h; i++)      {
					// drawing the arrow
					g.setColor(arrowColor);
					g.drawLine(x+m-j, i, x+m+j, i);
					
					// drawing the arrows border
					g.setColor(borderColor);
					if((i == y+h) || (i==y)){
						g.drawLine(x+m-j, i, x+m+j, i);
					}else{
						g.drawLine(x+m-j-1, i, x+m-j, i);	
						g.drawLine(x+m+j+1, i, x+m+j, i);
					}
					
					if(i%2==0){
                    	j++;
                    }
				}
			}
		}
	}
}