vincent/football-drawing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

amelioration de l'animation

Browse Source
This commit is contained in:
BENOIT Vincent
2024-10-08 15:24:45 +00:00
parent 17874f7430
commit 6292b640bd
2 changed files with 131 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/football-field/football-field.component.html
View File

@@ -39,10 +39,9 @@
</div> -->
<button (click)="setInteractionMode('move')">Déplacer Élément</button>
<button (click)="setInteractionMode('animate')">Dessiner Vecteur</button>
<button (click)="setVectorType('linear')">Vecteur Linéaire</button>
<button (click)="setVectorType('curved')">Vecteur Courbé</button>
<button (click)="toggleLoop()">Activer/Désactiver Boucle d'Animation</button>
</div>
<button (click)="toggleLoop()">Boucle d'Animation</button>
<button (click)="replayTimeline()">Play again</button>
</div>
<!-- <canvas #canvas width="800" height="600"
(mousedown)="startDrawing($event)"
@@ -61,6 +60,16 @@
(mousemove)="onCanvasMouseMove($event)"
(mouseup)="onCanvasMouseUp($event)">
</canvas>
<div class="timeline">
<h3>Timeline du joueur sélectionné</h3>
<div *ngIf="selectedPlayer">
<ul>
<li *ngFor="let step of selectedPlayer.timeline; let i = index">
Étape {{ i + 1 }} : Départ ({{ step.startX }}, {{ step.startY }}), Arrivée ({{ step.endX }}, {{ step.endY }}), Durée : {{ step.duration }}
</li>
</ul>
</div>
</div>
<div class="debug">
<p>Debug Info: {{ debugInfo }}</p>
</div>

227
src/app/football-field/football-field.component.ts
View File

@@ -2,6 +2,14 @@ import { Component, ViewChild, ElementRef, HostListener } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
interface TimelineStep {
startX: number;
startY: number;
endX: number;
endY: number;
duration: number; // Temps d'animation (en secondes ou ticks)
}
interface Circle {
x: number;
y: number;
@@ -18,6 +26,8 @@ interface Circle {
progress: number; // Paramètre de progression sur la courbe
startX: number;
startY: number;
timeline: TimelineStep[]; // Nouvelle propriété pour stocker les étapes d'aniion
currentStepIndex: number; // Suivre l'étape actuelle dans la timeline
}
interface Rectangle {
@@ -41,39 +51,39 @@ interface Rectangle {
export class FootballFieldComponent {
@ViewChild('canvas', { static: true }) canvas!: ElementRef<HTMLCanvasElement>;
private ctx!: CanvasRenderingContext2D;
private drawing = false;
private lastX = 0;
private lastY = 0;
//private drawing = false;
//private lastX = 0;
//private lastY = 0;
private startX = 0;
private startY = 0;
private draggingPlayer: Circle | null = null;
private draggingBall: Circle | null = null;
private draggingPlot: Circle | null = null;
private draggingPiquet: Rectangle | null = null;
//private draggingPlot: Circle | null = null;
//private draggingPiquet: Rectangle | null = null;
private draggingElement: any = null;
private attachedPlayer: Circle | null = null;
private magnetRadius: number = 35; // Distance à laquelle le ballon s'attache au joueur
private attachedToPlayer: boolean = false; // indique si le ballon est attache a un joueur
//private attachedToPlayer: boolean = false; // indique si le ballon est attache a un joueur
private offsetX: number = 0;
private offsetY: number = 0;
private test: boolean = false;
private prevAngle: number = 0;
private isDrawingVector: boolean = false;
//private isDrawingVector: boolean = false;
private endX: number = 0;
private endY: number = 0;
private isAnimating: boolean = false;
private animationSpeed: number = 0.01;
public colors: string[] = ['#ff0000', '#00ff00',
'#0000ff', '#ffff00',
'#ff00ff', '#00ffff',
'#000000', '#808080',
'#ffa500', '#8a2be2'];
public selectedColor: string = this.colors[0]; // Couleur sélectionné par défaut (rouge)
//public colors: string[] = ['#ff0000', '#00ff00',
// '#0000ff', '#ffff00',
// '#ff00ff', '#00ffff',
// '#000000', '#808080',
// '#ffa500', '#8a2be2'];
//public selectedColor: string = this.colors[0]; // Couleur sélectionné par défaut (rouge)
// Options de forme
public selectedShape: string = 'none'; // Par défaut, aucune forme
public playerCount: number = 4; // Nombre de joueurs par défaut
//public selectedShape: string = 'none'; // Par défaut, aucune forme
public playerCount: number = 8; // Nombre de joueurs par défaut
public plotCount: number = 2; // Nombre de plots par défaut
public piquetCount: number = 2; // Nombre de plots par défaut
public ballCount: number = 1; // Nombre de ballons par defaut
@@ -92,10 +102,12 @@ export class FootballFieldComponent {
isMoving:false,
progress: 0,
startX: 150,
startY: 150 };
startY: 150,
timeline: null,
currentStepIndex: 0 };
public selectedPlayer: Circle | null = null;
public isDrawingLine: boolean = false;
public loopAnimation: boolean = true; // Pour répéter l'animation
public loopAnimation: boolean = false; // Pour répéter l'animation
public debugInfo: string = ""; // Variable pour les informations de debogage
public vectorType: 'linear' | 'curved' = 'linear'; // Type de vecteur sélectionné
public interactionMode: 'move' | 'animate' = 'move'; // Mode d'interaction sélectionné
@@ -184,78 +196,65 @@ export class FootballFieldComponent {
// Dessiner la ligne si en mode dessin
if (this.isDrawingLine && this.selectedPlayer) {
console.log("[Draw Field] drawing vector");
//console.log("[Draw Field] drawing vector");
ctx.beginPath();
ctx.moveTo(this.startX, this.startY);
ctx.lineTo(this.endX, this.endY);
ctx.strokeStyle = '#FF0000';
ctx.lineWidth = 2;
ctx.lineWidth = 4;
ctx.stroke();
}
}
private animate() {
//this.updatePositions();
if (this.isAnimating && this.selectedPlayer) {
this.updatePlayerPosition(this.selectedPlayer);
//if (this.isAnimating && this.selectedPlayer) {
// this.updatePlayerPosition(this.selectedPlayer);
//}
if (this.isAnimating) {
// Effacer le canvas pour redessiner
this.ctx.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
// Mettre à jour la position de tous les joueurs en suivant leur timeline
this.players.forEach(player => {
if (player.timeline.length > 0) {
this.updatePlayerPosition(player);
}
});
}
this.drawField();
requestAnimationFrame(() => this.animate());
}
private updatePlayerPosition(player: Circle) {
if (player.timeline.length === 0 || player.currentStepIndex >= player.timeline.length) {
return; // Pas d'animation si la timeline est vide
}
const step = player.timeline[player.currentStepIndex];
// Avancer le joueur sur la ligne avec un LERP (Linear Interpolation)
player.progress += this.animationSpeed;
if (player.progress >= 1) {
if (this.loopAnimation) {
player.progress = 0; // Répéter l'animation
player.x = player.startX;
player.y = player.startY;
} else {
this.isAnimating = false;
this.selectedPlayer = null;
player.progress = 0; // Réinitialiser la progression
player.x = step.endX;
player.y = step.endY;
player.currentStepIndex++; // Passer à l'étape suivante
// Si on atteint la fin de la timeline, recommencer ou arrêter
if (player.currentStepIndex >= player.timeline.length) {
if (this.loopAnimation) {
player.currentStepIndex = 0; // Boucle l'animation
} else {
this.isAnimating = false;
}
}
} else {
const t = player.progress;
player.x = (1 - t) * player.startX + t * this.endX;
player.y = (1 - t) * player.startY + t * this.endY;
player.x = (1 - t) * step.startX + t * step.endX;
player.y = (1 - t) * step.startY + t * step.endY;
}
}
// private updatePositions() {
// // Mettre à jour les positions des joueurs
// this.players.forEach(player => {
// player.x += player.vx;
// player.y += player.vy;
//
// // Collision avec les bords
// if (player.x - player.radius < 0 || player.x + player.radius > this.canvas.nativeElement.width) {
// player.vx = -player.vx;
// }
// if (player.y - player.radius < 0 || player.y + player.radius > this.canvas.nativeElement.height) {
// player.vy = -player.vy;
// }
// });
//
// // Si le ballon est attaché à un joueur, le suivre
// if (this.attachedPlayer) {
// this.updateBallPositionOnPlayer();
// } else {
// // Mise à jour de la position du ballon
// this.ball.x += this.ball.vx;
// this.ball.y += this.ball.vy;
//
// // Collision avec les bords pour le ballon
// if (this.ball.x - this.ball.radius < 0 || this.ball.x + this.ball.radius > this.canvas.nativeElement.width) {
// this.ball.vx = -this.ball.vx;
// }
// if (this.ball.y - this.ball.radius < 0 || this.ball.y + this.ball.radius > this.canvas.nativeElement.height) {
// this.ball.vy = -this.ball.vy;
// }
// }
// }
// Mettre à jour debugInfo avec les positions des joueurs et du ballon
private updateDebugInfo() {
const playerPositions = this.players.map((player, index) => `Joueur ${index + 1}: (${player.x.toFixed(1)}, ${player.y.toFixed(1)})`).join(', ');
@@ -281,13 +280,15 @@ export class FootballFieldComponent {
destinationY: null,
isMoving:false,
progress: 0,
startX: 150,
startY: 150 });
startX: 0,
startY: 0,
timeline: [],
currentStepIndex: 0 });
}
this.drawField();
}
// Créer les cerclesrepresentant les plots
// Créer les cercle representant les plots
private createPlots() {
this.plots = [];
const radius = 10; // Rayon des cercles
@@ -304,8 +305,10 @@ export class FootballFieldComponent {
destinationY: null,
isMoving:false,
progress: 0,
startX: 150,
startY: 150 });
startX: 0,
startY: 0,
timeline: null,
currentStepIndex: 0 });
}
this.drawField();
}
@@ -416,41 +419,27 @@ export class FootballFieldComponent {
ctx.fillText(circle.number.toString(), circle.x, circle.y);
}
private drawVectors() {
const ctx = this.ctx;
this.players.forEach(player => {
ctx.beginPath();
ctx.moveTo(player.x, player.y);
ctx.lineTo(player.x + player.vx * 20, player.y + player.vy * 20); // Longueur du vecteur
ctx.strokeStyle = '#FF0000';
ctx.lineWidth = 2;
ctx.stroke();
});
// Dessiner le vecteur de mouvement du ballon
ctx.beginPath();
ctx.moveTo(this.ball.x, this.ball.y);
ctx.lineTo(this.ball.x + this.ball.vx * 20, this.ball.y + this.ball.vy * 20);
ctx.strokeStyle = '#FFA500';
ctx.lineWidth = 2;
ctx.stroke();
}
onCanvasMouseDown(event: MouseEvent) {
const { x, y } = this.getMousePos(event);
if (this.interactionMode === 'animate') {
console.log("[Mouse Down] animate elements");
//this.startDrawingVector(x, y);
this.selectedPlayer = null;
for (const player of this.players) {
if (this.isInsideCircle(player, x, y)) {
// Sélectionner le joueur
this.selectedPlayer = player;
console.log("[Mouse Down|Animate] selecting player :", this.selectedPlayer);
break;
}
}
if (!this.selectedPlayer) {
console.log("[Mouse Down|Animate] select player");
this.selectPlayer(x, y);
} else if (!this.isDrawingLine) {
this.startX = this.selectedPlayer.x;
this.startY = this.selectedPlayer.y;
this.endX = x;
this.endY = y;
this.isDrawingLine = true;
console.log("[Mouse Down|Animate] Draw line - Start:(",
console.log("[Mouse Down|Animate] drawing line - Start:(",
this.startX,",",
this.startY,"), End:(",
this.endX,",",
@@ -466,35 +455,55 @@ export class FootballFieldComponent {
onCanvasMouseMove(event: MouseEvent) {
const { x, y } = this.getMousePos(event);
if (this.interactionMode === 'animate') {
//console.log("[Mouse Move] animate elements");
// Pour déssiner les vecteurs de déplacement des joueurs
this.endX = x;
this.endY = y;
} else if (this.interactionMode === 'move') {
this.drag(x, y);
}
}
onCanvasMouseUp(event: MouseEvent) {
const { x, y } = this.getMousePos(event);
if (this.interactionMode === 'animate') {
console.log("[Mouse Up] Stop animating elements");
//this.finishDrawingVector(x,y);
if (this.isDrawingLine && this.selectedPlayer) {
console.log("[Mouse Up|Animate] Stop drawing vector");
this.endX = x;
this.endY = y;
this.isDrawingLine = false;
// Ajouter l'étape dans la timeline du joueur
console.log("timeline:", this.selectedPlayer.timeline);
this.selectedPlayer.timeline.push({
startX: this.startX,
startY: this.startY,
endX: this.endX,
endY: this.endY,
duration: 100 // Durée d'animation arbitraire, peut être ajustée
});
this.selectedPlayer.currentStepIndex = 0; // Réinitialiser au début de la timeline
this.startAnimation();
}
} else if (this.interactionMode === 'move') {
console.log("[Mouse Up] Stop moving elements");
this.stopDragging();
// Si on déplace un joueur alors que celui-ci a une animation,
// on supprime toute sa timeline
for (const player of this.players) {
if (this.isInsideCircle(player, x, y)) {
// Sélectionner le joueur
this.selectedPlayer = player;
this.selectedPlayer.timeline = [];
break;
}
}
}
}
// Commencer a déplacer un élément du canvas
//startDragging(event: MouseEvent) {
startDragging(x:number, y:number) {
//const { x, y } = this.getMousePos(event);
if (this.isInsideCircle(this.ball, x, y)) {
console.log("inside ball");
this.ball.isDragging = true;
@@ -523,19 +532,10 @@ export class FootballFieldComponent {
this.offsetY = y - this.draggingPlayer.y;
this.test = true;
}
// // Vérifier si le joueur touche le ballon
// if (this.draggingPlayer && this.isInsideCircle(this.ball, this.draggingPlayer.x, this.draggingPlayer.y)) {
// this.attachedToPlayer = true;
// }
}
// Déplacer le cercle sélectionné
//drag(event: MouseEvent) {
// Déplacer l'élément sélectionné sur le canvas
drag(x:number, y:number) {
//const { x, y } = this.getMousePos(event);
if (this.ball.isDragging) {
console.log("dragging ball");
this.ball.x = x - this.offsetX;
@@ -586,7 +586,7 @@ export class FootballFieldComponent {
if (this.draggingPlayer) {
this.draggingPlayer.isDragging = false;
this.draggingPlayer = null;
this.attachedToPlayer = false; // Détacher le ballon après avoi relache le joueur
//this.attachedToPlayer = false; // Détacher le ballon après avoi relache le joueur
}
if (this.draggingElement) {
@@ -864,4 +864,13 @@ export class FootballFieldComponent {
toggleLoop() {
this.loopAnimation = !this.loopAnimation;
}
replayTimeline() {
// Réinitialiser la progression et l'étape actuelle
this.players.forEach(player => {
player.progress = 0;
player.currentStepIndex = 0;
});
this.isAnimating = true; // Redémarrer l'animation
}
}