Kreis einblenden

[kiecker]

Hallo Leute,
ich suche ein (wohl) einfaches(?) JavaScript. Es soll ein Kreis zunächst als kleiner Punkt erscheinen und dann bis zur Größe X größer werden. Das ganze einmal und dann soll der große Kreis stehen bleiben fertig. Die Farbe des Kreises will ich dann später aus einer Datenbank auslesen, aber das würde ich hinbekommen. Hat vielleicht jemand sowas zur Hand?

Danke und Gruß

[suit]

Hat vielleicht jemand sowas zur Hand?

Erster Treffer bei Suche nach "draw with javascript" in der Suchmaschine meiner Wahl.
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

[Klawischnigg]

Hi there,

ich suche ein (wohl) einfaches(?) JavaScript.

wohl nicht.

Es soll ein Kreis zunächst als kleiner Punkt erscheinen und dann bis zur Größe X größer werden. Das ganze einmal und dann soll der große Kreis stehen bleiben fertig. Die Farbe des Kreises will ich dann später aus einer Datenbank auslesen, aber das würde ich hinbekommen.

Dein Ansinnen ist auf triviale Art und Weise nicht realisierbar; da Javascript keinerlei graphische Funktionen zur Verfügung stellt, kannst Du auch zunächst einmal auch keinen Kreis darstellen. Du könntest aber einzelne Punkte (die nicht aus einer graphischen Bilbliothek sondern aus einer Schrift oder einem anderen, in HTML darstellbaren Element stammten) in Form eines Kreises anordnen, dessen Radius Du von Erweiterung zu Erweiterung vergösserst. Im Zuge der Erweiterung müsstest Du natürlich auch immer mehr Punkte zur Kreisdarstellung verwenden. Die Farbe des Kreises kannst Du einfach setzen, in dem Du den Punkten die gewünschte Farbe zuweist.

Hat vielleicht jemand sowas zur Hand?

schwer vorstellbar, weil vermutlich sehr selten benötigt. Ist aber nicht so schwer zu realisieren, nur eben nicht ganz so trivial wie "zeichne Kreis mit Radius x in Farbe y"...

[bleicher]

Grüße,

Dein Ansinnen ist auf triviale Art und Weise nicht realisierbar; da Javascript keinerlei graphische Funktionen zur Verfügung stellt, kannst Du auch zunächst einmal auch keinen Kreis darstellen.

er könnte doch einen div dynamischer Hintergrundfarbe mit einem gif/png in der Farbe des webseitenhintergrunds mit "Loch" in der mitte überblenden und skalieren?
Bzw - wenn die Anzahl der Farben begrenzt ist - man kann die Kreisgrafiken in nötigen Farben vorfertigen.
Oder Dynamisch erstellen (PHP kann das)?
MFG
bleicher

[suit]

Oder Dynamisch erstellen (PHP kann das)?

Was spricht gegen ein animiertes GIF, welches serverseitig erzeugt wird?

[Kiecker]

Hallo Leute,
Ihr seid ja fix, soweit schonmal vielen Dank.

»» Oder Dynamisch erstellen (PHP kann das)?

Aber mit Php schien mir die Sache doch recht komplex zu sein, ich dachte es ginge mit JavaScript einfacher. Das scheint ja aber so doch nicht zu sein.

Was spricht gegen ein animiertes GIF, welches serverseitig erzeugt wird?

Wie kann ich denn ein Gif serverseitig erzeugen?

[suit]

Wie kann ich denn ein Gif serverseitig erzeugen?

PHP: Bildverarbeitung und -generierung

Der Abschnitt Image behandelt die gd Bibliothek, ImageMagick setzt sich, wie der Name sagt, mit ImageMagick auseinander.

Ich persönlich bevorzuge gd

[bleicher]

Grüße,
oder du verwendest animiertes SVG - alle Browser beherrschen es inzwischen recht anständig oder zur Not mit plugin. SVG ist AFAIK über JS "steuerbar"
MFG
bleicher

[suit]

oder du verwendest animiertes SVG - alle Browser beherrschen es inzwischen recht anständig oder zur Not mit plugin. SVG ist AFAIK über JS "steuerbar"

Wenn du damit meinst, dass sich das DOM einer SVG-Datei auch mit JavaScript manipulieren lässt - ja. Aber es gibt noch andere Ansätze.

[Cybaer]

Hi,

andersherum wird es kompatibler: CANVAS benutzen, was schon von allen aktuellen Browsern außer IE 8 unterstützt wird, und für IE dann eine LS-Lib, die CANVAS auch im IE zur Verfügung stellt (via SVG).

Gruß, Cybaer

[Tim Tepaße]

Hallo,

... und für IE dann eine LS-Lib, die CANVAS auch im IE zur Verfügung stellt (via SVG).

Der IE kann auch kein SVG – es sei denn, Du bindest eine zusätzliche Bibliothek ein, die SVG nach VML, Silverlight oder Flash übersetzt. ;)

Tim

[MudGuard]

Hi,

ich suche ein (wohl) einfaches(?) JavaScript. Es soll ein Kreis zunächst als kleiner Punkt erscheinen und dann bis zur Größe X größer werden.

Nur mal so als Idee: verwende ein Element, das als einzigen Inhalt ein o hat. Such dazu eine Schrift, bei der das o möglichst kreisförmig ausfällt.
Dann brauchst Du nur noch die Schriftgröße dieses Elements von 0 schrittweise auf X ändern ;-)

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

Nur mal so als Idee: verwende ein Element, das als einzigen Inhalt ein o hat. Such dazu eine Schrift, bei der das o möglichst kreisförmig ausfällt.

Nur mal so als Idee: '○' U+25CB WHITE CIRCLE.

Oder wenn’s kein Kreis, sondern eine Kreisfläche sein soll: '●' U+25CF BLACK CIRCLE

(in UniView nach "circle" gesucht)

Qapla'

[MudGuard]

Hi,

Nur mal so als Idee: '○' U+25CB WHITE CIRCLE.

Geht nicht - die Farbe soll ja nicht immer weiß sein, sondern aus der Datenbank kommen ;-)

Oder wenn’s kein Kreis, sondern eine Kreisfläche sein soll: '●' U+25CF BLACK CIRCLE

Gleiches Gegenargument. ;-)

cu,
Andreas

[MudGuard]

Hi,

»» Nur mal so als Idee: verwende ein Element, das als einzigen Inhalt ein o hat. Such dazu eine Schrift, bei der das o möglichst kreisförmig ausfällt.
Nur mal so als Idee: '○' U+25CB WHITE CIRCLE.

Noch ein ernsthaftes Gegenargument: ist das Kreis-Zeichen in den üblicherweise installierten Fonts vorhanden?

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

Noch ein ernsthaftes Gegenargument: ist das Kreis-Zeichen in den üblicherweise installierten Fonts vorhanden?

Ist denn ein 'o', das wie ein Kreis aussieht, in den üblicherweise installierten Fonts vorhanden?

Zu deinen anderen „Gegenargumenten“: VBG. Ja, die Benamsung einiger Unicode-Zeichen ist etwas unglücklich gewählt.

Qapla'

[suit]

Zu deinen anderen „Gegenargumenten“: VBG. Ja, die Benamsung einiger Unicode-Zeichen ist etwas unglücklich gewählt.

Jep - auch in "bunt" funktioniert es einwandfrei:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Foobar!</title>  
	<style type="text/css">  
		body {  
			font-size: 100px;  
		}  
		  
		#a { color: red; }  
		#b { color: green; }  
		#c { color: blue; }  
	  
	</style>  
</head>  
<body>  
	<div id="a">○</div>  
	<div id="b">●</div>  
	<div id="c">&#x25CB;</div>  
</body>  
</html>

[at]

Hallo.

Ist denn ein 'o', das wie ein Kreis aussieht, in den üblicherweise installierten Fonts vorhanden?

Natürlich, bei der Gill Sans -- ein Mac sei hier vorausgesetzt; Windows-Nutzer kennen den Unterschied zwischen Kreis und Oval ja meist ohnehin nicht.
MfG, at

[suit]

Windows-Nutzer kennen den Unterschied zwischen Kreis und Oval ja meist ohnehin nicht.

Ob Kreis oder Oval ist mir egal - für Windows gibts mehr als sechs Spiele (Photoshop bereits mitgerechnet).

SCNR - es liegt nicht in meiner Absicht, einen Mac-OS-vs.-Windows-Flamewar auszulösen.

[at]

Hallo.

Ob Kreis oder Oval ist mir egal - für Windows gibts mehr als sechs Spiele (Photoshop bereits mitgerechnet).

Das Photoshop?
Für den Mac kommt demnächst das siebente Spiel heraus: Windows 7 gibt es ja immerhin schon als Beta und nicht-lineare Adventures sind doch die spannendsten. Ein wenig erinnert mich Windows aber an Hochsprung: Alle versuchen, über die Stange zu hüpfen, und wenn alle gescheitert sind, wird einer zum Sieger erklärt und alle freuen sich auf das nächste Turnier.

SCNR - es liegt nicht in meiner Absicht, einen Mac-OS-vs.-Windows-Flamewar auszulösen.

Tja, manchmal klickt man eben auf Start, um etwas zu beenden.
MfG, at

[suit]

Das Photoshop?

Die kannte ich noch garnicht - danke für den Link :D

Tja, manchmal klickt man eben auf Start, um etwas zu beenden.

Das wurde ja glücklicherweise mit Vista abgeschafft - stattdessen versetzt man den Rechner nun per Voreinstellung in ACPI S4 anstatt ihn abzuschalten :)

[Der Martin]

Hi,

Tja, manchmal klickt man eben auf Start, um etwas zu beenden.
Das wurde ja glücklicherweise mit Vista abgeschafft - stattdessen versetzt man den Rechner nun per Voreinstellung in ACPI S4 anstatt ihn abzuschalten :)

ich habe seit Windows 98 nicht mehr das Startmenü verwendet, um Windows herunterzufahren, sondern zu diesem Zweck den ACPI-Power-Button gedrückt (alternativ den selbst zugeordneten Shortcut Ctrl-Alt-End).

Ciao,
 Martin

[at]

Hallo.

Das Photoshop?
Die kannte ich noch garnicht - danke für den Link :D

Gern. Wenn du noch etwas nicht kennen solltest, lass es mich einfach wissen.
MfG, at

[Klawischnigg]

Hi there,

Nur mal so als Idee: verwende ein Element, das als einzigen Inhalt ein o hat. Such dazu eine Schrift, bei der das o möglichst kreisförmig ausfällt.
Dann brauchst Du nur noch die Schriftgröße dieses Elements von 0 schrittweise auf X ändern ;-)

Nicht schlecht, aber schaut leider popelig aus, weil ja der Mittelpunkt Deines O bei Vergrösserung der Schrift leider nicht gleich bleibt;)