JavaFX doesn't support cartoon triangles out of the box, but at that place are 3 really simple means to draw them anyway. In fact, we can create drawable triangles on the Pane, Canvass and Push button objects.

In JavaFX, a triangle can be drawn in three ways:

  1. Creating a Polygon object with three points.
  2. Issuing draw commands strokePolygon() and fillPolygon() to a Sheet node
  3. Creating a shaped Button command past specifying their shape using CSS holding '-fx-shape'

What you will get out of this article?

In that location's more than one manner to define a triangle, so I'll go through drawing triangles in 2 ways. The first, obvious manner is using three points (duh). Only, sometimes it's useful to get a triangle by specifying the angle between two lines, and a distance to the opposing edge.

For example, if you lot're creating a bounding box for a field-of-view (it's computationally cheaper than using an arc). Finally, I'll go through creating shaped push controls.

Utilise these links to jump ahead if you demand a specific example:

  • Creating triangles on a Pane
  • Drawing triangles on a Canvas
  • Creating triangular regions, rather than Shape objects.

Everything's easier with free lawmaking: In each department, I've included code. You're welcome to use it to create objects for painting.

How to describe a triangle using lines on a Pane

JavaFX does a lot to ameliorate the efficiency of its own drawing past keeping track of which areas of a Scene take and haven't changed between frames. Unfortunately, that means information technology'south more difficult than information technology might seem to simply create a Triangle object like the Rectangle or Circle, which extend Shape.

Each concrete Shape has a Helper class, which itself has an Accessor course. These help the JavaFX scene to render the shapes – but they're likewise used direct by the Prism rendering pipeline. That means we're not allowed to create or collaborate with them.

Instead, we'll need to create a factory class that creates Polygon objects – triangles – from some inputs we'll provide. The options are:

  • Creating a triangle from three points
  • Specifying the triangle using angles and distances, and converting this information inside the factory class

Creating a triangle polygon using spatial coordinates

The easiest way to create a triangle is by specifying the spatial coordinates of the triangle'due south three points. And the temptation hither is to create a triangle where we want to put information technology in the Scene.

But wait! Creating a triangle similar that might brand moving it around much harder downwards the line. If you create a triangle that's positioned manually, JavaFX still considers its origin to exist (0,0). Then, if you lot need to move the object later, you won't be able to measure where information technology is (the layout and translate properties volition still be zero).

That might be admittedly fine – sometimes you don't need to move things once they're created. Only I retrieve it'south worth bearing in mind. What I prefer to do is create a function that converts those points into layout-corrected values.

The Polygon object is then centred in a sensible way, and the layoutX and layoutY properties are appropriately updated.

Polygon createTriangle(Point2D p1, Point2D p2, Point2D p3){     Point2D centre = p1.midpoint(p2).midpoint(p3);      Point2D p1Corrected = p1.decrease(eye);     Point2D p2Corrected = p2.subtract(centre);     Point2D p3Corrected = p3.subtract(centre);      Polygon polygon = new Polygon(             p1Corrected.getX(), p1Corrected.getY(),             p2Corrected.getX(), p2Corrected.getY(),             p3Corrected.getX(), p3Corrected.getY()     );      polygon.setLayoutX(centre.getX());     polygon.setLayoutY(centre.getY());      render polygon; }

Ane solid culling to creating triangles where the origin is at the centre of the Polygon is to create triangles with one corner at (0,0). The triangle will notwithstanding rotate based on its calculated center, but information technology will at least exist positioned logically.

In the next section, I'll exist creating a field-of-view instance, which includes code to modify how a triangle rotates, which you can also use to the example above.

Creating triangles from an angle and a altitude.

A 2d selection, if yous need to specify a triangle for things similar field-of-view, is to specify the origin of the triangle, an bending, and a distance. Obviously, you tin can only create symmetrical triangles, only that works in this case.

The general principle here is to just create the triangle, point up from the origin at the length requested, then setting the "origin" of the triangle, and the angle, to any was prepare. In the image above, the origin should be on the character at 25, 10 and the angle is 180° (pointing downwards).

Polygon createTriangle(Point2D origin, double length, double angle){     Polygon fovTriangle = new Polygon(             0d, 0d,             (length * Math.tan(angle)), -length,             -(length * Math.tan(angle)), -length     );          fovTriangle.setLayoutX(origin.getX());     fovTriangle.setLayoutY(origin.getY());     return fovTriangle; }

Not quite finished! 1 quirk of the way JavaFX deals with rotation is that the default behaviour for a node is to calculate the centre of the bounding box as the centre of rotation every bit well.

That's not really what we want from a field-of-view. Ideally, we desire the triangle to pivot on our character. Then we'll need to set the centre of rotation ourselves to the same origin we divers for the triangle.

We don't have enough access to the default rotate transform in the Node object to requite us this flexibility. So, we'll need to do a little more than tweaking to set our own Rotate transform, which allows the states to set up a pivot betoken.

Check out the full implementation with custom rotation methods in the dropdown.

How to draw triangles on a Sail

The basic rule for cartoon triangles on a Canvas is that yous're either going to have to draw 3 lines, or create a polygon. While the three lines creates a simple solution, creating a polygon likewise has the option of providing a filled interior. Considering creating a polygon gives a lilliputian more than flexibility, that's the approach I'll use here.

To draw a polygon on a Canvass node, you'll need to specify the 10 and y-coordinates separately as arrays of double values, alongside the number of points (apparently, here it's 3). The parameters are the same for both the strokePolygon() and fillPolygon() methods of the Canvas's GraphicsContext.

Canvas fillPolygon() and strokePolygon() commands
Whatsoever extra values in the coordinate arrays are ignored.

This barely touches the surface of things you tin can achieve with the Canvas node. If you lot're interested in learning more, I've written a comprehensive guide about the Canvas hither. It'south both a helpful illustrated guide to the drawing commands, every bit well as having more than depth on how the Sail itself works.

Creating triangles by setting '-fx-shape'

Finally, If y'all want to employ something like a button (in-congenital click functionality, for case), but shape it into a triangle, the easiest way to exercise it is to use the CSS -fx-shape holding, specifying an SVG path as a Cord. You tin can either practice that in Java code, or by referencing a CSS file you're already using.

Button push= new Button(); button.setPrefHeight(200); button.setPrefWidth(200); button.setStyle("-fx-background-color: blueish; -fx-shape: 'M 0 0 50 0 0 fifty z'");

There are lots of means to apply vector graphics in JavaFX. I call back it's something that brings a lot of value to JavaFX in creating visually appealing applications. If you desire to find out more, check out my superlative 3 tips for incorporating SVGs into your applications.

Conclusions

Although JavaFX doesn't provide back up for drawing triangles natively out of the box, in that location are three uncomplicated work arounds we can utilize to include them in our apps.

Creating a triangular Polygon object in a Pane is incredibly unproblematic, and we can modify the points with which we create the triangle to make certain it has a sensible origin.

Equally, it yous demand the triangle to rotate with a pivot at a specific bespeak, you can manually specify a Rotate transform, setting the pivot to the bespeak on the triangle where the pivot needs to be.

Finally, yous can create elegant buttons of most any shape by specifying the CSS -fx-shape holding. In this case, we've used information technology to shape the button as a triangle. Information technology's ever worth adopting a flatter effect, equally the alternative is a slightly strange looking clipped button.