Scribd
Upload
7 views16 pages

Lecture 2 - Primitive Output

Uploaded by

Rawyer Hawrami
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views16 pages

Lecture 2 - Primitive Output

Uploaded by

Rawyer Hawrami
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

1

Lecture 2: JavaFX 2D Primitive


Shapes

Shima Muhammad Qafor


UHD / College Of Science & Technology
Computer Science Department

Computer Graphics – Practicum


JavaFX 2D Shapes
2

 JavaFX offers variety nodes to draw different types of


shapes:
 Text
 Lines
 Circles
 Rectangles
 Curves
 Polygons
…
 You can add shapes to a Scene Graph.
 All shape classes are in
the javafx.scene.shape package
Example1: Creating a 2D Shape (1)
3

 To create a chart, you need to:


1. Instantiate the respective class of the required shape.
Line line1 = new Line();
2. Set the properties of the shape.
line1.setStartX(100);
line1.setStartY(100);
line1.setEndX(500);
line1.setEndY(300);
3. Create a Pane and add the object of the shape to the
pane.
Pane pane = new Pane();
pane.getChildern().add(line1);
Example1: Creating a 2D Shape (2)
4

 Add another line object to the previous example


Line line2 = new Line(100,300, 500,100);
pane.getChildern().add(line2);

 Change properties of the (Line) objects:


line1.setStrokeWidth(10);
line1.setStroke(Color.GREEN);
Exercise
5

 Create a rectangle with 4 connected lines


Shape Classes by JavaFX (1)
6


Line: A line is a geometrical structure joining two point.

Rectangle: In general, a rectangle is a four-sided polygon
that has two pairs of parallel and concurrent sides with all
interior angles as right angles.

Rounded Rectangle: A rectangle with arched edges is
known as rounded rectangle. Is represented by Rectangle
class.

Circle: A circle is a line forming a closed loop, every point
on which is a fixed distance from a centre point.

Ellipse: An ellipse is defined by two points, each called a
focus. If any point on the ellipse is taken, the sum of the
distances to the focus points is constant. The size of the
ellipse is determined by the sum of these two distances.
Shape Classes by JavaFX (2)
7


Polygon: A closed shape formed by a number of coplanar
line segments connected end to end.

Polyline: Is the same as a polygon except that a polyline is
not closed in the end. Or, continuous line composed of one or
more line segments. A Polyline is represented by Polygon
class.

Cubic Curve: Is a Bezier parametric curve in the XY plane is
a curve of degree 3.

QuadCurve: A quadratic curve is a Bezier parametric curve
in the XY plane is a curve of degree 2.

Arc: An arc is part of a curve.
Properties of 2D Objects
8

Property Description
fill Used to fill the shape with a defined paint.
stroke It represents the colour of the boundary line of the shape.
strokeType It represents the type of the stroke (where the boundary line will
be imposed to the shape) whether inside, outside or centered.
strokeWidth It represents the width of the stroke.
2D Shapes – Rectangles
9

 Rectangle rect = new Rectangle(100, 100, 200, 100);


 rect.setFill(Color.BLUE);
 rect.setStroke(Color.GRAY);
 rect.setStrokeWidth(5);

 You can also set rectangle properties separately


Rectangle r = new Rectangle();
r.setX(100);
r.setY(100);
r.setWidth(200);
r.setHieght(100);
2D Shapes – Rounded Rectangle
10

 Add these lines to the example in the previous slide


rect.setArcWidth(30);
rect.setArcHeight(30);
Exercise
11

 Modify the rectangle example to create the following:


2D Shapes – Circle
12

 Circle circle = new Circle(100, 100, 50);

Or
 circle.setCenterX(100);
 circle.setCenterY(100);
 circle.setRadius(50);
Writing Pixels
13

1. Create a pane
Pane pane = new Pane();
2. Create a canvas
Canvas canvas = new Canvas(500, 600);

3. PixelWriter pixelWriter =
canvas.getGraphicsContext2D().getPixelWriter();
4. pixelWriter.setColor(100, 200, Color.BLACK);

5. Add canvas to pane


6. Add pane to scene

There is other Java classes can be used to write a pixel to the screen
Exercise
14

 Write 10 pixels to the screen


 Create a line of 100 pixels
Text
15

 Text text = new Text();


 text.setText("Computer Graphics");
 text.setX(20);
 text.setY(40);
16

You might also like