Draw points, lines, and Surfaces Using JS

Draw points, lines, and Surfaces Using JS

When the idea of JS drawing goes through the brain, I feel a little interesting, so I practiced it. JS plotting is a series of articles, which are about points, lines, and surfaces.

First look at the example: http://www.zhaojz.com.cn/demo/draw5.html

I. Point

Here we use the span label to represent the vertex

Copy codeThe Code is as follows:
// Stroke, the parameter has a bit of size, color, coordinate and label of the vertex. Obviously, the opts parameter is an object.
Function drawPoint (opts ){
Document. write ("<span id = '" + opts. point [0] + "" + opts. point [1] + "'style = 'display: inline-block; width:" + opts. pw + "px; height:" + opts. ph + "px; background-color:" + opts. color + "; position: absolute" + opts. point [0] + "px; top:" + opts. point [1] + "px; '>" + (opts. point [2]? ("<Div style = 'position: relative; '> <span style = 'position: absolute; left: 5px; bottom: 1px; text-align: left; width: 100px; '> "+ opts. point [2] + "</span> </div>"): "") + "</span> ");
}

Parameters:

Opts. pw: the width of the vertex.

Opts. ph: the height of the point, which is generally equal to opts. pw.

Opts. color: The color of the vertex.

Opts. point: indicates the point position. point [0]: horizontal, point [1]: vertical point [2] is the point label.

Note: The position attribute must be absolute;

Ii. Straight Line

A straight line is composed of vertices. Therefore, we need to draw n multiple vertices between two points. Visually, It is a straight line.

Copy codeThe Code is as follows:
// Draw a line
// Start point of pstart
// Pend endpoint
// Opts Parameters
Function drawLine (pstart, pend, opts ){
Var ph = 1;
Var pw = 1;
Var color = "DarkRed ";
If (opts ){
Color = opts. color? Opts. color: color;
}
Var slope; // slope
Var noSlope = false; // whether the slope exists
Var hdist = pend [0]-pstart [0];
Var vdist = pend [1]-pstart [1];
If (hdist! = 0 ){
Slope = Math. abs (vdist/hdist); // calculates the slope.
} Else {
NoSlope = true; // when hdist = 0, the straight line has no slope
}
Var gapp = pw> ph? Ph: pw; // default distance between neighboring points (pixels in the upper left corner)

Var diagonal = Math. sqrt (Math. pow (hdist, 2) + Math. pow (vdist, 2); // Oblique Edge Length
Var pn = parseInt (diagonal/gapp); // calculate the number of points between two points
If (pn <3) {pn = pn * 3 + 1}; // if the number of points is less than 3, increase the number of points. Why + 1, is to ensure that pn = 0 to a few points
Var vgap = Math. abs (vdist)/pn; // vertical distance between two adjacent points
Var hgap = Math. abs (hdist)/pn; // horizontal distance between two adjacent points
For (var I = 0; I <pn; I ++ ){
// Stroke
// Horizontal distance between two adjacent points of hgap
// Vertical distance between two adjacent points in vgap
// Hgap * I * (pend [0] <pstart [0]? -1:1) * (noSlope? ) Horizontal offset relative to the start point
// Vgap * I * (pend [1] <pstart [1]? -) Vertical offset relative to the Starting Point
// (Pend [0] <pstart [0]? -1:1) horizontal offset direction
// (Pend [1] <pstart [1]? -1:1) vertical offset direction
// (NoSlope? ) When the straight line has no slope, the horizontal offset is 0
DrawPoint ({
Pw: pw,
Ph: ph,
Color: color,
Point: [(hgap * I * (pend [0] <pstart [0]? -1:1) * (noSlope? 0: 1) + pstart [0]), (vgap * I * (pend [1] <pstart [1]? -1:1) + pstart [1])]
});
}
}

Line and surface can be drawn on the basis of online:

Line:

Copy codeThe Code is as follows:
// Line
// One-dimensional array of ps points
Function drawPolyline (ps ){
If (ps ){
// Draw a line
For (var I = 0; I <ps. length-1; I ++ ){
DrawLine (ps [I], ps [I + 1]);
}
// Draw inflection point
For (var I = 0; I <ps. length; I ++ ){
DrawPoint ({
Pw: 3,
Ph: 3,
Color: 'red ',
Point: ps [I]
});
}

}
}

Polygon:

Copy codeThe Code is as follows:
// Polygon
// One-dimensional array of ps points
Function drawPolygon (ps ){
If (ps ){
// Draw a line
For (var I = 0; I <ps. length-1; I ++ ){
DrawLine (ps [I], ps [I + 1]);
}
// Close
If (ps. length> 2 ){
DrawLine (ps [ps. length-1], ps [0])
}
// Draw inflection point
For (var I = 0; I <ps. length; I ++ ){
DrawPoint ({
Pw: 3,
Ph: 3,
Color: 'red ',
Point: ps [I]
});
}
}
}

 
Rectangle:

Copy codeThe Code is as follows:
// Draw a rectangle
// The Position of the point in the upper left corner of leftTop
// Width
// High
Function drawRectangle (leftTop, width, high ){
DrawPolygon ([
LeftTop,
[LeftTop [0], leftTop [1] + high],
[LeftTop [0] + width, leftTop [1] + high],
[LeftTop [0] + width, leftTop [1]
]);
// Fill
// Document. write ("<span style = 'height:" + (high-1) + "px; width:" + (width-1) + "px; background-color: "+" Green "+"; position: absolute; left: "+ (leftTop [0] + 1) +" px; top: "+ (leftTop [1] + 1) + "'> </span> ");
}

It turns out that JS can also do such a cool thing, so we really need to study it well.