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();
};
            

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *