Dokumentation (canvas.quaese.de)
 

Anwendungen - Tangram

Tangram ist ein altes chinesisches Legespiel, das Anfang des 19-ten Jahrhunderts auch in Europa und Amerika Verbreitung fand. Ziel des Spiels ist es, aus den sieben Einzelfiguren ein Quadrat zu legen.

Die Idee, das Spiel in einer Online-Variante zur Verfügung zu stellen, wurde aufgrund einer Nachfrage geboren, die mir im Rahmen dieses <canvas>-Projekts gestellt wurde. Zunächst wurde es derart umgesetzt, dass jeder Figur ein <canvas>-Element spendiert wurde. Nachteilig war die dadurch entstehende rechteckige Grundstruktur und die damit einhergehenden Probleme beim Selektieren von nicht-rechteckigen Elementen.

Nachdem eine Routine implementiert wurde, die es ermöglicht, zu erkennen, ob sich der Mauszeiger über einer Figur befindet, wurde der Programmcode neu geschrieben. Es befinden sich nun alle Polygone innerhalb des <canvas>-Elements und wurden mit den notwendigen Drag-and-Drop- sowie Drehfunktionalitäten ausgestattet.

Beispiel

Die verfügbaren Möglichkeiten, das Spiel zu steuern, finden sich in der nachstehenden Liste.
Dabei gilt:
• Element = Quadrat, Dreieck, Parallelogramm
• Figur = Kombination der zur Verfügung stehenden Elemente

  • Gewünschtes Element durch Anklicken mit Mauszeiger aktiv machen.
  • Element mit gedrückter Maustaste an gewünschte Position ziehen.
  • Das aktive Element kann mit den Cursortasten pixelweise in die entsprechende Richtung bewegt werden.
  • Anklicken eines Elements bei gedrückter STRG-Taste bewirkt eine Drehung um 45°.
  • Drücken der Hilfe-Schaltfläche zeigt die Umrisslinien der Lösung ein. Erneutes Drücken blendet diese wieder aus.
  • Drücken der Weiter-Schaltfläche zeigt die nächste Figur an.
  • Drücken der Start-Schaltfläche startet die Figur erneut.
  • Drücken der Lösung-Schaltfläche zeigt die Lösung der Figur an.
 

Polygon-Kollektion (Tangram-Elemente)

Die Tangram-Elemente (Dreiecke, Quadrate, Parallelogramme) werden in einer Polygron-Kollektion zur Verfügung gestellt.

objPoly = {'key_1': {/* 1. Element */},
           'key_2': {/* 2. Element */},
           // ... weitere Polygon-Objekte
           'key_n': {/* n. Element */}
};

In jeder Komponente der Polygon-Kollektion ist ein Einzelelement (Polygon-Objekt) enthalten, welches eine Figur (Dreieck, Quadrat, Parallelogramm) beschreibt.

Die Eigenschaften, die ein Polygon beschreiben, werden im Folgenden genau beschrieben.

Polygon-Objekt

Ein Polygon wird durch seinen Schwerpunkt (Position), seine Eckpunkte und seiner Drehung definiert. Der Schwerpunkt wird beim Zeichnen des Elements zum Koordinatenursprung (0, 0). Die Eckpunkte werden in Abhängigkeit des Ursprungs angegeben, ebenso die Lage (Drehung).

Beispiel Dreieck

Polygon-Objekt

Mit:

[x_off, y_off] = [w/2, h/2]
[x0,y0]        = [-w/2, -h/6]
[x1,y1]        = [w/2, -h/6]
[x2,y2]        = [0, h/3]
phi            = 0

Syntax: Polygon-Objekt

Zunächst wird der grundsätzliche Aufbau eines Polygon-Objekts gezeigt.

'key_0': {off: [x_off, y_off], coords: [[x_0, y_0], [x_1, y_1], ..., [x_n, y_n]], color: [r, g, b, a], phi: grad_winkel[,lsg: ['key_1', .. , 'key_n']]}

Dabei gilt:

  • key_0

    Eindeutiger Schlüssel, über den die Polygonkomponente referenziert werden kann

    Datentyp: string

  • off

    Koordinaten des Schwerpunkts im <canvas>-Element

    Datentyp: array

  • coords

    Array, das die Koordinaten der Eckpunkte des Polygons enthält

    Datentyp: array

  • color

    Farbe, mit der das Polygon gefüllt werden soll.
    Hierbei gilt: r=rot (0..255), g=grün (0..255), b=blau (0..255), a=Transparenz (0.0 .. 1.0)

    Datentyp: array

  • phi

    Drehwinkel des Elements

    Datentyp: integer

  • lsg

    Schlüssel gleichgeformter Elemente (Polygone), deren Position ebenfalls als Lösungsmöglichkeit in Frage kommen.

    Datentyp: array of strings

Schematische Vorgehensweise beim Zeichnen einer Figur

  1. Beim Zeichnen einer Figur wird dessen Schwerpunkt im <canvas>-Elements platziert.
  2. Das Koordinatensystem wird in den Schwerpunkt verschoben
    translate(x_off, y_off)
  3. Die Eckpunkte werden gezeichnet und durch Linien miteinander verbunden
    lineTo(x_i, y_i), mit i=0…n

qpTangram

Das Tangram-Objekt qpTangram stellt für das Spiel das <canvas>-Element sowie zahlreiche Methoden zur Verfügung, mit deren Hilfe das Arbeit mit den enthaltenen Polygonen sowie deren Manipulation ermöglicht wird.

Syntax

var objCvs = qpTangram([id], [optionen]);

Argumente

Beim Initialisieren können folgende Argumente übergeben werden:

  • id (optional)

    Wird eine ID übergeben, wird das zugehörige Element zum Container, der das <canvas>-Element mit den Tangram-Figuren enhält.

    Datentyp: string

  • optionen (optional)

    Über optionen können Verhalten, Aussehen und Eigenschaften des Tangram-Objekts beeinflusst werden. Es stehen hierfür nachstehende Eigenschaften zur Verfügung.

    Datentyp: object

Optionen

Folgende Optionen stehen zum individuellen Konfigurieren des qpCanvas-Objektes zur Verfügung.

  • id

    ID des Holderelements

    Datentyp: string

  • w

    Breite des <canvas>-Elements in Pixeln (default: 300)

    Datentyp: integer

  • h

    Höhe des <canvas>-Elements in Pixeln (default: 300)

    Datentyp: integer

  • top

    vertikaler Abstand des <canvas>-Elements zum Holder-Element in Pixeln (default: 0)

    Datentyp: integer

  • left

    horizontaler Abstand des <canvas>-Elements zum Holder-Element in Pixeln (default: 0)

    Datentyp: integer

  • zIndex

    z-Index des <canvas>-Elements (default: 1)

    Datentyp: integer

  • cvs_class

    CSS-Klasse zum Auszeichnen des Canvas-Elements (default: null)

    Datentyp: string

  • obj

    zum Canvas gehörendes Polygon-Objekt

    Datentyp: object

  • angle

    Winkel in Grad, um den eine Figur gedreht wird (default: 45)

    Datentyp: float

  • opac

    Transparenz des aktiven Elements (default: 0.5)

    Datentyp: float

  • lw

    Linienstärke um aktives Element (default: 2.0)

    Datentyp: float

  • rnd

    Gibt an, ob Polygone in ihrer Lage und ihrem Drehwinkel beim Initialisieren zufällig (true) oder wie im Objekt vorgegeben (false) in den Context gezeichnet werden. (default: false)

    Datentyp: boolean

  • active_always

    Gibt an, ob das aktive Polygon immer grafisch hervorgehoben werden soll. (default: true)

    Datentyp: boolean

  • show_lsg

    Zeigt die Lösungsform an (true) oder nicht (false). (default: true)

    Datentyp: boolean

  • opac_lsg

    Transparenzwert der Lösungsform, 0.0 .. 1.0. (default: 0.5)

    Datentyp: float

  • tolerance

    Toleranz in Pixeln, die ein Polygon neben der Zielkoordinate abgelegt werden darf. (default: 20)

    Datentyp: integer

  • angle_delay

    Geschwindigtkeit beim animierten Drehen - kleiner = schneller. (default: 10)

    Datentyp: integer

  • stroke_lsg

    Zeigt in der Lösungsform die Linien der Polygone an (true) oder nicht (false). (default: false)

    Datentyp: boolean

  • onAfterAction

    Funktion, die nach der Translation/Rotation ausgeführt werden soll

    Datentyp: function

Methoden

Das zurückgegebene Objekt objCvs stellt die nachstehenden Methoden zur Verfügung:

  • clear()

    Löscht den Inhalt des <canvas>-Elements

    Datentyp: function

  • drawPoly()

    Zeichnet das zugehörige Polygon in das <canvas>-Element

    Datentyp: function

  • rotatePoly(phi)

    Erhöht den Drehwinkel der zugehörigen Figur um den übergebenen Winkel phi (im Gradmaß).

    Datentyp: function

  • newPoly(objPoly, [optionen])

    Versorgt das Tangram-Objekt mit einer neuen Polygon-Kollektion (objPoly). Zudem kann optional ein Optionen-Objekt optionen wie oben beschrieben gegeben werden, um das Verhalten des Spiels zu manipulieren.

    Datentyp: function

Browserkompatibilität

Das Script wurde in folgenden Browsern erfolgreich getestet.

  • IE 6+
  • Firefox 1.5+
  • Opera 9+
  • Mozilla 1.5+
  • Safari (Win) 3+
  • Google Chrome
 
Dokument zuletzt modifiziert: 10.03.2010, 21:53 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap