Ja, das ist immer so, dass ohne weitere Maßnahmen ein mobiler Browser die Darstellung so zoomt, wie er es für richtig hält. Das kann man aber unterbinden, wie hier beschrieben:
Beiträge von Sempervivum
-
-
Mit Hilfe von Stackoverflow und der Doku von chart.js habe ich heraus gefunden, dass sich dein Vorhaben mit mehreren charts umsetzen lässt: Ein Linechart für die gelbe Linie und drei Scattercharts für die braunen Punkte. Ich habe mal eine Demo gemacht, Werte, Farben, Stärken der Punkte etc. kannst Du sicher selbst anpassen:
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <title>chart.js Multiple graphs</title> <meta charset="utf-8"> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script> <canvas id="myChart" width="400" height="400"></canvas> <script> var ctx = document.getElementById("myChart"); var scatterChart = new Chart(ctx, { type: 'line', data: { datasets: [{ label: 'Line Dataset', fill: false, data: [ { x: 0, y: 65 }, { x: 4, y: 59 }, { x: 100, y: 80 }, { x: 110, y: 81 }, { x: 125, y: 56 } ] }, { label: '2nd Scatter Dataset', type: 'scatter', data: [{ x: 60, y: 70 } ] }, { label: '3rd Scatter Dataset', type: 'scatter', data: [ { x: 60, y: 75 } ] }, { label: '4th Scatter Dataset', type: 'scatter', data: [ { x: 60, y: 80 } ] }] }, options: { scales: { xAxes: [{ type: 'linear', position: 'bottom' }] } } }); </script> </body> </html>
-
Denke, jetzt verstehe ich es. Ich werde es mir mal ansehen ...
-
-
Mal sehen, was ich davon bisher verstehe:
Die gelbe, gerade, horizontale Linie in dem Bild in deinem ersten Postion ist in Wirklichkeit ein Linegraph wie man ihn normaler Weise kennt und wie man ihn bei chart.js sieht.
Diesem Diagramm möchtest Du jetzt die braunen Punktwerte hinzu fügen?
-
Verstehe ich nicht. Dein Bild sieht ganz anders aus als das Beispiel von chart.js?
-
Zitat
Macht man das heute ohne """ ?
Ich war auch überrascht, dass das valide ist, aber offenbar ja. Mein VS-Code meckert das aber an und den hatte ich bisher für zuverlässig gehalten. Finde es aber selber mit Hochkommas übersichtlicher und besser lesbar.
-
Nein, ich würde nicht von OSM abraten, wenn es das liefert, was Du brauchst. Ich hatte selber schon daran gedacht, aber wegen des Overlays dachte ich, man braucht eine API. Das OVL soll sich ja beim Zommen und Pannen mit bewegen und dabei genau die Position auf der Karte behalten. Wie ich sehe, ist bei OSM auch eine Version mit Satellitenbildern in Arbeit.
-
BTW: Es muss nicht unbedingt immer Google sein. Vor einiger Zeit habe ich bei einem Projekt mitgemischt, wo wir Cesium eingesetzt haben. Das unterstützt ebenfalls HTML-Overlays:
-
Ich verstehe das so, dass beliebiges HTML in diesen Info-Fenstern möglich ist, das würde Buttons und Links einschließen. Um sicherzugehen, ob es nicht doch irgend welche Einschränkungen gibt, müsste man es testen.
-
Schau, ob dies ermöglicht, was Du dir vorstellst:
https://developers.google.com/maps/documenta…fowindows?hl=de
-
Hier ist die Doku für die Google-Maps-API. Damit müsstest Du dich als erstes vertraut machen.
https://developers.google.com/maps/documenta…/tutorial?hl=de
-
-
-
Paint erzeugt Bitmap-orientierte Grafikdateien. Nachteil dabei: Sie lassen sich nur eingeschränkt skalieren, abwärts mit geringem, aufwärts mit starkem Qualitätsverlust. Willst Du eine gute Qualität auch auf großen Bildschirmen musst Du eine große Grafikdatei bereit stellen mit entspr. großer Ladezeit.
Die Alternative sind vektororientierte Grafiken. Diese lassen sich ohne Qualitätsverlust skalieren und damit an die Größe des Browserfensters anpassen. Außerdem ist die Dateigröße, jedenfalls wenn die Grafik nicht zu komplex ist, kleiner als bei Bitmaps. Der wohl bekannteste kostenlose Editor für Vektorgrafiken ist Inkscape.
-
Interessante Aufgabe. Ich denke schon, dass das mit Javascript möglich ist.
ZitatFakt ist, das Spiel sollte letztendlich auch Internetfähig sein, also man sollte es schon zu zweit spielen können, auch wenn die Spielpartner nicht gerade nebeneinander sitzen.
Das ist eine gewisse Herausforderung, aber sicher auch machbar. Vor allem, wenn man ein Verfahren verwendet, bei dem man nicht wie bei einem Video die Bewegungen Frame-für-Frame überträgt, sondern nur die Anfangsparameter wie Stoßrichtung und Stoßstärke und die Bewegungen dann auf der anderen Seite neu berechnet.
ZitatAber alles erstmal Schritt für Schritt.
Das ist sicher zu empfehlen. Ich habe vor einiger Zeit mal den ersten Schritt getan und den elastischen Stoß programmiert:
HTML
Alles anzeigen<!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <body> <style> #bouncewrapper { width: 800px; height: 600px; position: relative; } .ball { width: 38px; height: 38px; border-radius: 20px; border: 2px solid black; position: absolute; } #ball2 { left: 200px; top: 150px; } </style> <div id="bouncewrapper"> <div class="ball" id="ball1"></div> <div class="ball" id="ball2"></div> </div> <script> var balls = [ { ele: $("#ball1"), x: 0, y: 0, radius: 20, speedx: 0, speedy: 0, factor: 10, mass: 1 }, { ele: $("#ball2"), x: 200, y: 150, radius: 20, speedx: 0, speedy: 0, factor: 10, mass: 1 } ]; var dragging = false, collided = false; function insideball(idx, x, y) { var centerx = balls[idx].x + balls[idx].radius; var centery = balls[idx].y + balls[idx].radius; var dx = centerx - x; var dy = centery - y; var dist = Math.sqrt(dx * dx + dy * dy); return dist < balls[idx].radius; } function collision() { var distx = balls[1].x - balls[0].x; var disty = balls[1].y - balls[0].y; var dist = Math.sqrt(distx * distx + disty * disty); if (dist < (balls[0].radius + balls[1].radius)) { if (!collided) { collided = true; manage_bounce(balls[0], balls[1]); //var xspeed1 = balls[0].speedx; //var yspeed1 = balls[0].speedy; //var speed1 = Math.sqrt(xspeed1 * xspeed1 + yspeed1 * yspeed1); //var speed2 = 0; //var angle1 = Math.atan(balls[0].speedy / balls[0].speedx); //var anglecoll1 = Math.atan(disty / distx); //var anglecoll = anglecoll1 - angle1; //var speed1new = speed1 * Math.abs(Math.sin(anglecoll)); //var speed2new = speed1 * Math.abs(Math.cos(anglecoll)); //if (anglecoll < 0) var angle1new = angle1 + anglecoll + Math.PI / 2; //else var angle1new = angle1 + anglecoll - Math.PI / 2; //var angle2new = angle1 + anglecoll; //balls[0].speedx = speed1new * Math.cos(angle1new); //balls[0].speedy = speed1new * Math.sin(angle1new); //balls[1].speedx = speed2new * Math.cos(angle2new); //balls[1].speedy = speed2new * Math.sin(angle2new); //console.log(dist, collided); } } } function manage_bounce(ball1, ball2) { dx = ball1.x - ball2.x; dy = ball1.y - ball2.y; collision_angle = Math.atan2(dy, dx); magnitude_1 = Math.sqrt(ball1.speedx * ball1.speedx + ball1.speedy * ball1.speedy); magnitude_2 = Math.sqrt(ball2.speedx * ball2.speedx + ball2.speedy * ball2.speedy); direction_1 = Math.atan2(ball1.speedy, ball1.speedx); direction_2 = Math.atan2(ball2.speedy, ball2.speedx); new_speedx_1 = magnitude_1 * Math.cos(direction_1 - collision_angle); new_speedy_1 = magnitude_1 * Math.sin(direction_1 - collision_angle); new_speedx_2 = magnitude_2 * Math.cos(direction_2 - collision_angle); new_speedy_2 = magnitude_2 * Math.sin(direction_2 - collision_angle); final_speedx_1 = ((ball1.mass - ball2.mass) * new_speedx_1 + (ball2.mass + ball2.mass) * new_speedx_2) / (ball1.mass + ball2.mass); final_speedx_2 = ((ball1.mass + ball1.mass) * new_speedx_1 + (ball2.mass - ball1.mass) * new_speedx_2) / (ball1.mass + ball2.mass); final_speedy_1 = new_speedy_1; final_speedy_2 = new_speedy_2; ball1.speedx = Math.cos(collision_angle) * final_speedx_1 + Math.cos(collision_angle + Math.PI / 2) * final_speedy_1; ball1.speedy = Math.sin(collision_angle) * final_speedx_1 + Math.sin(collision_angle + Math.PI / 2) * final_speedy_1; ball2.speedx = Math.cos(collision_angle) * final_speedx_2 + Math.cos(collision_angle + Math.PI / 2) * final_speedy_2; ball2.speedy = Math.sin(collision_angle) * final_speedx_2 + Math.sin(collision_angle + Math.PI / 2) * final_speedy_2; } function move() { balls.forEach(function (ball, idx) { ball.x += ball.speedx * ball.factor; ball.y += ball.speedy * ball.factor; ball.ele.css({ left: ball.x + "px", top: ball.y + "px" }); ball.factor *= 0.99; }); collision(); requestAnimationFrame(move); } $("#bouncewrapper").on("mousedown", function (e) { //var x = e.pageX - $(e.target).offset().left; //var y = e.pageY - $(e.target).offset().top; var x = e.pageX - $(this).offset().left; var y = e.pageY - $(this).offset().top; if (insideball(0, x, y)) { console.log(x, y, "inside"); dragging = true; balls[0].mousedx = x - balls[0].x; balls[0].mousedy = y - balls[0].y; balls[0].starttime = Date.now(); balls[0].startx = balls[0].x; balls[0].starty = balls[0].y; } else console.log(x, y, "outside"); }); $("#bouncewrapper").on("mousemove", function (e) { var x = e.pageX - $(this).offset().left; var y = e.pageY - $(this).offset().top; if (dragging) { balls[0].x = x - balls[0].mousedx; balls[0].y = y - balls[0].mousedy; balls[0].ele.css({ left: balls[0].x + "px", top: balls[0].y + "px" }) } }); $("#bouncewrapper").on("mouseup", function (e) { dragging = false; var deltatime = Date.now() - balls[0].starttime; balls[0].speedx = (balls[0].x - balls[0].startx) / deltatime; balls[0].speedy = (balls[0].y - balls[0].starty) / deltatime; balls[0].speed = Math.sqrt(balls[0].speedx * balls[0].speedx + balls[0].speedy * balls[0].speedy); balls[0].factor = 10; console.log(balls[0].speedx, balls[0].speedy); requestAnimationFrame(move); }); </script> </body> </html>
Den Ball links oben kann man durch Ziehen mit der Maus bewegen. Nach Loslassen rollt er weiter und wird entsprechend der Reibung langsamer. Und wenn man gut gezielt hat, trifft er den zweiten Ball.
Das mit dem Ziehen und Loslassen trifft die Vorgänge beim richtigen Billard noch nicht optimal. Auf Anhieb fällt mir aber keine bessere und einfache Lösung ein. Ich dachte daran, eine Queue zu zeichnen, wo man die Richtung mit der Maus durch Ziehen einstellt und durch schnellen Klick den Stoß auslöst, aber optimal wäre das auch nicht.
-
Zitat
Bekomme das leider nicht hin, 'content' entsprechende IDs zu geben
Das ist gar nicht nötig, weil #content ja das Ziel ist, wohin die Texte sollen und das ist immer das selbe. Wenn der Text jeweils im value-Attribut steht, wie in deinem Code, ist es ganz einfach:
Code<script type="text/javascript"> function changeContent(txt){ document.getElementById('content').innerHTML = txt; } </script> <div id="content">Das ist der aktuelle Text....</div> <input type="button" value="alternativer Text 1" onclick="changeContent(this.value);"/> <input type="button" value="alternativer Text 2" onclick="changeContent(this.value);"/> <input type="button" value="alternativer Text 3" onclick="changeContent(this.value);"/>
Wenn die Text etwas länger werden sollten, ist es eher zu empfehlen, sie in Variablen zu definieren und diese als Parameter an changeContent() zu übergeben.
-
Noch mal zu der Frage, warum es auf einmal funktioniert: Hast Du das Javascript auch nach dem HTML stehen, in das die Werte eingefügt werden?
-
Das ist ja jetzt mysteriös, dass es auf einmal funktioniert, ohne dass wir etwas wesentliches geändert haben. Aber OK.
BTW finde ich deine Frage, den API-Key zu verbergen, berechtigt. Ich habe mich häufig gefragt, warum man eine API mit einem Key absichert, wenn jeder ihn im Browser aus dem Javascript ablesen kann.
-
Das console.log einfügen, damit wir die Response in der Console sehen.