Klasa Rectangle (HTML5 canvas)

Klasa Rectangle

Klasa opisująca prostokąt. Dziedziczy po Figure.

Konstruktor

0, 1, 3 albo 4 argumenty.

var rectangle = new Rectangle(). Tworzy prostokąt zerowy o współrzędnych P₁(0.0, 0.0), P₂(0.0, 0.0), P₃(0.0, 0.0) oraz P₄(0.0, 0.0).

var rectangle = new Rectangle(new Array(new Point(x1,y1), new Point(x2,y2), new Point(x3,y3), new Point(x4,y4))) . Przyjmuje tablicę zawierającą cztery punkty Point. Tworzy prostokąt na bazie tych punktów.

var rectangle = new Rectangle(new Point(x1,y1), width, height). Przyjmuje punkt Point będący lewym górnym wierzchołkiem prostokąta oraz szerokość i wysokość prostokąta. Tworzy tablicę czterech punktów narożnikowych. Tworzy czworokąt o podanej wysokości i szerokości na bazie tych punktów.

var rectangle = new Rectangle(x1, y1, width, height). Przyjmuj dwie współrzędne punktu stanowiącego lewy, górny wierzchołek prostokąta oraz szerokość i wysokość prostokąta. Tworzy cztery punkty narożnikowe Point i czworokąt na bazie tych punktów..

Właściwości

Właściwości

Właściwość	Opis	Wartość lub klasa obiektu	Wartość domyślna
points	tablica zawierająca cztery punkty Point tworzące ten prostokąt	Array	[]

Funkcje

Funkcje

Typ zwracany	Nazwa	Opis	Przykład
boolean	isRectangle()	Sprawdza czy cztery punkty tworzą prostokąt.	Rysowanie prostokąta
liczba rzeczywista	area()	Oblicza i zwraca pole powierzchni tego prostokąta.
liczba rzeczywista	perimeter()	Oblicza i zwraca obwód tego prostokąta.
liczba rzeczywista	diagonal()	Oblicza i zwraca długość przekątnej prostokąta.
Rectangle	deepclone()	Tworzy głęboką kopię tego prostokąta.
Point	barycenter()	Zwraca punkt Point będący środkiem (ciężkości) tego prostokąta.
void	draw(context)	Odrysowuje ten prostokąt na kontekście context podanym jako argument.

Listing

var Rectangle = function() {
	this.points = [];
	var len = arguments.length;
	if (len == 0) {
		this.points[0] = new Point(0.0, 0.0);
		this.points[1] = new Point(0.0, 0.0);
		this.points[2] = new Point(0.0, 0.0);
		this.points[3] = new Point(0.0, 0.0);
	} else if (len == 1) {
		for (var i = 0; i < 4; i++) {
			this.points[i] = new Point(arguments[0][i].x, arguments[0][i].y);
		}
	} else if (len == 3) {
		this.points[0] = new Point(arguments[0].x, arguments[0].y);
		this.points[1] = new Point(arguments[0].x + arguments[1],
				arguments[0].y);
		this.points[2] = new Point(arguments[0].x + arguments[1],
				arguments[0].y + arguments[2]);
		this.points[3] = new Point(arguments[0].x, arguments[0].y
				+ arguments[2]);

	} else if (len == 4) {
		this.points[0] = new Point(arguments[0], arguments[1]);
		this.points[1] = new Point(arguments[0] + arguments[2], arguments[1]);
		this.points[2] = new Point(arguments[0] + arguments[2], arguments[1]
				+ arguments[3]);
		this.points[3] = new Point(arguments[0], arguments[1] + arguments[3]);
	}
};
Rectangle.prototype = new Figure();
Rectangle.prototype.isRectangle = function() {
	var d1 = roundToDecimal(distance(this.point[0], this.points[1]), 4);
	var d2 = roundToDecimal(distance(this.points[1], this.points[2]), 4);
	var d3 = roundToDecimal(distance(this.points[2], this.points[3]), 4);
	var d4 = roundToDecimal(distance(this.points[3], this.points[0]), 4);
	if (d1 == d3 && d2 == d4) {
		return true;
	}
	return false;
};
Rectangle.prototype.area = function() {
	var a = distance(this.points[0], this.points[1]);
	var b = distance(this.points[1], this.points[2]);
	return a * b;
};
Rectangle.prototype.deepclone = function() {
	var figure = new Rectangle();
	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);
	}
	return figure;
};
Rectangle.prototype.barycenter = function() {
	var x = (this.points[0].x + this.points[1].x) / 2.0;
	var y = (this.points[0].y + this.points[3].y) / 2.0;
	return new Point(x, y);
};
Rectangle.prototype.perimeter = function(){
	var a = distance(this.points[0], this.points[1]);
	var b = distance(this.points[1], this.points[2]);
	return 2*(a+b);
};
Rectangle.prototype.diagonal = function(){
	var a = distance(this.points[0], this.points[1]);
	var b = distance(this.points[1], this.points[2]);
	return Math.sqrt(a * a + b * b);
};
Rectangle.prototype.draw = function(context) {
	context.save();
	context.beginPath();
	this.setProps(context);
	context.moveTo(this.points[0].x, this.points[0].y);
	context.lineTo(this.points[1].x, this.points[1].y);
	context.lineTo(this.points[2].x, this.points[2].y);
	context.lineTo(this.points[3].x, this.points[3].y);
	context.closePath();
	if (this.stroke == true) {
		context.stroke();
	}
	if (this.fill == true) {
		context.fill();
	}
	context.restore();
};