Skalowanie w miejscu

Mamy figurę, którą chcemy skalować w miejscu o współczynnik 0.5

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;		
	drawRectangle(ctx);	
	

Jeżeli chcemy saklować figurę względem środka ciężkości, należy:

wykonać translację środka ciężkości 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.translate(-(leftX+width/2), -(topY+height/2));
	drawRectangle(ctx);	
	

wykonać żądane skalowanie

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.scale(0.5,0.5);
	ctx.translate(-(leftX+width/2), -(topY+height/2));
	drawRectangle(ctx);	
	

przesunąć figurę z powrotem (translacja zwrotna)

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.translate(leftX+width/2, topY+height/2);
	ctx.scale(0.5, 0.5);
	ctx.translate(-(leftX+width/2), -(topY+height/2));
	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 *