Zielony Smok

HTML5 canvas – tutorial

Klasa RegPolygon

Klasa opisująca wielokąt (wielobok) regularny. Dziedziczy po Figure.

Konstruktor

0 lub 3 argumenty.

var rpolygon = new RegPolygon(). Przyjmuje punkt Point P(0,0) stanowiący środek wielokąta, sides – liczba boków (wierzchołków) wielokąta = 0, r – promień okręgu opisanego na wielokącie = 0.0.

var rpolygon = new RegPolygon(new Point(x,y), sides, r). Przyjmuje punkt Point stanowiący środek wielokąta, sides – liczba boków (wierzchołków) wielokąta, r – promień okręgu opisanego na wielokącie.

Właściwości

Właściwości
Właściwość Opis Wartość lub klasa obiektu Wartość
domyślna
points tablica zawierająca punkty Point będące wierzchołkami wielokąta. Punkty wyznaczane są przez algorytm, chyba, że konstruktor jest wywołany bez argumentów. Array []
center punkt Point wyznaczający środek wielokąta Point
sides liczba boków/wierzchołków wielokąta liczba całkowita
r promień okręgu opisanego na wielokącie liczba rzeczywista

Funkcje

Funkcje
Typ zwracany Nazwa Opis Przykład
liczba rzeczywista area() Oblicza i zwraca pole powierzchni tegowielokąta. Rysowanie
wielokąta regularnego
IrregPolygon deepclone() Tworzy głęboką kopię tego wielokąta.
Point barycenter() Zwraca punkt Point będący środkiem (ciężkości)
tego wielokąta.
liczba rzeczywista perimeter() Oblicza i zwraca obwód tego wielokąta.
void draw(context) Odrysowuje ten wielokąt na kontekście context
podanym jako argument.

Listing

var RegPolygon = function() {
  this.points = [];
  var len = arguments.length;
  if (len == 3) {
  	this.center = new Point(arguments[0].x, arguments[0].y)
  this.sides = arguments[1];// liczba boków
  this.r = arguments[2];// promień
  this.points[0] = new Point(arguments[0].x + this.r, arguments[0].y);
  for (var i = 1; i < this.sides; i++) {
  	this.points[i] = new Point(arguments[0].x + this.r
  	* Math.cos(i * 2 * Math.PI / this.sides), arguments[0].y
  	+ this.r * Math.sin(i * 2 * Math.PI / this.sides));
  }
 }
};
RegPolygon.prototype = new Figure();
RegPolygon.prototype.area = function() {
var area = 0.0;
var a = distance(this.points[0], this.points[1]);
var ka = a * a;
switch (this.sides) {
case 3:
	area = Math.sqrt(3) / 4.0 * ka;
	break;
case 4:
	area = ka;
	break;
case 5:
	area = Math.sqrt(25 + 10 * Math.sqrt(5)) / 4 * ka;
	break;
case 6:
	area = 3 * Math.sqrt(3) / 2 * ka;
	break;
case 7:
	area = 3.6339 * ka;
	break;
case 8:
	area = 2(1 + Math.sqrt(2)) * ka;
	break;
case 9:
	area = 6.1818 * ka;
	break;
case 10:
	area = 5 * Math.sqrt(25 + 10 * Math.sqrt(5)) / 2 * ka;
	break;
case 12:
	area = 3 * (2 + Math.sqrt(3)) * ka;
	break;
default:
	area = this.sides / 4
	* (Math.cos(Math.PI / sides) / Math.sin(Math.PI / sides)) * ka;
	break;
}
return area;
};
RegPolygon.prototype.deepclone = function() {
	var figure = new RegPolygon();
	figure.globalAlpha = this.globalAplpha;
	figure.globalCompositeOperation = 
           this.globalCompositeOperation;
	figure.strokeStyle = this.strokeStyle;
	figure.fillStyle = this.fillStyle;
	figure.shadowOffsetX = this.shadowOffsetX;
	figure.shadowOffsetY = this.shadowOffsetY;
	figure.shadowBlur = this.shadowBlur;
	figure.shadowColor = this.shadowColor;
	figure.lineWidth = this.lineWidth;
	figure.lineCap = this.lineCap;
	figure.lineJoin = this.lineJoin;
	figure.miterLimit = this.miterLimit;
	figure.lineDashOffset = this.lineDashOffset;
	figure.lineDashSegments = [];
	for (var i = 0; i < this.lineDashSegments.length; i++) {
		figure.lineDashSegments[i] = this.lineDashSegments[i];
	}
	figure.fill = this.fill;
	figure.stroke = this.stroke;
	figure.points = [];
	for (var i = 0; i < this.points.length; i++) {
		figure.points[i] = new Point(this.points[i].x, 
                this.points[i].y);
	}
	figure.center = this.center;
	figure.sides = this.sides;
	figure.r  = this.r;
	return figure;
};
RegPolygon.prototype.barycenter = function() {
	return new Point(this.center.x, this.center.y);
};
RegPolygon.prototype.perimeter = function(){
	var dist = distance(this.points[0], this.points[1]);
	return dist * this.sides;
};
RegPolygon.prototype.draw = function(context) {
	context.save();
	context.beginPath();
	this.setProps(context);
	context.moveTo(this.points[0].x, this.points[0].y);
	for (var i = 1; i < this.sides; i++) {
		context.lineTo(this.points[i].x, this.points[i].y);
	}
	context.closePath();
	if (this.stroke == true) {
		context.stroke();
	}
	if (this.fill == true) {
		context.fill();
	}
	context.restore();
};