0

Adapté un ejemplo de canvas de javascript a typescript en angular, donde creo los objetos utilizando la clase Circle en la función iniciar() tal como se muestra líneas abajo:

iniciar(){
    ...
    let my_circle= new Circle(random_x,random_y,50,"black","hola",5,this.window_height!,this.window_width!,this.context,this.hit_counter!);
    let my_circle2= new Circle(random_x2,random_y2,50,"black","hola",5,this.window_height!,this.window_width!,this.context,this.hit_counter!);
    
    my_circle.draw(this.context);
    my_circle2.draw(this.context);
    ...
}

Pero cuando se genera el desplazamiento de estos círculos en el canvas, en la parte de actualización del objeto solo me muestra un solo objeto círculo y no los dos que se habían creado.

let updateCircle=function(){
      requestAnimationFrame(updateCircle);
      my_circle.update();
      my_circle2.update();
}

Adjunto código completo.

export class CirculosComponent implements OnInit {
  canvas:any;
  context:any;
  window_height?:number | undefined;
  window_width?:number | undefined;
  public hit_counter:number | undefined;
  constructor() { }

  ngOnInit(): void {
    this.canvas=document.getElementById("canvas");
    this.context= this.canvas.getContext("2d");

    this.window_height=window.innerHeight;
    this.window_width=window.innerWidth;

    this.canvas.width=this.window_width;
    this.canvas.height=this.window_height;
    this.canvas.style.background="#ff0";

    this.hit_counter=0;
    this.iniciar();
  }
  iniciar(){
    let random_x= Math.random()*this.window_width!;
    let random_y= Math.random()*this.window_height!;

    let random_x2= Math.random()*this.window_width!;
    let random_y2= Math.random()*this.window_height!;

    let my_circle= new Circle(random_x,random_y,50,"black","hola",5,this.window_height!,this.window_width!,this.context,this.hit_counter!);
    let my_circle2= new Circle(random_x2,random_y2,50,"black","hola",5,this.window_height!,this.window_width!,this.context,this.hit_counter!);

    my_circle.draw(this.context);
    my_circle2.draw(this.context);

    let updateCircle=function(){
      requestAnimationFrame(updateCircle);
      my_circle.update();
      my_circle2.update();
    }
    
    updateCircle();

  }

}

class Circle{
  xpos:number;
  ypos:number;
  radius:number;
  color:number;
  text:string;
  speed:number;
  dx:number;
  dy:number;
  window_width:number;
  window_height:number ;
  context:any;
  hit_counter:number;
  
  constructor(xpos:number,ypos:number,radius:number,color:any,
            text:string,speed:number,window_height:number,window_width:number,
            context:any, hit_counter:number){
      this.xpos=xpos;
      this.ypos=ypos;
      this.radius=radius;
      this.color=color;
      this.text=text;
      this.speed=speed;

      this.window_height=window_height;
      this.window_width=window_width;

      this.context=context;
      this.hit_counter=hit_counter;

      this.dx=1*this.speed;
      this.dy=1*this.speed;
  }

  draw(context:any){
      context.beginPath();

      context.strokeStyle=this.color;
      context.textAlign="center";
      context.textBaseline="middle";
      context.font="20px Arial";
      context.fillText(this.text,this.xpos,this.ypos);
      //context.strokeText(this.text,this.xpos,this.ypos);

      context.lineWidth=5;
      context.arc(this.xpos,this.ypos,this.radius,0,Math.PI*2,false);
      context.stroke();
      context.closePath();
  }

  update(){
      this.text=String(this.hit_counter);
      this.context.clearRect(0,0,this.window_width,this.window_height);

      this.draw(this.context);

      if((this.xpos+this.radius)>this.window_width!){
          this.dx=-this.dx;
          this.hit_counter++;
      }

      if((this.xpos-this.radius)<0){
          this.dx=-this.dx;
          this.hit_counter++;
      }
      if((this.ypos-this.radius)<0){
          this.dy=-this.dy;
          this.hit_counter++;
      }
      if((this.ypos+this.radius)>this.window_height!){
          this.dy=-this.dy;
          this.hit_counter++;
      }
      this.xpos+=this.dx;
      this.ypos+=this.dy;
  }
}
2
  • No será que están sobrepuestos??? porque ambos círculos los inicializas con los mismos valores. Prueba crear un nuevo par de randoms para el circulo 2
    – Yussef
    el 23 dic. 2022 a las 16:20
  • Gracias el comentario, si bien es cierto estaba poniendo las mimas coordenadas,las acabo de cambiar pero aún así me muestra solo un circulo. saludos
    – Cralitros
    el 23 dic. 2022 a las 16:33

1 respuesta 1

0

Dando respuesta a mi pregunta, sucede que estoy realizando la actualización del objeto internamente, lo cual hace que todo el canvas se limpie completamente, así que eliminé de la función update() del objeto Circle la línea a continuación:

this.context.clearRect(0,0,this.window_width,this.window_height);

y realicé el limpiado del canvas cada vez que los parámetros de mis objetos Circle se iban a actualizar en una función separada.

 updateCircle(){
   window.requestAnimationFrame(() => this.updateCircle());
   this.context.clearRect(0,0,this.window_width,this.window_height);

   this.my_circle.update();
   this.my_circle2.update();
 }

Adjunto código completo:

export class CirculosComponent implements OnInit {
  canvas:any;
  public context:any;
  window_height?:number | undefined;
  window_width?:number | undefined;
  public hit_counter:number | undefined;
  my_circle:Circle| any;
  my_circle2:Circle| any;
  constructor() { }

  ngOnInit(): void {
    this.canvas=document.getElementById("canvas");
    this.context= this.canvas.getContext("2d");

    this.window_height=window.innerHeight;
    this.window_width=window.innerWidth;

    this.canvas.width=this.window_width;
    this.canvas.height=this.window_height;
    this.canvas.style.background="#ff0";

    this.hit_counter=0;
    this.iniciar();
  }
  iniciar(){
    let random_x= Math.random()*this.window_width!;
    let random_y= Math.random()*this.window_height!;

    let random_x2= Math.random()*this.window_width!;
    let random_y2= Math.random()*this.window_height!;

    this.my_circle= new Circle(random_x,random_y,50,"black","hola",5,this.window_height!,this.window_width!,this.context,this.hit_counter!);
    this.my_circle2= new Circle(random_x2,random_y2,50,"red","hola",5,this.window_height!,this.window_width!,this.context,this.hit_counter!);


    this.my_circle.draw(this.context);
    this.my_circle2.draw(this.context);
    
    window.requestAnimationFrame(() => this.updateCircle());
  }
  updateCircle(){
   window.requestAnimationFrame(() => this.updateCircle());
    this.context.clearRect(0,0,this.window_width,this.window_height);

    this.my_circle.update();
    this.my_circle2.update();
  }

}


class Circle{
  xpos:number;
  ypos:number;
  radius:number;
  color:number;
  text:string;
  speed:number;
  dx:number;
  dy:number;
  window_width:number;
  window_height:number ;
  context:any;
  hit_counter:number;
  
  constructor(xpos:number,ypos:number,radius:number,color:any,
            text:string,speed:number,window_height:number,window_width:number,
            context:any, hit_counter:number){
      this.xpos=xpos;
      this.ypos=ypos;
      this.radius=radius;
      this.color=color;
      this.text=text;
      this.speed=speed;

      this.window_height=window_height;
      this.window_width=window_width;

      this.context=context;
      this.hit_counter=hit_counter;

      this.dx=1*this.speed;
      this.dy=1*this.speed;
  }

  draw(context:any){
      context.beginPath();

      context.strokeStyle=this.color;
      context.textAlign="center";
      context.textBaseline="middle";
      context.font="20px Arial";
      context.fillText(this.text,this.xpos,this.ypos);
      //context.strokeText(this.text,this.xpos,this.ypos);

      context.lineWidth=5;
      context.arc(this.xpos,this.ypos,this.radius,0,Math.PI*2,false);
      context.stroke();
      context.closePath();
  }

  update(){
      this.text=String(this.hit_counter);
      
      this.draw(this.context);
      if((this.xpos+this.radius)>this.window_width!){
          this.dx=-this.dx;
          this.hit_counter++;
      }

      if((this.xpos-this.radius)<0){
          this.dx=-this.dx;
          this.hit_counter++;
      }

      if((this.ypos-this.radius)<0){
          this.dy=-this.dy;
          this.hit_counter++;
      }

      if((this.ypos+this.radius)>this.window_height!){
          this.dy=-this.dy;
          this.hit_counter++;
      }

      this.xpos+=this.dx;
      this.ypos+=this.dy;
  }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.