Klasa Oval (HTML5 canvas)

Klasa Oval

Klasa opisująca owal. Oznacza to koło, elipsę, odcinki i wycinki tych figur, oczywiście z wypełnieniem i/lub konturem. Dziedziczy po Figure. Kąt startowy to kąt 0 (leżący na godzinie trzeciej zegara). Kąty są liczone w kierunku przeciwnym do wskazówek zegara. Kąt końcowy jest zawsze większy od kąta startowego. Kąty 0°-90° leżą w pierwszej ćwiartce kartezjańskiego układu współrzędnych, etc. Kąty podawane są w radianach.

Konstruktor

0, 4, 5 albo 6 argumentów.

var oval = new Oval(). Tworzy zerowy owal.

var oval = new Oval(new Point(x,y), r, startAngle, endAngle). Przyjmuje punkt Point stanowiący środek owalu, startAngle – kąt początkowy, endAngle – kąt końcowy. Tworzy koło lub okrąg lub ich wycinek (łuk) – w zależności od zakresu kątów.

var oval = new Oval(new Point(x,y), r, startAngle, endAngle, b). Przyjmuje punkt Point stanowiący środek owalu, startAngle – kąt początkowy, endAngle – kąt końcowy, b – długość krótszego promienia elipsy. Tworzy elipsę lub jej obrys albo ich wycinek (łuk) – w zależności od zakresu kątów.

var oval = new Oval(new Point(x,y), r, startAngle, endAngle, b, segment). Przyjmuje punkt Point stanowiący środek owalu, startAngle – kąt początkowy, endAngle – kąt końcowy, b – długość krótszego promienia elipsy, segment – czy to jest odcinek koła. Tworzy odcinek koła albo elipsy lub ich obrys – w zależności od zakresu kątów.

 

Właściwości

Właściwości

Właściwość	Opis	Wartość lub klasa obiektu	Wartość domyślna
center	punkt Point wyznaczający środek owalu	Point	–
r	promień koła lub dłuższy promień elipsy	liczba rzeczywista
startAngle	kąt początkowy	liczba rzeczywista	–
endAngle	kąt końcowy	liczba rzeczywista	–
b	krótszy promień elipsy	liczba rzeczywista	r
segment	true – figura jest odcinkiem koła lub elipsy albo ich konturów, false – figura jest kołem, elipsą albo wycinkiem koła lub elipsy albo konturem tych figur.	true albo false	false

Funkcje

Funkcje

Typ zwracany	Nazwa	Opis	Przykład
Oval	deepclone()	Tworzy głęboką kopię tego owalu.	Rysowanie figur wypełnionych Rysowanie konturów figur Rysowanie figur wypełnionych z konturem
Point	barycenter()	Zwraca punkt Point będący środkiem (ciężkości) tego owalu.
void	draw(context)	Rysuje owal zgodnie z podanymi parametrami.

Listing

    var Oval = function() {
	var len = arguments.length;
	this.counterClockwise = true;
	if (len == 0) {
		this.center = new Point(0, 0);
		this.r = 0.0;
		this.startAngle = 0.0;
		this.endAngle = 0.0;
		this.b = this.r;
		this.segment = false;
	} else if (len == 4) {
		this.center = new Point(arguments[0].x, arguments[0].y);
		this.r = arguments[1];
		this.startAngle = arguments[2];
		this.endAngle = arguments[3];
		this.b = this.r;
		this.segment = false;
	} else if (len == 5) {
		this.center = new Point(arguments[0].x, arguments[0].y);
		this.r = arguments[1];
		this.startAngle = arguments[2];
		this.endAngle = arguments[3];
		this.b = arguments[4];
		this.segment = false;
	} else if (len == 6) {
		this.center = new Point(arguments[0].x, arguments[0].y);
		this.r = arguments[1];
		this.startAngle = arguments[2];
		this.endAngle = arguments[3];
		this.b = arguments[4];
		this.segment = arguments[5];
	}
};
Oval.prototype = new Figure();
Oval.prototype.deepclone = function() {
	var figure = new StarPolygon();
	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.center = new Point(this.center.x, this.center.y);
	figure.r = this.r;
	figure.startAngle = this.startAngle;
	figure.endAngle = this.endAngle;
	figure.counterClockwise = this.counterClockwise;
	figure.b = this.b;
	figure.segment = this.segment;
	return figure;
};
Oval.prototype.barycenter = function() {
	return new Point(this.center.x, this.center.y);
};
Oval.prototype.draw = function(context) {
	var angle = 2 * Math.PI;
	context.save();
	context.beginPath();
	this.setProps(context);
	var s = this.b / this.r;
	context.translate(0, this.center.y - this.center.y * s);
	context.scale(1, s);
	if (this.stroke == true) {
		context
		.arc(this.center.x, this.center.y, this.r, angle
				- this.startAngle, angle - this.endAngle,
				this.counterClockwise);
		context.stroke();
	}
	if (this.fill == true) {
		if(this.segment){
			context
			.arc(this.center.x, this.center.y, this.r, angle
					- this.startAngle, angle - this.endAngle,
					this.counterClockwise);
		}else{

				context
				.arc(this.center.x, this.center.y, this.r, angle
						- this.startAngle, angle - this.endAngle,
						this.counterClockwise);
				context.lineTo(this.center.x, this.center.y)

		}
		context.fill();
	}
	context.restore();
};