- Mimii Prac 02 Line Joins Shapes Filled Shapes Gradient Colours Textures And Transforms Iii Part 1 Drawing Shapes 1 (153.35 KiB) Viewed 59 times
screenshots shown. Thanks
MIMII Prac 02: line joins, shapes, filled shapes, gradient colours, textures and transforms III/ Part 1: Drawing Shapes Here are some useful links: https://docs.oracle.com/javase/8/javafx ... lipse.html https://slideplayer.com/slide/3373023/ We are using the same file structure as in Prac01. import java.awt.*; import java.awt. geom.*; import javax.swing.*; public class shapes 02 extends JPanel { public static void main(String[] args) { JErame window: window = new JFrame ("Java Graphics"); window.setContentPane( new shapes 02()); window.setDefaultCloseOperation (JFrame.EXIT. ON CLOSE) ; window.pack(); window.setResizable(true); Dimension screen = Toolkit.getDefaultToolkit (L.getScreenSize(); window.setLocation (screen width - window.getWidth())/2, (screen height - window.getHeight())/2 ); window setVisible(true); } private float pixelSize: public shapes 02() { setPreferredSizel new Dimension (600, 600)); | protected void paint Component (Graphics g) ( Graphics2D g2 = (Graphics2Dg.create(); g2.setPaint (Color.WHITE); 92.fillRect(0,0, getWidth().getHeight.()); applyapplyWindowToViewportTransformation (92, 0, 600, 0, 600, true);
Path2D elbow = new Path2D.Double elbow.moveTo(50,50); // path start elbow.JineTo(150, 200); // draw line from start to x=150, y=200 elbow tineTo (250,50); // draw line from last inflection x=250, y=50 } private void applyapplyWindowToViewportTransformation Graphics2D g2, double left, double right, double bottom, double top, boolean preserveAspest) { int width = getWidth1); // The width of this drawing area, in pixels. int height = getHeight1); // The height of this drawing area, in pixels. if (preserveAspect) { // Adjust the limits to match the aspect ratio of the drawing area. double displayAspect = Math.abs((double) height / width); double requestedAspect = Math.abs( bottom-top ) / ( right-left)); if (displayAspect > requestedAspect) { // Expand the viewport vertically. double excess = (bottom-top) * (displayAspect/requestedAspect - 1); bottom +- excess/2; top -= excess/2i. else if (displayAspect < requestedAspect) { // Expand the viewport vertically. double excess = (right-left) * (requestedAspect/displayAspect - 1 right += excess/2 : left -= excess/2; } } g2.scale( width / (right-left), height / (bottom-top)); g2.translate( -left, -top); double pixelWidth = Math.abs( right - left ) / width); double pixelHeight = Math.abs( bottom - top ) / height); pixelSize - (float) Math, max (pixelWidth,pixelHeight); If we compile this programme and run it we should see an upside down ‘v' shape with a rounded join what other types of joins are there?
Java Graphics ^ Next, we can add an ellipse, rectangle, and round-cornered rectangle: g2.setPaint (Color .ORANGE); 92.fill( new Ellipse2D.Double (50, 300, 150, 300) ); // (xcoord, ycoord, xradius, yradius) g2.setPaint (Color.BLUE) ; 92. set Stroke( new BasicStroke (10f)); g2.draw(new Rectangle2D.Double (350, 475, 200, 100));// (xcoord, ycoord, width, height) g2.draw (new RoundRectangle2D.Double (300, 450, 200, 100, 30, 30)); // (xcoord, ycoord, width, height, arcwidth, archeight) Java Graphics X Now we can create a path and call it loop:
Now we can create a path and call it loop: Path2D loop = new Path2D.Double(Li Loop, move Te (300,50); loopedine Te (300,200); loop dine Te (400,200); Loopadine Te (400,100); SRM loop, lineTo (350,100); loop, lineTo (350, 75); 2015 www e' loop lineTo (375, 75); loop, lineTo (375,150); loop lineTo (500,150); loop, lineTo (500, 50); loop, closePath(); g2.setPaint. (Color.BLACK); g2.setStroke( new BasicStroke (3f)); g2.draw(loop); Java Graphics х If we want to fill our closed loop path we notice that some sections are left unfilled – why is this?
92. setPaint (CRMACENTA) ; g2.fill(loop); g2.setPaint (Color.BLACK); g2.setStroke ( new BasicStroke (3f)); g2.draw(loop); Java Graphics х Finally, lets fill a rectangle with a gradient colour scheme – notice the ramp is on the diagonal – why is this?: g2.setPaint(new GradientPaint. (300, 250, Color, red, 550, 350, Color:blue)); // (start coords (wy), colour, end coords. (xxx), colour) 92.fill(new RoundRectangle2D.Double (350, 300, 200, 100, 10, 10)); Java Graphics х
Part 2: Textured rectangle If we want to place a texture in a rectangle or other shape we need to use other java packages as well as javax. We need to be able to import a file into our program – specifically a file of type image. To do this we need to be able to catch an IO exception. And we need to be able to access the Texture Paint super class sop we can paint our image onto our shape. And finally, we need to hold the image in memory - so, we need to use the BufferedImage class. import java.awt.*; import java.awt. geom.*; import javax.swing.*; import java.io.File; import javax.imageio. ImageIO; import java.io.IOException; import java.awt Texturepaint; import java.awt image. Buffered Image; public class texturedRect extends JPanel { public static void main(String[] argy) throws Exception { JFrame frame: frame = new JFrame ("Java Graphics"); frame.setContentPane( new texturedRect()); frame.setDefaultCloseOperation (JFrame EXIT ON CLOSE) ; frame.setResizable(true); frame.setSize(400, 400); frame.setVisible(true); } protected void paint Component (Graphics g) {
First we create a background for our image: Graphics2D g2 = (Graphics2D) 9.create(); g2.setPaint (Color WHITE); g2.fillRect.(0,0,400,400); Next, we need to read in our image file from the local machine and buffer it in memory: BufferedImage img = null; try { img = Image 10.read(new File("sunflowers.jpg") } catch (IOException e) { //Image IDException; must be caught or declared to be thrown With our image stored, we can get some information from it (width, height): Buffered Image buffered Image = new Buffered Image (img.getWidth (null), img.getHeight (null), Buffered Image, TYPE INT.RGB); Create a rectangle for painting our tecture into: Rectangle rest = new Rectangle(100, 100, 200, 200); Paint our img onto our rectangle shape using Texture Paint(): Texturepaint txpaint = new Texturepaint Limg, rect); And, finally, setPaint() our image texture paint onto a new rectangle for viewing on our panel: g2.setPaint.(txpaint); g2.fill(new Rectangle (100, 100, 200, 200));
Java Graphics - х Straightaway we dan see a problem – the image has been squashed to fit the square shape – how can we fix this?
Part 3: Transformations – translation, rotation, scale Now that we can draw different shape, fill them or texture them, we need to know how to move them around on our panel. To do this we use various transformations. import java.awt. *; import java.awt geom.*; import javax.swing.*; public class transformRect extends JPanel { public static void main(String[] argv) throws Exception { JFrame frame: frame = new JFrame ("Java Graphics"); frame.setContentPane( new transformRect()); frame.setDefaultCloseOperation (JFrame.EXIT ON CLOSE) ; frame.setResizable(true); frame.setSize(600,600); frame.setVisible(true); } protected void paint component (Graphics g) { Graphics2D g2 = (Graphics2D) 9.create(); g2.setPaint. (Color.WHITE); 92.fillRect.(0,0,600, 600); //background rectangle We start with a filled rectangle not transformed: g2.setPaint (Color.BLUE); 92.setStroke( new BasicStroke (10f)); g2.draw(new Rectangle2D.Double (50, 50, 200, 100)); Now we can add a new rectangle with a translation x = 50, y = 50: 92. translate (50, 50);// moves everything below this x=50, y=50 g2.setPaint. (Color,RER); 92.setStroke( new BasicStroke (10f)); g2.draw (new Rectangle2D.Double (50, 50, 200, 100)); Next, we can apply a rotation (1/4Pi or 45°) and translation to a new rectangle: g2.translate (50, 50);// adds a further translation 92.rotate (Math.PI/4); //rotates everything below this g2.setPaint (Color.MAGENTA) ;
92.setStroke ( new BasicStroke (10f)); g2.draw(new Rectangle2D.Double(50, 50, 200, 100)); Finally, we can scale another rectangle width x 2, height x 0.5 (note: we need to reverse the translations we did earlier - as they are cumulative): 92.rotate(-Math.FI/4);//need to reverse rotation from above 92.translate(-150, 350); //use this to reverse translations above i7 note: translation after rotation, else rotation pivot is about new translation 92.scale(2, 0.5); // scale everything below width x 2, height x 0.5 92.setPaint. (Color.ORANGE) ; g2.setStroke( new BasicStroke (10f)); g2.draw(new Rectangle2D.Double (50, 50, 200, 100)); } Submission requirements (5 separately named java files - check that they compile correctly): Java File 1: v shape with rounded join and caps Java File 2: filled ellipse, rectangle, and round-cornered rectangle Java File 3: closed looped path with outline and filled Java File 4: texture gradient rectangle with rounded corners Java File 5: image-textured rectangle corrected to match image aspect ratio in display