Class enchant.Surface
Diese Klasse dient als Hüllenklasse (Wrapper) für Canvas Elemente. Mit dieser Klasse können die image Felder der enchant.Sprite und enchant.Map's Klassen gesetzt werden und dadurch dargestellt werden. Falls die Canvas API genutzt werden möchte kann dies über die enchant.Surface#context Variable erfolgen.
- Defined in: enchant.js
- Extends enchant.EventTarget
Constructor Attributes | Constructor Name and Description |
---|---|
enchant.Surface(width, height)
|
Field Attributes | Field Name and Description |
---|---|
Der Surface Zeichenkontext.
|
|
Die Höhe der Surface.
|
|
Die Breite der Surface.
|
Method Summary
Method Attributes | Method Name and Description |
---|---|
clear()
Löscht alle Pixel und setzt macht die Pixel transparent.
|
|
clone()
Kopiert diese Surface.
|
|
draw(image)
Zeichnet den Inhalt der gegebenen Surface auf diese Surface.
|
|
getPixel(x, y)
Liefert einen Pixel der Surface.
|
|
<static> |
enchant.Surface.load(src, callback, onerror)
Läd eine Grafik und erstellt daraus ein Surface Objekt.
|
setPixel(x, y, r, g, b, a)
Setzt einen Pixel in der Surface.
|
|
Erstellt eine Data-URL (URI Schema) für diese Surface.
|
- Methods borrowed from class enchant.EventTarget:
- addEventListener
- clearEventListener
- dispatchEvent
- on
- removeEventListener
Class Detail
enchant.Surface(width, height)
// Erstellt einen Sprite und stellt einen Kreis dar. var ball = new Sprite(50, 50); var surface = new Surface(50, 50); surface.context.beginPath(); surface.context.arc(25, 25, 25, 0, Math.PI*2, true); surface.context.fill(); ball.image = surface;
- Parameters:
- {Number} width
- Die Breite der Surface.
- {Number} height
- Die Höhe der Surface.
Field Detail
{CanvasRenderingContext2D}
context
Der Surface Zeichenkontext.
{Number}
height
Die Höhe der Surface.
{Number}
width
Die Breite der Surface.
Method Detail
-
clear()Löscht alle Pixel und setzt macht die Pixel transparent.
-
{enchant.Surface} clone()Kopiert diese Surface.
- Returns:
- {enchant.Surface} Die kopierte Surface.
-
draw(image)Zeichnet den Inhalt der gegebenen Surface auf diese Surface. Umhüllt (wraps) die Canvas drawImage Methode und sollten mehrere Argumente übergeben werden, werden diese auf die Canvas drawImage Methode angewendet.
var src = core.assets['src.gif']; var dst = new Surface(100, 100); dst.draw(src); // Zeichnet src bei (0, 0) dst.draw(src, 50, 50); // Zeichnet src bei (50, 50) // Zeichnet src an der Position (50,50), jedoch nur 30x30 Pixel dst.draw(src, 50, 50, 30, 30); // Skaliert und zeichnet den Bereich mit der (Breite, Höhe) von (40, 40) // in src ab (10,10) in diese Surface bei (50,50) mit einer (Breite, Höhe) von (30, 30). dst.draw(src, 10, 10, 40, 40, 50, 50, 30, 30);
- Parameters:
- {enchant.Surface} image
- Surface used in drawing.
-
{Number[]} getPixel(x, y)Liefert einen Pixel der Surface.
- Parameters:
- {Number} x
- Die x Koordinaten des Pixel.
- {Number} y
- Die y Koordinaten des Pixel.
- Returns:
- {Number[]} Ein Array das die Pixelinformationen im [r, g, b, a] Format enthält.
-
Läd eine Grafik und erstellt daraus ein Surface Objekt. Bei Grafiken die mit dieser Methode erstellt wurden ist es nicht möglich auf Variablen oder Methoden des enchant.Surface#context zuzugreifen, oder Methoden die die Canvas API nutzen, wie enchant.Surface#draw, enchant.Surface#clear, enchant.Surface#getPixel, enchant.Surface#setPixel.., aufzurufen. Jedoch ist es möglich diese Surface zu nutzen um sie in eine andere Surface mittels der enchant.Surface#draw zu zeichen. Die daraus resultierende Surface kann dann manipuliert werden. (Wenn Bilder in einer Cross-Origin Resource Sharing Umgebung geladen werden, kann es sein, dass die Pixelabfrage und andere Bildmanipulationen limitiert sind)
- Parameters:
- {String} src
- Der Dateipfad der Grafik die geladen werden soll.
- callback
- onerror
- Returns:
- {enchant.Surface} Surface
-
setPixel(x, y, r, g, b, a)Setzt einen Pixel in der Surface.
- Parameters:
- {Number} x
- Die x Koordinaten des Pixel.
- {Number} y
- Die y Koordinaten des Pixel.
- {Number} r
- Der Rotwert des Pixel.
- {Number} g
- Der Grünwert des Pixel.
- {Number} b
- Der Blauwert des Pixels.
- {Number} a
- Die Transparenz des Pixels
-
{String} toDataURL()Erstellt eine Data-URL (URI Schema) für diese Surface.
- Returns:
- {String} Die Data-URL, welche diese Surface identifiziert und welche genutzt werden kann um diese in einen DOM Baum einzubinden.