TypeScript: Classe Figura. Dibuix 2D

Referències

• https://www.typescriptlang.org/docs/handbook/classes.html
• https://emartini.wordpress.com/2008/09/17/poo-clases-abstractas-interfaces-y-herencia-multiple/

Teoria vista a classe:

• TypeScript

Introducció

Typescript és un superconjunt de Javascript. Podem programar amb Programació Orientada a Objectes (classes, herència,...), amb els avantatges que això comporta, i generar (compilar) el codi Javascript compatible. Això és el que farem en aquesta pràctica.

Desenvolupament

El problema de la pràctica tracta de dibuixar figures planes. Les figures 2D (estem pensant en paral·lelograms i cercles) és un cas típic de POO, que desenvoluparem.

La classe Figura és una classe abstracta, que definim en el codi, i que per herència podem definir les classes Paral·lelogram i Cercle.

Al mateix temps, la classe Paral·lelogram també és abstracta, i per herència definim les classes Quadrat, Rectangle, Rombe i Romboide.

-Figura (classe abstracta)
    -parallelograms (classe abstracta)
        -Quadrat, Rectangle, Rombe, romboide
    -Cercle

En la primera part de la pràctica se't proporciona tota la definició de les classes (v1, v2, v3, v4), que discutirem a classe.

En la segona part de la pràctica se't proporciona un primer ús de com podem construir objectes de forma dinàmica i pintar-los per la pantalla (objecte Canvas de HTML5).

Feina per l'alumne

Després de discutir una primera solució a classe, es demana a l'alumne els següents objectius:

• mètode printPunts() i mètode getPunts(): que només estigui associada a la classe Paral·lelogram.
• mètode getCentre(), getRadi(): que només estigui associat a la classe Cercle.
• Implementa dins les classes el color de fons, el color de la línia, el gruix de la línia.

Exercici 1: visualitzar al costat de la figura el perímetre i la superfície

Exercici 2. Hauràs de fer una aplicació que cada 5 segons aparegui una figura aleatòria per pantalla, de dimensions prou grans per ocupar una bona part de la pantalla (i centrat en la pantalla). Has de proporcionar el valor de l'àrea i del perímetre dins de la figura.

Exercici 3. Dibuixa cercles concèntrics amb una gradació de colors.

Solució parcial

• Fitxer:Figura.zip

Solució definitiva

• Fitxer:Figura definitiu.zip

Pintar les figures

Donat una sèrie de punts, podem pintar el poligon definits per aquests punts. És necessari tancar el camí (context.closePath()) i aleshores ja podrem omplir amb un color (context.fillStyle). Per tant, podem pintar totes les figures, no només els quadrats, rectangles i cercles.

printFigura(context, info): void{
       context.beginPath();
       for (let index = 0; index < this.col_punts.length; index++) {
           const element = this.col_punts[index];
           context.lineTo(element.x, element.y)   
       }
       context.closePath();
       context.stroke();
       context.fillStyle=Color.getRdmRGBString();
       context.fill();
       if (info==true) {
           context.font = "12px Arial";
           context.fillText('P=' + this.perimetre.toFixed(1) + ',S=' + this.superficie.toFixed(1), this.punt0.x, this.punt0.y);
       }
   }

NOTA: aquest codi no funciona tal qual (abril 2022, TBD)

Entrega

Entregar al Google Classroom l'evidència de què has realitzat l'exercici en la teva màquina. Quan l'hagis acabat, ensenya'l al professor per certificar el seu bon funcionament.

---

creat per Joan Quintana Compte, abril 2022