nicht angemeldet
Kreis zeichnen mit JavaScript
0 0 0 Kreis zeichnen mit SVG
0 0
Kreis zeichnen mit JavaScript
Hallo Leute,
kann mit jemand sagen, wie man mit JavaScript einen Kreis mit beliebigem Radius an beliebigen Koordinaten zeichnen kann?
Wenn ich auf meiner Seite auf eine bestimmte Stelle klicke, dann soll dort ein Kreis erscheinen (Wie ich die Koordinaten bekomme, weiss ich).
Danke und Gruß,
CFox.
-
kann mit jemand sagen, wie man mit JavaScript einen Kreis mit beliebigem Radius an beliebigen Koordinaten zeichnen kann?
Da es ein Kreis sein soll und nicht z.B. ein Rechteck (das man mittel einer Tabelle erzeugen kann) muss da wohl ein image her (*.jpg oder *.gif) diese kann man aber mit JS nicht dynamisch erzeugen, mit PHP geht so etwas. Du könntest höchstens einen "standard" Kreis nehmen und diesen dann mittels width=x height=x auf die gewünschte Größe "zooomen", evtl, für unterschiedliche Zielgrößen verschiedene Vorlagen verwenden, damit das ganze nicht zu pixelig wird.
-
Hallo,
kann mit jemand sagen, wie man mit JavaScript einen Kreis mit beliebigem Radius an beliebigen Koordinaten zeichnen kann?
Wenn ich auf meiner Seite auf eine bestimmte Stelle klicke, dann soll dort ein Kreis erscheinen (Wie ich die Koordinaten bekomme, weiss ich).
http://www.dhtml-now.de/dhtml/zeichnen/objekte2d.asp, funktioniert aber nur mit NC.
Gruß Markus
-
Hallo CFox,
wenn Du Deinen Kreis wirklich _zeichnen_ willst, also eine Vektorgrafik generieren möchtest, dann wäre wohl SVG (Scalable Vector Graphics) was für Dich?
Herzliche Grüße,
Meg-
gruss forum,
hier mal das ergebnis meiner kurzen recherche
zum thema SVG vom 21.01.2002 wobei ich als
deutschsprachige einstiegsseiteempfehlen moechte;
und nun der text mit kurzer persoenlicher wertung:
------21/01/2002---------------------------------
!!! - DER TIPP -------------------------------------------------------- !!!
!!! !!!
- Helma Spona"Einsteigerseminar - SVG - Webgrafiken mit XML" (ISBN 3-8266-7181-3)
dieses hervorragende buch zum kleinen preis kommt
in gut aufgebauten lektionen daher und bietet am
ende eines jeden kapitels zusammenfassung, uebungen
und aufgaben;
auf einen referenzteil wurde verzichtet, aber mit
einem zum februar 2002 angekuenigten O'REILLY kann
man das kompensieren;autorin : Helma Spona
preis : EURO 9,95
DM 19,46verlag : vmi Buch AG
ISBN : 3-8266-7181-3
auflage : erste
seiten : 384der link zum runterladen der "Beispiele zum Buch"
befindet sich zusammen mit anderen adressen unterhttp://www.s-v-g.net/downloads
"SVG-Kurs"
unter http://www.helma-spona.de/homepag1.htm
"SVG-Kurs" in der top-navigation anklicken oder gleich
http://www.helma-spona.de/svgkurs.php anwaehlenkurz und knapp, uebersichtlich und verstaendlich gehaltener SVG-einstieg
!!! !!!
!!! - DER TIPP -------------------------------------------------------- !!!- "SVG Essentials - Producing Scalable Vector Graphics with XML"
autor : J. David Eisenberg
US-preisempfehlung: $ 34.95
preis : EURO 42,46
DM 83,04verlag : O'REILLY
ISBN : 0-5960-0223-8
erscheinungsdatum : Februar 2002
auflage : erste
seiten : ca 300- Stefan Schumacher (mailto:sts@schumacher-netz.de) hat damit begonnen,
die SVG-empfehlung des W3C (<http://www.w3.org/TR/SVG/ vom 04.09.2001>)
ins Deutsche zu uebersetzen;http://www.schumacher-netz.de/TR/2001/SVG/
- wobei an dieser stelle noch einmal ausdruecklich auf
http://www.w3.org/Graphics/SVG/Overview.htm8 sowie auf
http://www.w3.org/TR/SVG11/ (letzte version: 08.01.2002) und
http://www.w3.org/TR/2001/REC-SVG-20010904/ (04.09.2001)hingewiesen werden soll.
!!! - http://www.scale-a-vector.de/
!!!
!!! gehoert als deutschsprachige einstiegsseite
!!! ganz an den anfang einer SVG-favoritenliste;denn dort wird einem eine sehr umfangreiche
und gut gegliederte linkliste zu den bereichen
Software, Foren/Newsgroups/Mailinglisten,
Links, Literatur, Presse, News, Termine
geboten;und da ich bei der heutigen (21.01.2002) recherche
am schluss auf
!!! http://www.cyberliesel.de/
!!! und damit auch auf http://www.scale-a-vector.de
gestossen bin, muss
ich mich jetzt erst mal den dortigen informationen
widmen und beende hiermit vorlaeufig die linkliste;desweiteren:
- Adobe SVG-tutorial (http://www.adobe.com/svg/basics/getstarted.html)
unter "Developer tutorials" und "Dynamic SVG" erhaelt man
eine umfassende einfuehrung in die grundlagen von SVG und
in techniken zum manipulieren des SVG-DOMs;- Adobe SVG-samples (http://www.adobe.com/svg/demos/samples.html)
sehr schoene komplexe beispiele, anhand derer die grossen
moeglichkeiten von SVG und DOM-scripting sichtbar werden;- Adobe SVG+Illustrator (http://www.adobe.com/svg/illustrator/illustrator.html)
bewirbt ausfuehrlich die SVG-faehigkeiten von Adobe Illustrator -
schoen fuer diejenigen, die ihn haben;- Adobe Support - User 2 User Forums (http://www.adobe.com/support/forums/main.html)
einstiegsseite zu einem SVG-forum;
- SVG-spot / SVG-tutorial (http://www.svg-spot.com/tutorials/)
die beispiele dieser seite beschraenken sich auf die
absoluten grundlagen zu SVG, eignen sich aber ob ihrer
kuerze und der entsprechenden umsetzung dazu, einen
sehr schnellen ueberblick ueber das thema zu bekommen;- SVG-spot / SVG-forum (http://www.svg-spot.com/forum/)
kleines forum rund ums thema
- http://www.fuzzydesign.de/svg/
( FuzzyDesign arbeitet unter anderem an einem projekt zu "interactive-autopublishing-solutions"
und entwickelt loesungen fuer datenbankgestuetztes arbeiten mit SVG-formaten )einfach mal die beispiele ansehen und im forum vorbeischauen
------21/01/2002---------------------------------
viel spass und by(t)e by(t)e - peterS. - pseliger@gmx.net
-
Hallo Peter,
hier mal das ergebnis meiner kurzen recherche
zum thema SVG vom 21.01.2002 ...Einen Tag spaeter habe ich mal einen groben SVG-Ueberblick innerhalb von 10 KB SVG-Code online gestellt: http://www.styleassistant.de/tips/tip79.htm oder mit PlugIn direkt zu http://www.styleassistant.de/tips/TMs10kSVGDemo.htm.
Unter http://www.datenverdrahten.de/iprovote/iprovote.php, wird SVG dynamisch mit PHP generiert (ueber den Button Ergebnisse zum Link oder direkt zu http://www.datenverdrahten.de/iprovote/abstimmung.htm).
Eine sehr gute Informationsquelle bietet auch http://www.webreference.com/authoring/languages/svg/ und dort speziell der Artikel "Scalable Vector Graphics: The Art is in the Code", link:http://www.webreference.com/authoring/languages/svg/intro/].
Exakt in diesem Wortsinne "The Art is in the Code" bin ich von SVG ueberaus fasziniert. Mal abgesehen davon, dass es in meinen Programmier- bzw. Programmierlehralltag etwas mehr Farbe(n) bringt ;-).
MfG, Thomas
-
-
-
Hallo,
kann mit jemand sagen, wie man mit JavaScript einen Kreis mit beliebigem Radius an beliebigen Koordinaten zeichnen kann?
Wenn ich auf meiner Seite auf eine bestimmte Stelle klicke, dann soll dort ein Kreis erscheinen (Wie ich die Koordinaten bekomme, weiss ich).
Vermutlich moechtest Du das im HTML-Dokument machen und wie der gepostete Link zeigt, ist das sehr aufwendig bis unpraktikabel.
In einem SVG-Dokument ist das schon einfacher:
function Kreis(evt,x,y,r,farbe)
{
var svgdoc, svgroot, objekt;
svgdoc=evt.getTarget().getOwnerDocument();
svgroot=svgdoc.getDocumentElement();
objekt=svgdoc.createElement("circle");
objekt.setAttribute("cx",x);
objekt.setAttribute("cy",y);
objekt.setAttribute("r",r);
objekt.setAttribute("style","fill: "+farbe);
svgroot.appendChild(objekt);
}<element ... onclick="Farbe(evt,'200','200','50','#FF0000')"/>
Damit sollte durch Vorgabe von Mittelpunkt, Radius und Farbe ein roter Kreis entstehen. Das kann via <object ...>Ersatzinhalt</object> in HTML eingebettet werden, wobei zur Ausfuehrung zurzeit noch ein externes PlugIn erforderlich ist.
MfG, Thomas
-
Hallo Thomas,
wie machst Du das bloß immer so schnell?
function Kreis(evt,x,y,r,farbe)
{
var svgdoc, svgroot, objekt;
svgdoc=evt.getTarget().getOwnerDocument();
svgroot=svgdoc.getDocumentElement();
objekt=svgdoc.createElement("circle");
objekt.setAttribute("cx",x);
objekt.setAttribute("cy",y);
objekt.setAttribute("r",r);
objekt.setAttribute("style","fill: "+farbe);
svgroot.appendChild(objekt);
}<element ... onclick="Farbe(evt,'200','200','50','#FF0000')"/>
Und woher wußte ich nur, daß ich Dich in diesem Thread treffen würde...? ;o)
Herzliche Grüße,
Meg-
Hallo Meg,
wie machst Du das bloß immer so schnell?
Da ich das gerade gestern mit einem Rechteck gemacht habe: http://www.styleassistant.de/tips/tip81.htm, lag der Kreis ziemlich nahe.
Und woher wußte ich nur, daß ich Dich in diesem Thread treffen würde...? ;o)
Ja, da haben wir wohl ein gemeinsames Erlebnis gehabt ;-).
Herzliche Grüße,
Thomas
-
-
-
Hallo CFox,
kann mit jemand sagen, wie man mit JavaScript einen Kreis mit beliebigem Radius an beliebigen Koordinaten zeichnen kann?
Schon mal in den SELFHTML Newsticker geguckt - ganz oben?
(z.B. ueber die Forumshauptseite oben in der Leiste links mit den Quicklinks unter "News" aufrufbar)viele Gruesse
Stefan Muenz
