Cis 234 graphics applets
Download
1 / 19

CIS 234: Graphics Applets Dr. Ralph D. Westfall - PowerPoint PPT Presentation


  • 345 Views
  • Uploaded on

CIS 234: Graphics & Applets Dr. Ralph D. Westfall February, 2002 Graphics back in the "good old days," computers only worked with text no images no input boxes no mouse Palo Alto Research Center (PARC) created first GUI in 1970s, Apple copied it in 1980s, Microsoft copied in 1990s

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CIS 234: Graphics Applets Dr. Ralph D. Westfall' - oshin


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Cis 234 graphics applets l.jpg

CIS 234: Graphics & Applets

Dr. Ralph D. Westfall

February, 2002


Graphics l.jpg
Graphics

  • back in the "good old days," computers only worked with text

    • no images

    • no input boxes

    • no mouse

  • Palo Alto Research Center (PARC) created first GUI in 1970s, Apple copied it in 1980s, Microsoft copied in 1990s


Advantages of graphics l.jpg
Advantages of Graphics

  • easier to work with

    • click "icon" rather than type program name

  • less training required

  • more fun to use programs with graphics

  • more fun to write graphics programs


Java graphics the internet l.jpg
Java Graphics & the Internet

  • can use Java graphics in regular Java applications

    • (may be) easier to start using graphics with Java that runs in a web browser

  • to run in a browser, Java needs to be coded into an Applet that runs in a HTML web page


What is html l.jpg
What Is HTML?

  • Hyper Text Markup Language

    • hyper means much greater

    • hypertext has hotlinks to other material

  • markup language

    • tells computer how/where to display material

    • word processing programs use their own markup languages

      • formerly visible (show codes), now hidden


Html tags l.jpg
HTML Tags

  • markup information is enclosed in angle brackets, such as <p> [paragraph]

    • brackets + content = tag

  • control appearance of page or text

  • not visible in browser

    • can see if use View>Source

  • frequently work in pairs

    • <b> some text etc. </b> [bold]


Java applet l.jpg
Java Applet

  • a Java class that runs in a window in a HTML page in a web browser instead of in a DOS window

  • HTML has special tags for applets

    • also has tags for parameters (arguments) that can be used as inputs to the applet


Java graphics capabilities l.jpg
Java Graphics Capabilities

  • place text on an Applet

  • draw geometric figures: straight line, curve, rectangle, oval, etc.

  • add color to graphic items


Applet graphics methods l.jpg
Applet Graphics Methods

  • applets use an init() method rather than main method at start

    • could be implicit (not visible)

  • in addition to init() etc., all Applets have

    • paint method – puts graphics objects on the Applet

    • repaint method – "refreshes" Applet to reflect any changes (possibly implicit)


Coordinates l.jpg
Coordinates

  • values to identify position on screen

    • x (first) how many pixels to right

    • y (2nd) how many pixels down

    • 0, 0 is upper left corner

    • 800, 600 is toward lower right

      • actual position depends on width/height of screen (e.g., is in middle of 1600 x 1200 screen)


Using java with html l.jpg
Using Java with HTML

  • <applet code = "MyApplet.class" width = 250 height = 200>

  • </applet>

  • displays MyApplet in window in browser

    • window = 250 pixels wide, 200 pixels high

    • can change width and height

    • most screens are 800 x 600 or larger


Drawstring method l.jpg
drawString Method

  • puts a String (text) on Applet

  • 3 arguments: string, x, y (coordinates)

  • can use it in a paint method

  • public void paint(Graphics g) // g

    {g.drawString("Hi", 10, 20);} // g

    • Java automatically supplies a graphics object; can call it g or anything else


Setfont method l.jpg
setFont Method

  • declaring

    • Font myFont = new Font("Helvetica", Font.ITALIC, 24);

      • Courier, Helvetica and TimesRoman

      • BOLD, ITALIC or PLAIN

      • # of points (10 or 12 typical in Word doc)

  • using in a paint method

    • g.setFont(myFont);


Setting colors l.jpg
Setting Colors

  • Color class has 13 constants (p. 160)

    • Color.blue, Color.red, Color.darkGrey, etc.

  • setColor sets foreground color

  • setBackground sets Applet background

  • using in a paint method

    • g.setColor(Color.green); // graphics object

    • this.setBackground(Color. yellow);

    • // this = Applet


Creating a graphics object l.jpg
Creating a Graphics Object

  • paint method automatically gets a graphic object

  • most other methods don't get a graphics object

    • need to use getGraphics method to create graphics object within other methods

    • Graphics g = getGraphics();

      g.drawString("Hello", 5, 50);


Drawline method l.jpg
drawLine Method

  • arguments are 2 pairs of coordinates

    • x, y for 1 point and x, y for other end

  • g.drawLine(10, 10, 40, 10); // ?

  • g.drawLine(10, 10, 10, 40); // ?

  • g.drawLine(10, 10, 40, 40); // ?


Rectangle methods l.jpg
Rectangle Methods

  • arguments are upper left corner coordinates (x, y), and width and height

  • g.drawRect(10, 100, 80, 30); // outline

    • corner = 10, 100; width = 80; height= 30

  • g.fillRect(100,100,30,80); // solid color

  • g.clearRect(105, 105, 20, 70);

    // inside is same color as background


Rounded rectangles l.jpg
Rounded Rectangles

  • takes 6 arguments: corner coordinates, rectangle width and height, plus width and height of corner ovals

    • with larger widths and heights, corners get more rounded

  • g.drawRoundRect(5, 5, 30, 30, 2, 2);

  • g.drawRoundRect(5, 5, 30, 30, 4, 6);


Ovals l.jpg
Ovals

  • oval methods draw ovals that would fit in a rectangle of same size

  • g.drawOval(10, 10, 80, 30); // outline

  • g.fillOval (10, 10, 30, 80); // solid color

  • g.clearOval(10, 10, 80, 30);

    // inside is same color as background


ad