Ich frag mcih schon seit langem, wie ich effektiv Kreis(teil)e per Javascript in einen DIV-Container "zeichnen" kann.
Im Moment mache ich es sehr ineffetiv, indem ich 360 1-pixel große Bilder im Abstand von jeweils 1° per [div].innerHTML einfüge. Das Anzeigen vom 5 Kreisen dauert beim Client so mal locker 5 sec... (Initialisierung per Link)..
Ich hab in css keine Methode zum Zeichnen gefunden .. ebensowenig in Java-script ...
kann ich ein transparentes (Nur die Kreislinie) GIF über das div legen und den kreis per css box-artig "beschneiden", sodass ich nur einen Kreis-ausschnitt anzeigen kann? Wenn ja wie?
Wie das am ende aussehen soll sieht man in meinem letzten Blog-Eintrag in dem Pic.
Vorschläge?
Ich freue mich auf Antworten und Anregungen =)
Kreise in Java-Script?
gepostet vor 19 Jahre, 1 Monat von Drezil
gepostet vor 19 Jahre, 1 Monat von Sogil
Warum machst du keinen Kreis als gif Datei mit transparentem Hintergrund und änderst die größe der Grafik mit width und height?
gepostet vor 19 Jahre, 1 Monat von Mudder
Oder nen Bild was mittels PHP auf die entsprechende Größe erstellt wird..
gepostet vor 19 Jahre, 1 Monat von Chojin
Wieso eigendlich "Kreis-ausschnitt" und nicht ein geschlossener, normaler Kreis?
gepostet vor 19 Jahre, 1 Monat von Krisch
Original von SogilWeil die Linie immer dicker wird.
Warum machst du keinen Kreis als gif Datei mit transparentem Hintergrund und änderst die größe der Grafik mit width und height?
gepostet vor 19 Jahre, 1 Monat von Drezil
Original von Chojin
Wieso eigendlich "Kreis-ausschnitt" und nicht ein geschlossener, normaler Kreis?
weil ich auch nur ausschnitte der Weltraumkarte darstelle.. und der kreis stellt eben den sichtradius dar. da brauch ich nunmal ausschnitte ,..
zur lösung mit dem transparenten gif: kann ich da "durchklicken"? ne oder? weil man soll auch auf die dann im Hintergrund angeordneten objekte klicken...
gepostet vor 19 Jahre, 1 Monat von BLUESCREEN
Original von Drezil
zur lösung mit dem transparenten gif: kann ich da "durchklicken"? ne oder? weil man soll auch auf die dann im Hintergrund angeordneten objekte klicken...
Solange das Bild über dem Hintergrund liegt gibt es AFAIK keine Möglichkeit, da durchzuklicken.
gepostet vor 19 Jahre, 1 Monat von troopers
doch sehr woll das gibts das das nent sich image map ist zwar nicht die feine engliche aber es ist im html protokol möglich und afaik standart
sory wegen dem gedanken furtz, liegt wohl am essen das es heut zu sesongabschlus in meinem verein gab ^^
sory wegen dem gedanken furtz, liegt wohl am essen das es heut zu sesongabschlus in meinem verein gab ^^
gepostet vor 19 Jahre, 1 Monat von schokofreak
mittels javascript / DOM events ist es in JEDEM Browser möglich, durchzuklicken...
gepostet vor 19 Jahre, 1 Monat von BLUESCREEN
Original von troopers
doch sehr woll das gibts das das nent sich image map ist zwar nicht die feine engliche aber es ist im html protokol möglich und afaik standart
Von Rechtschreibung und Inhalt her komplett falsch...
Wenn er über sein eigentliches Bild ein anderes packt wird auch eine Imagemap einen Klick auf das vordere Bild nicht zu einem Klick auf das hintere machen. Das hat überhaupt nichts miteinander zu tun.
Original von schokofreak
mittels javascript / DOM events ist es in JEDEM Browser möglich, durchzuklicken...
Bist du sicher, dass er damit auch die Klickkoordinaten weitergeben kann?
Wenn ich mir das Bild in seinem Blogeintrag angucke, dann wird er das wahrscheinlich vorhaben.
gepostet vor 19 Jahre, 1 Monat von schokofreak
Mittels event listener findest raus, welches Bild angeklickt wurde.
Mittels MouseEvents / BildPos findest die genaue Position auf dem Bild raus.
In dem Falle geht es nicht einfach so direkt und bequem, aber es geht. Die grosse Frage ist nur: JS ja oder neiN`?
Mittels MouseEvents / BildPos findest die genaue Position auf dem Bild raus.
In dem Falle geht es nicht einfach so direkt und bequem, aber es geht. Die grosse Frage ist nur: JS ja oder neiN`?
gepostet vor 19 Jahre, 1 Monat von Drezil
oder ich lege die bilder da drüber und ncihts ist mehr klickbar, bis man per js-funktion wieder den dazugeschriebenen code löscht.
soweit kein prob ..
nur, wie kann ich z.B. nen viertel-kreis darstellen? oder ne 10*10-px ecke aus nem 30*30 px kreis?
css? wie genau? wird das von allen browsern untersützt? (also "moderne" browser .. kommt mir nit mit IE 5 verträgt das nicht)
soweit kein prob ..
nur, wie kann ich z.B. nen viertel-kreis darstellen? oder ne 10*10-px ecke aus nem 30*30 px kreis?
css? wie genau? wird das von allen browsern untersützt? (also "moderne" browser .. kommt mir nit mit IE 5 verträgt das nicht)
gepostet vor 19 Jahre, 1 Monat von Chojin
also nochmal: wozu viertelkreise?
willst du das der spieler nur in die eine richtung ziehen kann? dann wäre das ein grund.
Oder geht es darum wenn sich das ganze am rand einer karte befindet?
reg4rds
chojin
willst du das der spieler nur in die eine richtung ziehen kann? dann wäre das ein grund.
Oder geht es darum wenn sich das ganze am rand einer karte befindet?
reg4rds
chojin
gepostet vor 19 Jahre, 1 Monat von Krisch
Ich versteh nicht ganz, warum du bei der "transparentes Gif"-Lösung nicht einfach ein Div- (oder Img-) Element drüber legst und damit die Klicks auswertest.
gepostet vor 19 Jahre, 1 Monat von troopers
Krisch
sagt es in einem satz worauf ich mit meinem ersten post schon hinaus wolte einfach mal http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=image+map
anschauen gegebenfals mal posizion absolut anschauen auch wens ohne gehen könnte
BLUESCREEN
für dich hab ich dan noch nachfolgens auch wen ich erst nicht drauf eingehenn wollte
doch sehr woll das gibts das das nent sich image map ist zwar nicht die feine engliche aber es ist im html protokol möglich und afaik standart
Von Rechtschreibung und Inhalt her komplett falsch...
Wenn er über sein eigentliches Bild ein anderes packt wird auch eine Imagemap einen Klick auf das vordere Bild nicht zu einem Klick auf das hintere machen. Das hat überhaupt nichts miteinander zu tun.
bluescreen erlich gesagt wollte ich nicht weiter auf dich eingehen, da dein erstes kommentar "angif auf die rechtschreibung" mir persönlich eigentlich alles über dich sagte :roll:
da gehe ich nur auf die behauptung ein es währe falsch (dem ist nicht so)
serwol ist es möglich und schon lange standart die möglichkeit bilder zu üerlager wird seit langem mit dem baground image praktizirt :roll: und sehr wohl ist es darüber auch möglich in den hintergrund zu klicken wen auch indirekt
ach und ehe du sagst das läst sich nicht vergleiche oder enliches :
direkte kliks sind algemein nicht machbar es mus immer mit hilfe des a tags, eines ziels oder andrerer metoden gearbeitet werden genau we im topik genanten fall ohne ferschachteln geht nur weniges
sagt es in einem satz worauf ich mit meinem ersten post schon hinaus wolte einfach mal http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=image+map
anschauen gegebenfals mal posizion absolut anschauen auch wens ohne gehen könnte
BLUESCREEN
für dich hab ich dan noch nachfolgens auch wen ich erst nicht drauf eingehenn wollte
Original von BLUESCREEN
Original von troopers
doch sehr woll das gibts das das nent sich image map ist zwar nicht die feine engliche aber es ist im html protokol möglich und afaik standart
Von Rechtschreibung und Inhalt her komplett falsch...
Wenn er über sein eigentliches Bild ein anderes packt wird auch eine Imagemap einen Klick auf das vordere Bild nicht zu einem Klick auf das hintere machen. Das hat überhaupt nichts miteinander zu tun.
bluescreen erlich gesagt wollte ich nicht weiter auf dich eingehen, da dein erstes kommentar "angif auf die rechtschreibung" mir persönlich eigentlich alles über dich sagte :roll:
da gehe ich nur auf die behauptung ein es währe falsch (dem ist nicht so)
serwol ist es möglich und schon lange standart die möglichkeit bilder zu üerlager wird seit langem mit dem baground image praktizirt :roll: und sehr wohl ist es darüber auch möglich in den hintergrund zu klicken wen auch indirekt
ach und ehe du sagst das läst sich nicht vergleiche oder enliches :
direkte kliks sind algemein nicht machbar es mus immer mit hilfe des a tags, eines ziels oder andrerer metoden gearbeitet werden genau we im topik genanten fall ohne ferschachteln geht nur weniges
gepostet vor 19 Jahre, 1 Monat von woodworker
http://snippets.galaxy-news.de/javascript:draw
man ich wusste das ich den link irgend wo hatte
ps: erster treffer bei google mit dem query javascript draw circle
man ich wusste das ich den link irgend wo hatte
ps: erster treffer bei google mit dem query javascript draw circle
gepostet vor 19 Jahre, 1 Monat von Drezil
hum ... ich hatte bei google kein glück .. habs aber nur mit javascript circle bzw ellipse versucht ... :/
werd mir den code mal anschauen ...
ich setz im moment einzelne pixel per css (in ner java-script-schleife)
die Kreise sind z.B. sichtradien auf einer Karte. Wenn man nun auf der karte "zoomt" kann es vorkommen, dass man nur einen ausschnitt des ursprünglichen kreises sieht.
meine lösung von oben funzt ganz gut - nur es werden dabei je nach anzahl ca. 1-10mb html-code dynamisch vom javascript erzeugt die entsprechend lange zum interpretieren brauchen..
mein firefox hat in einem fall sogar schonmal wegen überlastung aufgegeben und ich erhängt ...
am liebsten hätte ich eine funktion, die ähnlich wie die in php_gd2 ist, aber einfach nur nen kreis über ein bild legt und mir nicht ein neues bild auf dem server berechnet (traffic & rechenkapazitätsgründe).
Oder ich werde noch nen alten Kumpel so lang bequatschen müssen, bis dr mir nen flash-modul für die karte schreibt (allerdings nur als alternative .. ich will kein flash-only game)
werd mir den code mal anschauen ...
ich setz im moment einzelne pixel per css (in ner java-script-schleife)
die Kreise sind z.B. sichtradien auf einer Karte. Wenn man nun auf der karte "zoomt" kann es vorkommen, dass man nur einen ausschnitt des ursprünglichen kreises sieht.
meine lösung von oben funzt ganz gut - nur es werden dabei je nach anzahl ca. 1-10mb html-code dynamisch vom javascript erzeugt die entsprechend lange zum interpretieren brauchen..
mein firefox hat in einem fall sogar schonmal wegen überlastung aufgegeben und ich erhängt ...
am liebsten hätte ich eine funktion, die ähnlich wie die in php_gd2 ist, aber einfach nur nen kreis über ein bild legt und mir nicht ein neues bild auf dem server berechnet (traffic & rechenkapazitätsgründe).
Oder ich werde noch nen alten Kumpel so lang bequatschen müssen, bis dr mir nen flash-modul für die karte schreibt (allerdings nur als alternative .. ich will kein flash-only game)
gepostet vor 19 Jahre, 1 Monat von Fornax
Also brauchst du den nicht ganz runden Kreis, damit er nicht aus der Karte raushängt? Kannst du denn da nicht ein DIV für die Karte erstellen, und (k.a. wie) ein Kreis reinzeichnen (Zentrum außerhalb vom DIV)? Das müsste doch eigentlich am Rand abgeschnitten werden, da es ja nicht mehr im DIV ist. Kannste ja mal ausprobieren...
gepostet vor 19 Jahre, 1 Monat von Kampfhoernchen
Ich glaube da spielt mein spezieller Freund, der IE 5, nicht mit
gepostet vor 19 Jahre, 1 Monat von Drezil
Original von Fornax
und (k.a. wie) ein Kreis reinzeichnen
und das war meine eigentliche frage: WIE mache ich den Kreis?
gepostet vor 19 Jahre, 1 Monat von Chojin
Darf ich mal ganz kurz anmerken, dass mir dieses Topic langsam auf die Nerven geht. Deshalb verzeihe man mir meine Ausdrucksweise im folgenden...
Wozu zum Teufel brauchst du Kreisausschnitte!
Hast du überhaupt schonmal über deine blöde Karte nachgedacht?
Wie positionierst du deine Sternchen?
Per Style-Position oder sind die mit Teil vom Hintergrundbild?
Also der Spieler ist bei dir nicht im Mittelpunkt sondern am Rand und sein "Sichtfeld" soll nur in dem relevanten Bereich sichtbar sein.
-> warum steckst du dein ganzes seltsames Universum nicht in einen Kontainer mit der Eigenschaft "overflow:hidden;" und machst den Sichtradius als normales Kreisbild mit der Position des Spielers... deine Sternchen legst du über das Bild mit dem Sichtradius.
(das funktioniert bei GoogleMaps also wird es bei dir auch funktionieren!)
Wenn du noch irgendwelche ernsthafte Hilfe haben willst, dann schlage ich vor du postest einen Link zu deiner Karte. Andernfalls wird es mir langsam zu blöd, dauernd zu raten was du eigendlich willst!
reg4rds
chojin
Wozu zum Teufel brauchst du Kreisausschnitte!
Hast du überhaupt schonmal über deine blöde Karte nachgedacht?
Wie positionierst du deine Sternchen?
Per Style-Position oder sind die mit Teil vom Hintergrundbild?
Also der Spieler ist bei dir nicht im Mittelpunkt sondern am Rand und sein "Sichtfeld" soll nur in dem relevanten Bereich sichtbar sein.
-> warum steckst du dein ganzes seltsames Universum nicht in einen Kontainer mit der Eigenschaft "overflow:hidden;" und machst den Sichtradius als normales Kreisbild mit der Position des Spielers... deine Sternchen legst du über das Bild mit dem Sichtradius.
(das funktioniert bei GoogleMaps also wird es bei dir auch funktionieren!)
Wenn du noch irgendwelche ernsthafte Hilfe haben willst, dann schlage ich vor du postest einen Link zu deiner Karte. Andernfalls wird es mir langsam zu blöd, dauernd zu raten was du eigendlich willst!
reg4rds
chojin
gepostet vor 19 Jahre, 1 Monat von Drezil
http://yzgyr.is-a-geek.com/mu/speed/login.php?user=Drezil&pass=testpass und dann unter observatorium
positioniert alles per style-position und das bg-pic ist nen form-submit, dass die koordinaten weitergibt, um zu zoomen, statt sich z..B. nen Plani anzuschauen
positioniert alles per style-position und das bg-pic ist nen form-submit, dass die koordinaten weitergibt, um zu zoomen, statt sich z..B. nen Plani anzuschauen
gepostet vor 19 Jahre, 1 Monat von Chojin
Danke! das ist doch schonmal sehr aufschlussreich! :roll:
Also ich würde den Sichtbereich als Bild machen und die Sterne drüber legen. Dadurch reduzierst du die Objekte schon einmal sehr stark.
Da da das ganze über den "Rand" von deiner Karte geht, kann deine Karte entweder ein Iframe ohne scrollbalken oder ein div mit der Eigenschaft style="overflow:hidden" sein, was den selben effekt hat.
#maparea {
overflow:hidden;
position: relative;
left:50%;
margin-left:-200px;
width: 400px;
height:300px;
border: 1px solid #BBBBBB;
}
#map {
position: absolute;
left:-200px;
top:-400px;
width: 600px;
height:1000px;
background: #000000 url(universum.gif) repeat top;
}
.stern {
position: absolute;
width: 3px;
height:3px;
background: #000000 url(stern1.gif) repeat top;
z-index:80;
}
Und dann halt die map so aufbauen:
Planet: Interstel
Planet: Evil Empire
Und dann halt noch den Sichtradius als Objekt einbauen (der kann ruhig über den sichtbaren bereich rausgehen) usw...
reg4rds
chojin
Also ich würde den Sichtbereich als Bild machen und die Sterne drüber legen. Dadurch reduzierst du die Objekte schon einmal sehr stark.
Da da das ganze über den "Rand" von deiner Karte geht, kann deine Karte entweder ein Iframe ohne scrollbalken oder ein div mit der Eigenschaft style="overflow:hidden" sein, was den selben effekt hat.
#maparea {
overflow:hidden;
position: relative;
left:50%;
margin-left:-200px;
width: 400px;
height:300px;
border: 1px solid #BBBBBB;
}
#map {
position: absolute;
left:-200px;
top:-400px;
width: 600px;
height:1000px;
background: #000000 url(universum.gif) repeat top;
}
.stern {
position: absolute;
width: 3px;
height:3px;
background: #000000 url(stern1.gif) repeat top;
z-index:80;
}
Und dann halt die map so aufbauen:
Planet: Interstel
Planet: Evil Empire
Und dann halt noch den Sichtradius als Objekt einbauen (der kann ruhig über den sichtbaren bereich rausgehen) usw...
reg4rds
chojin