Szukaj…
Szybkie rysowanie wielu przetłumaczonych, skalowanych i obracanych obrazów
Istnieje wiele sytuacji, w których chcesz narysować obraz, który jest obracany, skalowany i tłumaczony. Obrót powinien nastąpić wokół środka obrazu. Jest to najszybszy sposób na zrobienie tego na kanwie 2D. Funkcje te dobrze nadają się do gier 2D, w których oczekuje się, że co 60 sekund pojawi się kilkaset nawet do ponad 1000 obrazów. (w zależności od sprzętu)
// assumes that the canvas context is in ctx and in scope
function drawImageRST(image, x, y, scale, rotation){
ctx.setTransform(scale, 0, 0, scale, x, y); // set the scale and translation
ctx.rotate(rotation); // add the rotation
ctx.drawImage(image, -image.width / 2, -image.height / 2); // draw the image offset by half its width and height
}
Wariant może również zawierać wartość alfa, która jest przydatna w układach cząstek.
function drawImageRST_Alpha(image, x, y, scale, rotation, alpha){
ctx.setTransform(scale, 0, 0, scale, x, y); // set the scale and translation
ctx.rotate(rotation); // add the rotation
ctx.globalAlpha = alpha;
ctx.drawImage(image, -image.width / 2, -image.height / 2); // draw the image offset by half its width and height
}
Należy zauważyć, że obie funkcje pozostawiają kontekst płótna w stanie losowym. Chociaż funkcje nie będą miały wpływu na inne renderowanie mojego życia. Po zakończeniu renderowania obrazów może być konieczne przywrócenie domyślnej transformacji
ctx.setTransform(1, 0, 0, 1, 0, 0); // set the context transform back to the default
Jeśli użyjesz wersji alfa (drugi przykład), a następnie wersji standardowej, musisz upewnić się, że przywrócono globalny stan alfa
ctx.globalAlpha = 1;
Przykład użycia powyższych funkcji do renderowania niektórych cząstek i kilku obrazów
// assume particles to contain an array of particles
for(var i = 0; i < particles.length; i++){
var p = particles[i];
drawImageRST_Alpha(p.image, p.x, p.y, p.scale, p.rot, p.alpha);
// no need to rest the alpha in the loop
}
// you need to reset the alpha as it can be any value
ctx.globalAlpha = 1;
drawImageRST(myImage, 100, 100, 1, 0.5); // draw an image at 100,100
// no need to reset the transform
drawImageRST(myImage, 200, 200, 1, -0.5); // draw an image at 200,200
ctx.setTransform(1,0,0,1,0,0); // reset the transform
Obróć obraz lub ścieżkę wokół jego punktu środkowego
Kroki # 1-5 poniżej pozwalają na przesunięcie dowolnego obrazu lub ścieżki w dowolne miejsce na płótnie i obrócenie pod dowolnym kątem bez zmiany pierwotnych współrzędnych punktu obrazu / ścieżki.
Przesuń początek płótna [0,0] do punktu środkowego kształtu
context.translate( shapeCenterX, shapeCenterY );Obróć płótno o żądany kąt (w radianach)
context.rotate( radianAngle );Przenieś początek obszaru roboczego z powrotem do lewego górnego rogu
context.translate( -shapeCenterX, -shapeCenterY );Narysuj obraz lub kształt ścieżki, używając jego oryginalnych współrzędnych.
context.fillRect( shapeX, shapeY, shapeWidth, shapeHeight );Zawsze sprzątaj! Ustaw stan transformacji z powrotem tam, gdzie był przed # 1
Krok # 5, Opcja # 1: Cofnij każdą transformację w odwrotnej kolejności
// undo #3 context.translate( shapeCenterX, shapeCenterY ); // undo #2 context.rotate( -radianAngle ); // undo #1 context.translate( -shapeCenterX, shapeCenterY );Krok # 5, Opcja # 2: Jeśli płótno było w stanie nietransformowanym (ustawienie domyślne) przed rozpoczęciem kroku # 1, możesz cofnąć efekty kroków # 1-3, resetując wszystkie transformacje do stanu domyślnego
// set transformation to the default state (==no transformation applied) context.setTransform(1,0,0,1,0,0)
Przykładowa wersja kodu:
// canvas references & canvas styling
var canvas=document.createElement("canvas");
canvas.style.border='1px solid red';
document.body.appendChild(canvas);
canvas.width=378;
canvas.height=256;
var ctx=canvas.getContext("2d");
ctx.fillStyle='green';
ctx.globalAlpha=0.35;
// define a rectangle to rotate
var rect={ x:100, y:100, width:175, height:50 };
// draw the rectangle unrotated
ctx.fillRect( rect.x, rect.y, rect.width, rect.height );
// draw the rectangle rotated by 45 degrees (==PI/4 radians)
ctx.translate( rect.x+rect.width/2, rect.y+rect.height/2 );
ctx.rotate( Math.PI/4 );
ctx.translate( -rect.x-rect.width/2, -rect.y-rect.height/2 );
ctx.fillRect( rect.x, rect.y, rect.width, rect.height );
Wprowadzenie do transformacji
Transformacje zmieniają pozycję początkową danego punktu poprzez przesuwanie, obracanie i skalowanie tego punktu.
- Tłumaczenie: Przesuwa punkt o
distanceXidistanceY - Obrót: Obraca punkt o
radian anglewokół jego punktu obrotu. Domyślnym punktem obrotu w kanwie HTML jest lewy górny początek [x = 0, y = 0] płótna. Ale możesz zmienić położenie punktu obrotu za pomocą tłumaczeń. - Skalowanie: Skaluje pozycję punktu za pomocą
scalingFactorXiscalingFactorYod jego punktu skalowania. Domyślnym punktem skalowania w kanwie HTML jest lewy górny początek [x = 0, y = 0] płótna. Ale możesz zmienić położenie punktu skalowania za pomocą tłumaczeń.
Możesz także wykonywać mniej typowe transformacje, takie jak ścinanie (pochylanie), bezpośrednio ustawiając macierz transformacji obszaru roboczego za pomocą context.transform .
Przetłumacz (== przenieś) punkt za pomocą context.translate(75,25) Przetłumacz context.translate(75,25)
Obróć punkt za pomocą context.rotate(Math.PI/8) Obrót context.rotate(Math.PI/8)
Skaluj punkt za pomocą context.scale(2,2) Skaluj context.scale(2,2)
Płótno faktycznie dokonuje transformacji, zmieniając cały układ współrzędnych płótna.
-
context.translateprzeniesie początek płótna [0,0] z lewego górnego rogu do nowej lokalizacji. -
context.rotateobróci cały układ współrzędnych obszaru roboczego wokół początku. -
context.scaleprzeskaluje cały układ współrzędnych obszaru roboczego wokół początku. Pomyśl o tym jako o zwiększeniu rozmiaru każdego x, y na płótnie:every x*=scaleXievery y*=scaleY.
Przekształcenia płótna są trwałe. Wszystkie nowe rysunki będą przekształcane do momentu zresetowania transformacji obszaru roboczego do stanu domyślnego (== całkowicie nietransformowany). Możesz przywrócić ustawienia domyślne za pomocą:
// reset context transformations to the default (untransformed) state
context.setTransform(1,0,0,1,0,0);
Macierz transformacji do śledzenia przetłumaczonych, obróconych i skalowanych kształtów
Płótno pozwala na context.translate , context.rotate i context.scale w celu narysowania kształtu w wymaganej pozycji i rozmiarze.
Sam obszar roboczy wykorzystuje macierz transformacji do skutecznego śledzenia transformacji.
- Możesz zmienić macierz Canvas za pomocą
context.transform - Możesz zmienić macierz Canvas za pomocą indywidualnych poleceń
translate, rotate & scale - Możesz całkowicie nadpisać macierz Canvas za pomocą
context.setTransform, - Ale nie można odczytać wewnętrznej macierzy transformacji Canvas - jest ona tylko do zapisu.
Dlaczego warto korzystać z macierzy transformacji?
Macierz transformacji pozwala agregować wiele pojedynczych tłumaczeń, rotacji i skalowań w jedną, łatwą do ponownego zastosowania macierz.
Podczas złożonych animacji możesz zastosować dziesiątki (lub setki) transformacji do kształtu. Korzystając z macierzy transformacji, możesz (prawie) natychmiast ponownie zastosować te dziesiątki transformacji za pomocą jednego wiersza kodu.
Niektóre przykładowe zastosowania:
Sprawdź, czy mysz ma kształt, który został przetłumaczony, obrócony i przeskalowany
Istnieje wbudowany
context.isPointInPathktóry sprawdza, czy punkt (np. Mysz) znajduje się w kształcie ścieżki, ale ten wbudowany test jest bardzo powolny w porównaniu do testowania przy użyciu macierzy.Skuteczne testowanie, czy mysz znajduje się w kształcie, obejmuje przyjęcie pozycji myszy zgłoszonej przez przeglądarkę i przekształcenie jej w taki sam sposób, jak kształt został przekształcony. Następnie możesz zastosować test uderzenia, jakby kształt nie został przekształcony.
Przerysuj kształt, który został szeroko przetłumaczony, obrócony i skalowany.
Zamiast ponownie stosować poszczególne transformacje z wieloma
.translate, .rotate, .scale, możesz zastosować wszystkie zagregowane transformacje w jednym wierszu kodu.Kształty testów zderzeniowych, które zostały przetłumaczone, obrócone i skalowane
Możesz użyć geometrii i trygonometrii, aby obliczyć punkty, które tworzą przekształcone kształty, ale szybsze jest użycie macierzy transformacji do obliczenia tych punktów.
„Klasa” macierzy transformacji
Ten kod odzwierciedla natywne polecenia transformacji context.translate , context.rotate , context.scale . W przeciwieństwie do macierzystej macierzy płótna, ta matryca jest czytelna i wielokrotnego użytku.
Metody:
translate,rotate,scalelustro poleceń transformacji kontekstu i umożliwia wprowadzanie transformacji do matrycy. Matryca skutecznie przechowuje zagregowane przekształcenia.setContextTransformpobiera kontekst i ustawia macierz tego kontekstu na równą tej macierzy transformacji. To skutecznie ponownie stosuje wszystkie transformacje zapisane w tej macierzy do kontekstu.resetContextTransformresetuje transformację kontekstu do stanu domyślnego (== nietransformowany).getTransformedPointpobiera nietransformowany punkt współrzędnych i przekształca go w punkt przekształcony.getScreenPointpobiera przekształcony punkt współrzędnych i przekształca go w punkt nietransformowany.getMatrixzwraca zagregowane transformacje w postaci macierzy.
Kod:
var TransformationMatrix=( function(){
// private
var self;
var m=[1,0,0,1,0,0];
var reset=function(){ var m=[1,0,0,1,0,0]; }
var multiply=function(mat){
var m0=m[0]*mat[0]+m[2]*mat[1];
var m1=m[1]*mat[0]+m[3]*mat[1];
var m2=m[0]*mat[2]+m[2]*mat[3];
var m3=m[1]*mat[2]+m[3]*mat[3];
var m4=m[0]*mat[4]+m[2]*mat[5]+m[4];
var m5=m[1]*mat[4]+m[3]*mat[5]+m[5];
m=[m0,m1,m2,m3,m4,m5];
}
var screenPoint=function(transformedX,transformedY){
// invert
var d =1/(m[0]*m[3]-m[1]*m[2]);
im=[ m[3]*d, -m[1]*d, -m[2]*d, m[0]*d, d*(m[2]*m[5]-m[3]*m[4]), d*(m[1]*m[4]-m[0]*m[5]) ];
// point
return({
x:transformedX*im[0]+transformedY*im[2]+im[4],
y:transformedX*im[1]+transformedY*im[3]+im[5]
});
}
var transformedPoint=function(screenX,screenY){
return({
x:screenX*m[0] + screenY*m[2] + m[4],
y:screenX*m[1] + screenY*m[3] + m[5]
});
}
// public
function TransformationMatrix(){
self=this;
}
// shared methods
TransformationMatrix.prototype.translate=function(x,y){
var mat=[ 1, 0, 0, 1, x, y ];
multiply(mat);
};
TransformationMatrix.prototype.rotate=function(rAngle){
var c = Math.cos(rAngle);
var s = Math.sin(rAngle);
var mat=[ c, s, -s, c, 0, 0 ];
multiply(mat);
};
TransformationMatrix.prototype.scale=function(x,y){
var mat=[ x, 0, 0, y, 0, 0 ];
multiply(mat);
};
TransformationMatrix.prototype.skew=function(radianX,radianY){
var mat=[ 1, Math.tan(radianY), Math.tan(radianX), 1, 0, 0 ];
multiply(mat);
};
TransformationMatrix.prototype.reset=function(){
reset();
}
TransformationMatrix.prototype.setContextTransform=function(ctx){
ctx.setTransform(m[0],m[1],m[2],m[3],m[4],m[5]);
}
TransformationMatrix.prototype.resetContextTransform=function(ctx){
ctx.setTransform(1,0,0,1,0,0);
}
TransformationMatrix.prototype.getTransformedPoint=function(screenX,screenY){
return(transformedPoint(screenX,screenY));
}
TransformationMatrix.prototype.getScreenPoint=function(transformedX,transformedY){
return(screenPoint(transformedX,transformedY));
}
TransformationMatrix.prototype.getMatrix=function(){
var clone=[m[0],m[1],m[2],m[3],m[4],m[5]];
return(clone);
}
// return public
return(TransformationMatrix);
})();
Próbny:
Ta wersja demonstracyjna używa powyższej „klasy” macierzy transformacji, aby:
Śledź (== zapisz) macierz transformacji prostokąta.
Przerysuj przekształcony prostokąt bez użycia poleceń transformacji kontekstu.
Sprawdź, czy mysz kliknęła wewnątrz przekształconego prostokąta.
Kod:
<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
// Transformation Matrix "Class"
var TransformationMatrix=( function(){
// private
var self;
var m=[1,0,0,1,0,0];
var reset=function(){ var m=[1,0,0,1,0,0]; }
var multiply=function(mat){
var m0=m[0]*mat[0]+m[2]*mat[1];
var m1=m[1]*mat[0]+m[3]*mat[1];
var m2=m[0]*mat[2]+m[2]*mat[3];
var m3=m[1]*mat[2]+m[3]*mat[3];
var m4=m[0]*mat[4]+m[2]*mat[5]+m[4];
var m5=m[1]*mat[4]+m[3]*mat[5]+m[5];
m=[m0,m1,m2,m3,m4,m5];
}
var screenPoint=function(transformedX,transformedY){
// invert
var d =1/(m[0]*m[3]-m[1]*m[2]);
im=[ m[3]*d, -m[1]*d, -m[2]*d, m[0]*d, d*(m[2]*m[5]-m[3]*m[4]), d*(m[1]*m[4]-m[0]*m[5]) ];
// point
return({
x:transformedX*im[0]+transformedY*im[2]+im[4],
y:transformedX*im[1]+transformedY*im[3]+im[5]
});
}
var transformedPoint=function(screenX,screenY){
return({
x:screenX*m[0] + screenY*m[2] + m[4],
y:screenX*m[1] + screenY*m[3] + m[5]
});
}
// public
function TransformationMatrix(){
self=this;
}
// shared methods
TransformationMatrix.prototype.translate=function(x,y){
var mat=[ 1, 0, 0, 1, x, y ];
multiply(mat);
};
TransformationMatrix.prototype.rotate=function(rAngle){
var c = Math.cos(rAngle);
var s = Math.sin(rAngle);
var mat=[ c, s, -s, c, 0, 0 ];
multiply(mat);
};
TransformationMatrix.prototype.scale=function(x,y){
var mat=[ x, 0, 0, y, 0, 0 ];
multiply(mat);
};
TransformationMatrix.prototype.skew=function(radianX,radianY){
var mat=[ 1, Math.tan(radianY), Math.tan(radianX), 1, 0, 0 ];
multiply(mat);
};
TransformationMatrix.prototype.reset=function(){
reset();
}
TransformationMatrix.prototype.setContextTransform=function(ctx){
ctx.setTransform(m[0],m[1],m[2],m[3],m[4],m[5]);
}
TransformationMatrix.prototype.resetContextTransform=function(ctx){
ctx.setTransform(1,0,0,1,0,0);
}
TransformationMatrix.prototype.getTransformedPoint=function(screenX,screenY){
return(transformedPoint(screenX,screenY));
}
TransformationMatrix.prototype.getScreenPoint=function(transformedX,transformedY){
return(screenPoint(transformedX,transformedY));
}
TransformationMatrix.prototype.getMatrix=function(){
var clone=[m[0],m[1],m[2],m[3],m[4],m[5]];
return(clone);
}
// return public
return(TransformationMatrix);
})();
// DEMO starts here
// create a rect and add a transformation matrix
// to track it's translations, rotations & scalings
var rect={x:30,y:30,w:50,h:35,matrix:new TransformationMatrix()};
// draw the untransformed rect in black
ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
// Demo: label
ctx.font='11px arial';
ctx.fillText('Untransformed Rect',rect.x,rect.y-10);
// transform the canvas & draw the transformed rect in red
ctx.translate(100,0);
ctx.scale(2,2);
ctx.rotate(Math.PI/12);
// draw the transformed rect
ctx.strokeStyle='red';
ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
ctx.font='6px arial';
// Demo: label
ctx.fillText('Same Rect: Translated, rotated & scaled',rect.x,rect.y-6);
// reset the context to untransformed state
ctx.setTransform(1,0,0,1,0,0);
// record the transformations in the matrix
var m=rect.matrix;
m.translate(100,0);
m.scale(2,2);
m.rotate(Math.PI/12);
// use the rect's saved transformation matrix to reposition,
// resize & redraw the rect
ctx.strokeStyle='blue';
drawTransformedRect(rect);
// Demo: instructions
ctx.font='14px arial';
ctx.fillText('Demo: click inside the blue rect',30,200);
// redraw a rect based on it's saved transformation matrix
function drawTransformedRect(r){
// set the context transformation matrix using the rect's saved matrix
m.setContextTransform(ctx);
// draw the rect (no position or size changes needed!)
ctx.strokeRect( r.x, r.y, r.w, r.h );
// reset the context transformation to default (==untransformed);
m.resetContextTransform(ctx);
}
// is the point in the transformed rectangle?
function isPointInTransformedRect(r,transformedX,transformedY){
var p=r.matrix.getScreenPoint(transformedX,transformedY);
var x=p.x;
var y=p.y;
return(x>r.x && x<r.x+r.w && y>r.y && y<r.y+r.h);
}
// listen for mousedown events
canvas.onmousedown=handleMouseDown;
function handleMouseDown(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
// get mouse position
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// is the mouse inside the transformed rect?
if(isPointInTransformedRect(rect,mouseX,mouseY)){
alert('You clicked in the transformed Rect');
}
}
// Demo: redraw transformed rect without using
// context transformation commands
function drawTransformedRect(r,color){
var m=r.matrix;
var tl=m.getTransformedPoint(r.x,r.y);
var tr=m.getTransformedPoint(r.x+r.w,r.y);
var br=m.getTransformedPoint(r.x+r.w,r.y+r.h);
var bl=m.getTransformedPoint(r.x,r.y+r.h);
ctx.beginPath();
ctx.moveTo(tl.x,tl.y);
ctx.lineTo(tr.x,tr.y);
ctx.lineTo(br.x,br.y);
ctx.lineTo(bl.x,bl.y);
ctx.closePath();
ctx.strokeStyle=color;
ctx.stroke();
}
}); // end window.onload
</script>
</head>
<body>
<canvas id="canvas" width=512 height=250></canvas>
</body>
</html>