• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Viele hassen ihn, manche schwören auf ihn, wir aber möchten unbedingt sehen, welche Bilder Ihr vor Eurem geistigen Auge bzw. vor der Linse Eures iPhone oder iPad sehen könnt, wenn Ihr dieses Wort hört oder lest. Macht mit und beteiligt Euch an unserem Frühjahrsputz ---> Klick

Uhr-Widget

3dots

Gast
Hallo,

ich versuche gerade ein Widget für das Dashboard zu erstellen. Dabei möchte ich, dass das Widget auch eine analoge Uhr enthält, ähnlich wie World-Clock. Leider habe ich keine Ahnung, wie ich sowas programmieren kann.
Ich nehme an, ich brauche Canvas. Auf Apple.de habe ich ein Tutrorial gefunden, kann es aber nicht umsetzen.
Mein Java-Code sieht so aus:

function drawHands (hoursAngle, minutesAngle, secondsAngle)
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.clearRect(0, 0, 100, 100);
context.save();
context.translate(100/2, 100/2);
context.save();

context.rotate(hoursAngle);
context.drawImage(hourhand, -4, -28, 9, 25);
context.restore();
context.save();

context.rotate (minutesAngle);
context.drawImage (minhand, -8, -44, 18, 53);
context.restore();

context.rotate (secondsAngle);
context.drawImage (sechand, -4, -52, 8, 57);
context.restore();
}

und mein html-Code so:
Code: 
 [FONT=Helvetica]<div class="clock">[/FONT][FONT=Helvetica] AM[/FONT][FONT=Helvetica] <canvas id="myCanvas" width='100' height='100'/>[/FONT][FONT=Helvetica]</div>[/FONT]
Kann mir jemand helfen, oder kennt jemand ein Tutorial, was einem erklärt, wie man ein Uhr-Widget erstellt?

Danke!
 

seb2

Gast
Wird das Canvas denn überhaupt angezeigt?
Und... bist Du Dir sicher daß die Bilder geladen sind?

Letztlich... wenn die letzten beiden Parameter bei drawImage() die tatsächliche Größe des Bildes sind kannst Du sie weglassen. drawImage() funktioniert auch nur mit drei Parametern (Bild, X, Y), die letzten beiden Parameter brauchst Du nur wenn Du das Bild gleichzeitig skalieren möchtest.

Ach ja... Deine save() und restore() solltest Du Dir mal angucken. Einmal sehe ich da direkt ein restore() hinter einem save() -- wozu? Die Zahl der restore() sollte übrigens gleich der Zahl Deiner save() sein, sonst kann das in die Hose gehen.
 

3dots

Gast
Hallo,

nein die Canvas wird nicht angezeigt, die Funktion aber aufgerufen. Ich habe die Funktion nochmal umgeschrieben:

function drawHands ()
{
var ctx = document.getElementById('myCanvas').getContext('2d');
var bighand = new Image();
bighand.src = 'bighand.png';

ctx.clearRect(0, 0, 100, 100); //Weil jede Sek. aktualiesiert leer, damit nicht überzeichnet
ctx.save();
ctx.translate(100/2, 100/2); //Weil Hände sich um Uhrzentrum drehen sollen
ctx.save();

//Stundenzeiger
ctx.drawImage(bighand, 50, 50);

ctx.restore(); //Weil in nächster Sek. wieder neuzeichnen muss
}
 

seb2

Gast
Wo und wann wird denn die drawHands() überhaupt aufgerufen?

Edit: Du hast da immer noch ein save() mehr drin als restore(). Das ganze ist ein Stack und den müllst Du mit ungültigen Zuständen zu.
 
Zuletzt bearbeitet von einem Moderator:

3dots

Gast
drawHands() wird in setup() aufgerufen, welches in der html-Datei in <body onload="setup()"> ausgeführt wird.
 

seb2

Gast
Schick mir das doch mal zu oder lad es irgendwo hoch, dann guck ich mir das an.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2024 Apfeltalk | Made on a Mac
Oben Unten