Beiträge von Sempervivum

  • Id mit Positions Angaben auslesen

    Da wirst Du wohl an ein wenig Mathe nicht vorbei kommen:

    Code
    // xCenter und yCenter sind die Koordinaten des Mittelpunktes der Darts-Scheibe
// x und y sind die Koordinaten des Mittelpunktes des Fadenkreuzes
var deltaX = x - xCenter, deltaY = y - yCenter;
var dist = hypot(deltaX, deltaY); // der Abstand
var angle = asin(deltaY / dist); // der Winkel im Bogenmass
var deg = angle / Math.PI * 180; // der Winkel in Grad

    (ungetestet). Aus dem Winkel und dem Abstand ist es dann kein Problem, das Feld zu berechnen.

  • Id mit Positions Angaben auslesen

    Ja, bei SVG ist das schon anders. Ich sehe jedoch noch ein ganz anderes Problem:

    Ich kenne die Spielregeln von Darts leider nicht, aber sicherlich musst Du doch prüfen, ob der Pfeil ein bestimmtes Feld getroffen hat bzw. ein bestimmtes Kreissegment. Da ein solches Kreissegment jedoch als Element gar nicht existiert, sondern nur der ganze Kreis, kannst Du, wenn Du die Koordinaten des ganzen Elementes prüfst, nur heraus bekommen, ob der ganze Kreis bzw. das umschließende Quadrat getroffen wurde und nicht ein einzelnes Segment.

    Jedenfalls, wenn ich deinen Code richtig interpretiere, ich habe nicht bis ins letzte Detail hinein geschaut.

  • Id mit Positions Angaben auslesen

    Mit jCanvas kannst Du ganz leicht Kreisbögen zeichnen:

    https://projects.calebevans.me/jcanvas/docs/arcs/

    gleich das erste Beispiel.

    Ich finde jedoch nichts, wie man feststellen kann, ob ein Koordinatenpaar innerhalb eines solchen Kreisbogens liegt. Da ist wohl auch angesagt, es selbst auszurechnen. Wenn es ausreicht, die Farbe eines Feldes zu ermitteln, kann man das jedoch in Canvas sehr leicht, weil man Zugriff auf die RGB-Werte hat.

  • Id mit Positions Angaben auslesen

    Zitat

    Da ist so wieso Ende für mich. Bin eigentlich ganz gut in Mathe , doch bei Kreis ,Dreieck und Winkel und co hört es leider auf bei mir.

    Ich kann mich dunkel erinnern, dass Du mal irgend eine Aufgabe mit Winkelfunktionen selber gelöst hattest.

    Zitat

    Wäre es eigentlich einfacher die ganze Dartscheibe mit Canvas zu machen ?

    Da bin ich mir gar nicht mal sicher. Ich habe früher mal mit jCanvas solche Kreissegmente gezeichnet und das wurde ganz gut unterstützt und war relativ einfach. Nicht jedoch die Prüfung, ob ein Koordinatenpaar in einer Form liegt. Außer bei Klick, aber das geht ja bei dem Fadenkreuz nicht.

    Auf jeden Fall hat Canvas den Nachteil, dass es nicht verlustfrei skaliert werden kann.

  • Id mit Positions Angaben auslesen

    PS: Ich sehe gerade, dass die Felder keine Elemente sind, sondern dass Du das mit Dasharray gelöst hat. Dann wird das mit checkIntersection wohl nicht gehen.

    Man könne es aber sicherlich händisch berechnen: Zunächst den Abstand vom Mittelpunkt und dann den Winkel. Daraus könnte man dann sicher berechnen, welches Feld getroffen wurde.

  • Mehrere RSS Feeds kombinieren und in einem DIV ausspielen

    Zunächst mal: Ich kann nur davor warnen, auf solch einen externen Service zu bauen. Ich unterstütze da einen Webmaster, der sich ebenfalls mit solchen Newsfeeds befasst und wir hatten schon zwei Mal die Situation, dass solch ein Dienst eingestellt wurde und wir auf einen anderen umstellen mussten.

    Der Grund, warum das bei dir nicht funktioniert ist, dass Du mit der Initialisierung des Owlcarousel warten musst, bis beide Feeds geladen sind. So funktioniert es:

  • jQuery: Click events bei verschiebbaren Objekten

    Mein Vorschlag: Das selbe Verfahren wie beim Button anwenden: Prüfen, ob die Klasse, die das Dragging anzeigt, nicht vorhanden ist und abhängig davon das Wechseln der Container durchführen:

    https://codepen.io/Sempervivum/pen/rXYzba

    BTW: Elegant, das Wechseln der Elemente. Hast Du das selber entwickelt?

  • bild bei mouse over drehen

    Zitat

    Bei der alten Version geht die Drehung auch auf dem Smartphone ... wenn man auf das Logo tippt, dreht es sich wie ein Propeller, solange bis man auf einen anderen Platz tippt.

    Tatsächlich, ich bin überrascht! Geht mit der neuen Version genau so gut:

    http://webentwicklung.ulrichbangert.de/spinner.html

    Getestet mit Samsung-Browser und Chrome auf Android.

    Die Browserentwickler haben da eine brauchbare Übersetzung des hover nach touch gefunden.

  • bild bei mouse over drehen

    Zitat

    Kann man mit Flex-direction auch die Anzeige für Smartphone Landscape anderst gestalten wie für Portrait?

    Ja, Du brauchst dazu eine geeignete Mediaquery, die Orientierung des Bildschirms kannst Du abfragen und entsprechend flex-direction festlegen:

    https://wiki.selfhtml.org/wiki/CSS/Media_Queries#orientation

    Browsersupport scheint aber nicht so gut zu sein, für Apple-Geräte gar nicht, vielleicht besser mit Javascript abfragen.

  • bild bei mouse over drehen

    Zitat

    ich habe es jetzt mit flex versucht, aber das kommt auf dem Smartphone nicht so richtig (die icones kommen in einer Spalte neben dem Logo und diese Spalte ist dann höher wie das Logo).

    Deshalb habe ich die icones mal vorläufig unter das Logo gesetzt ... das sieht eigentlich ganz gut aus und ist auch auf dem Smartphone ok.

    Das ist ein gängiges Problem, dass die Desktop-Ansicht auf dem Smartphone weniger gut aussieht. Du kannst jedoch mit einer Mediaquery abhängig von der Fensterbreite problemlos zwischen beiden Darstellungen umschalten indem Du flex-direction änderst.

    Was die Drehung betrifft, so findet sie ja nur beim Hover statt und das gibt es auf dem Smartphone nicht.

  • Accordion

    Das Problem kenne ich, ich hatte es mal bei einem mehrstufigen Menü, das ich mit dem selben Verfahren gebaut hatte.

    Lösung, indem Du, wenn das Kind-Akkordeon aufgeklappt wird, die Höhe des Eltern-Akkordeons korrigierst:

    Code
          panel.style.maxHeight = panel.scrollHeight + "px";
      var parent = this.parentNode;
      if (parent.classList.contains("panel")) {
        parent.style.maxHeight = (parent.scrollHeight + panel.scrollHeight) + "px";
      }

    https://jsfiddle.net/Sempervivum/gkzqvmf7/16/