Odbicie względem prostej nie przechodzącej przez punkt (0,0)

Przypadek 1

Prosta jest równoległa do osi Y i nie może być przedstawiona równaniem y=mx+b

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

Listing

	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");	
	ctx.beginPath();
	ctx.moveTo(200,10);
	ctx.lineTo(200,240);
	ctx.strokeStyle = "black";
	ctx.stroke();
	var leftX = 220;
	var topY = 20;
	var width = 100;
	var height = 75;
	var cornerRadius = 15;
	drawRectangle(ctx);		
	

Wykonujemy kolejne kroki

dokonujemy translacji o odległość prostej od osi Y

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");
	ctx.save();
	ctx.beginPath();
	ctx.moveTo(200,10);
	ctx.lineTo(200,240);
	ctx.strokeStyle = "black";
	ctx.stroke();
	ctx.restore();
	var leftX = 220;
	var topY = 20;
	var width = 100;
	var height = 75;
	var cornerRadius = 15;
	ctx.translate(-200,0);
	drawRectangle(ctx);		
	
wykonujemy odbicie figury względem osi Y

Figury chwilowo nie widzimy

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");
	ctx.save();
	ctx.beginPath();
	ctx.moveTo(200,10);
	ctx.lineTo(200,240);
	ctx.strokeStyle = "black";
	ctx.stroke();
	ctx.restore()
	var leftX = 220;
	var topY = 20;
	var width = 100;
	var height = 75;
	var cornerRadius = 15;		
	ctx.scale(-1,1);
	ctx.translate(-200,0);		
	drawRectangle(ctx);	
wykonujemy translację powrotną

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

	var cv = document.getElementById("canvas3");
	var ctx = cv.getContext("2d");	
	ctx.save();
	ctx.beginPath();
	ctx.moveTo(200,10);
	ctx.lineTo(200,240);
	ctx.strokeStyle = "black";
	ctx.stroke();
	ctx.restore();
	var leftX = 220;
	var topY = 20;
	var width = 100;
	var height = 75;
	var cornerRadius = 15;
	ctx.translate(200,0);
	ctx.scale(-1,1);
	ctx.translate(-200,0);		
	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 *