Home>

The Java language is based on the graphics class providing the drawing of various basic geometric shapes.The extended graphics class provides a graphics2d class, which has more powerful two-dimensional graphics processing capabilities.Provide more precise control of coordinate conversion, color management, and text layout.

Drawing properties

graphics2d defines several methods,Used to add or change the state attributes of the graphic.You can set and modify state attributes,Specify the pen width and how the pens are connected;Set to translate, rotate, scale or trim transform graphics;And setting the color and pattern of the fill graphic.Graphic state attributes are stored with specific objects.

Stroke attribute

The stroke property controls the width of the line, the style of the stroke, the connection of the line segments, or the dash pattern.To set this property, you need to create a basicstroke object, and then call the setstroke () method to set it.The methods for creating a basicstroke object are:

basicstroke (float w):Specify the line width w.

basicstroke (float w, int cap, int join):

Cap is end-point-like:cap_butt (unmodified), cap_round (semi-circular end), cap_square (square end,Defaults).

join defines the connection at the intersection of two line segments:join_bevel (no decoration), join_mtter (pointed end,(Default), join_round (rounded end).

Paint attribute

The paint property controls the fill effect.First call the following method to determine the fill effect,Set using the setpaint () method.

gradientpaint (float x1, float y1, color c1, float x2, flaot y2, color c2):from (x1, y1) to (x2, y2) the color gradient from c1 to c2. Among them:the parameters c1, c2 determine that this gradient color changes from color c1 to color c2. The parameters x1, y1, x2, y2 determine the strength of the gradient,That is, it is required to start from point (x1, y1) to point (x2, y2), and change the color from c1 to c2.

gradientpaint (float x1, float y1, color c1, float x2, float y2, color c2, boolean cyclic):If i want the gradient to reach the end point and then the starting color,Cyclic should be set to true.

3.transform property

The transform property is used to implement common transformation operations such as translation, scaling, and beveling of graphics.First create the affinetransform object, and then call the settransform () method to set the transform property. Finally, draw a graphic with a graphics2d object with the specified properties.The methods for creating an affinetransform object are:

getrotateinstrance (double theta):rotate theta radians. getrotateinstance (double theta, dioble x, double y):rotate around the rotation center (x, y). getscaleinstance (double sx, double sy):The x and y directions are scaled by sx, sy respectively. gettranslateinstance (double tx, double ty):translation transformation. getshearinstance (double shx, double shy):oblique cut transformation,shx and shy specify the slope.

You can also first create an affinetransform object without the transform property, and then specify the graphics translation, rotation, and scale transformation properties using the following methods.

transelate (double dx, double dy):translate the graphic by dx pixels in the x-axis direction. scale (double sx, double sy):The graphic is scaled by sx times in the x-axis direction and vertically scaled by sy times. rotate (double arc, double x, double y):rotate the arc by radians with the point (x, y) as the axis.

For example, to create an affinetransform object:

 affinetransform trans=new affinetransform ();

Specify the rotation transform properties for the affinetransform object:

 trans.rotate (50.0 * 3.1415927/180.0,90,80);

Then set the "brush" with the above rotation transformation function for the graphics2d object g2d:

 graphics2d g2d=(graphics2d) g;g2d.settranstorm (trans);

Finally, the draw () method of the graphics2d object with transformation function is called with the graphic object as a parameter. For example, suppose there is a quadratic curve object curve, and the following code implements drawing the quadratic curve with the g2d object with the above rotation function:

 g2d.draw (curve);

4. clip attribute

The clip property is used to achieve the clipping effect.Set the cropping properties by calling the etctlip () method to determine the shape of the cropping area. Multiple setclip () in a row get the clipping area where they intersect.

5.composit property

The composit property sets the effect of the graphics overlapping area.First use the method alphacomposite.getinstance (int rule, float alpha) to get the alphacomposite object, and then set the blending effect using the setcomposite () method.The alpha value ranges from 0.0f (fully transparent) to 0.1f (fully opaque).

graphics2d class drawing method

The graphics2d class still retains the drawing methods of the graphics class,Many new methods have also been added.The new method draws geometric figures (line segments, circles, etc.) as an object.A series of classes declared in the java.awt.geom package,Used to create various body graphic objects.There are:

line2d line segment class, roundrectangle2d rounded rectangle class,ellipse2d ellipse class, arc2d arc class, quadcurve2d quadratic curve class,cubiccurve2d cubic curve class.

To draw a graphic with the new method of the graphics2d class.First in the repaint method paintcomponent () or paint (), coerce the parameter object g into a graphics2d object;then, use the static method double () provided by the graphics class to create the graphics object;Finally, call the draw () method of the graphics2d object with the graphic object as a parameter to draw the graphic.For example, the following code uses the new method of graphics2d to draw line segments and rounded rectangles:

 graphics2d g2d=(graphics2d) g;//convert object g type from graphics to graphics2d
  line2d line=new line2d.double (30.0,30.0,340.0,30.0);
  g2d.draw (line);
  roundrectangle2d rrect=new roundrectangle2d.double (13.0,30.0,100.0,70.0,40.0,20.0);
  g2d.draw (rrect);

You can also use the shape object provided by the java.awt.geom package to create a shape object using single-precision float coordinates or double-precision double coordinates, and then draw using the draw () method.For example, the following code first creates an arc object,Then draw the arc:

 shape arc=new arc2d.float (30,30,150,150,40,100, arc2d.open);
  g2d.draw (arc) //Draw the graphic object arc created earlier

graphics2d geometry class

Line segment

 line2d line=new line2d.double (2,3,200,300);//Declares and creates a line segment object
  //The starting point is (2,3) and the ending point is (200,300)

rectangle

 rectangle2d rect=new rectangle2d.double (20,30,80,40);//Declares and creates a rectangular object,The upper left corner of the rectangle is (20, 30), the width is 300, and the height is 40

Rounded Rectangle

 roundrectangle2d rectround=new roundrectangle2d.double (20,30,130,100,18,15);
  //The upper left corner is (20, 30), the width is 130, the height is 100, the long axis of the rounded corner is 18, and the short axis is 15.

oval

 ellipse2d ellipse=new ellipse2d.double (20,30,100,50);
  //Top left corner (20, 30), width is 100, height is 50

Arc

 arc2d arc1=new arc2d.double (8,30,85,60,5,90, arc2d.open);
  //The upper left corner of the circumscribed rectangle (10, 30), width 85, height 60, starting angle is 5 degrees, ending angle is 90 degrees
  arc2d arc2=new arc2d.double (20,65,90,70,0,180, arc2d.chord);
  arc2d arc3=new arc2d.double (40,110,50,90,0,270, arc2d.pie);

The parameters arc2d.open, arc2d.chord, and arc2d.pie indicate that the arc is an open arc, a bow arc, and a pie arc, respectively.

Quadratic curve

The quadratic curve is represented by a second-order polynomial:

 y (x)=ax2 + bx + c

A quadratic curve requires three points to determine:the start point, the control point, and the end point.

 quadcurve2d curve1=new quadcurver2d.double (20,10,90,65,55,115);
  quadcurve2d curve2=new quadcurver2d.double (20,10,15,63,55,115);
  quadcurve2d curve3=new quadcurver2d.double (20,10,54,64,55,115);

The six parameters in the method double () are the starting point, control point, and end point of the quadratic curve.The starting points and ending points of the above three quadratic curves are the same.

Cubic curve

The cubic curve is represented by a third-order polynomial:

 y (x)=ax3 + bx2 + cx + d

A cubic curve requires four points to determine:the start point, two control points, and the end point.

 cubiccurve2d curve1=new cubiccurve2d.double (12,30,50,75,15,15,115,93);
  cubiccurve2d curve2=new cubiccurve2d.double (12,30,15,70,20,25,35,94);
  cubiccurve2d curve3=new cubiccurve2d.double (12,30,50,75,20,95,95,95);

The eight parameters in the method double () are the start point, two control points, and end points of the cubic curve.

The drawing process of the general equation curve is controlled by a loop.Generate the value of the independent variable through a loop,Calculate the function value according to the equation,Then make the necessary coordinate transformation:the translation transformation of the origin positioning,Scaling transformation of image reduction or enlargement,Get the image points of the curve,And draw this point.Take the following curve equation as an example:

 y=sin (x) + cos (x), x

The part of the code drawn can be written as follows:

double x0, y0, x1, y1, x2, y2, scale;
x0=100;y0=80;
scale=20.0;
for (x1=-3.1415926d;x1<= 2 * 3.1415926d;x1 +=0.01d) {
  y1=math.sin (x1) + math.cos (x1);
  x2=x0 + x1 * scale;y2=y0 + y1 * scale;//(x2, y2) is the image point
  g.filloval ((int) x2, (int) y2,1,1);//Draw a dot as an image point
}
  • Previous Simple example of js implementing click to switch checkbox background image
  • Next clipboardjs does not require Flash and does not rely on any JS library for text copying and cutting