Obrót wokół dowolnego punktu

Mamy figurę, którą chcemy obrócić wokół punktu (100,30) o
30°

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

	var cv = document.getElementById("canvas1");
	var ctx = cv.getContext("2d");
	var leftX = 220;
	var topY = 40;
	var width = 75;
	var height = 50;
	var cornerRadius = 15;
	ctx.beginPath();
	ctx.arc(100, 30, 5, 2 * Math.PI, 0, false);
	ctx.strokeStyle = "black";
	ctx.stroke();
	ctx.fillStyle = "green";
	ctx.fill();
	drawRectangle(ctx);	
	

Jeżeli chcemy obrócić figurę względem punktu, który nie jest
(0,0) należy:

wykonać translację do punktu (0,0)

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

	var cv = document.getElementById("canvas2");
	var ctx = cv.getContext("2d");
	var leftX = 220;
	var topY = 40;
	var width = 75;
	var height = 50;
	var cornerRadius = 15;
	ctx.save();
	ctx.beginPath();
	ctx.translate(-100, -30);
	ctx.arc(100, 30, 5, 2 * Math.PI, 0, false);
	ctx.strokeStyle = "black";
	ctx.stroke();
	ctx.fillStyle = "green";
	ctx.fill();
	ctx.restore();
	ctx.translate(-100, -30);
	drawRectangle(ctx);	
	

obrócić figurę o podany kąt

Zwróć uwagę, że w skrypcie transformacje są w odwrotnej
kolejności (ze względu na to, że są to operacje na macierzach):

Listing

ctx.rotate(Math.PI/6);
ctx.translate(-100,-30);

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

var cv = document.getElementById("canvas3");
		var ctx = cv.getContext("2d");
		var leftX = 220;
		var topY = 40;
		var width = 75;
		var height = 50;
		var cornerRadius = 15;
		ctx.save();
		ctx.beginPath();
		ctx.translate(-100, -30);
		ctx.arc(100, 30, 5, 2 * Math.PI, 0, false);
		ctx.strokeStyle = "black";
		ctx.stroke();
		ctx.fillStyle = "green";
		ctx.fill();
		ctx.restore();
		ctx.rotate(Math.PI / 6);
		ctx.translate(-100, -30);
		drawRectangle(ctx);	
	

przesunąć figurę z powrotem (translacja zwrotna)

Zwróć uwagę, że w skrypcie transformacje są w odwrotnej
kolejności (ze względu na to, że są to operacje na macierzach):

	ctx.translate(100,30);
	ctx.rotate(Math.PI/6);
	ctx.translate(-100,-30);

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

	var cv = document.getElementById("canvas4");
	var ctx = cv.getContext("2d");
	var leftX = 220;
	var topY = 40;
	var width = 75;
	var height = 50;
	var cornerRadius = 15;
	ctx.save();
	ctx.beginPath();
	ctx.arc(100, 30, 5, 2 * Math.PI, 0, false);
	ctx.strokeStyle = "black";
	ctx.stroke();
	ctx.fillStyle = "green";
	ctx.fill();
	ctx.restore();
	ctx.translate(100, 30);
	ctx.rotate(Math.PI / 6);
	ctx.translate(-100, -30);
	drawRectangle(ctx);

Metoda drawRectangle pochodzi ze skryptu transform.js.
Wszystkie skrypty są dostępne tutaj.

Dodaj komentarz

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