Ergebnis 1 bis 4 von 4
  1. #1
    salazar ist offline Mitglied
    registriert
    22-01-2016
    Ort
    Düsseldorf
    Beiträge
    25

    Question Kreis in Canvas zeichnen mit Unterbrechungen definiert durch Punkte auf dem Kreis

    Hi in die Runde,

    ich habe eine Frage. Es braucht wohl recht viel Mathe zur Lösung und ich komme hier aktuell auf keinen grünen Zweig. Im Moment nicht mal ansatzweise.
    Vielleicht kann mir einer von euch weiterhelfen?

    Das Ziel ist es in die Canvas einen Kreis zeichnen. Soweit kein Problem (https://goo.gl/sKwt58). Ja, der Weg ist komisch mit setPixel usw., aber das ist hier nun mal die Vorgabe. Also lineTo, moveTo, arc usw. fallen hierbei komplett raus.

    Jedoch möchte ich an die Funktion, die den Kreis zeichnet n Punkte (Punktpärchen für Start und Ende) übergeben, die "Unterbrechungen" der "Kreislinie" definieren. Klingt kompliziert, ist es auch. Deshalb anbei zwei Grafiken zur Veranschaulichung, weil mir das Erklären in diesem Fall gerade echt schwer fällt.

    Ich möchte von diesem Ergebnis hier:
    bsp1.png

    Zum Beispiel zu diesem Ergebnis hier kommen:
    bsp2.png

    In dem Beispielbild sind es 5 Punkte-Pärchen... ( P11, P12 ), ( P21, P22 ), ( P31, P32 ), ( P41, P42 ), ( P51, P52 ) ...die für Unterbrechungen sorgen.
    Es könnte aber auch der Fall eintreten, dass an die Funktion gar keine Punkte übergeben werden, oder 2 Punkte-Pärchen, oder 4 Punkte-Pärchen, oder 9 Punkte-Pärchen, oder X Punkte-Pärchen. Oder auch das sich Punkte-Pärchen überlagern und die Unterbrechung/Aussparung des Kreises dann entsprechend größer wird.

    Wäre für jede Hilfe sehr dankbar und freue mich von euch zu lesen.
    Geändert von salazar (08-07-2018 um 01:25 Uhr)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.662

    AW: Kreis in Canvas zeichnen mit Unterbrechungen definiert durch Punkte auf dem Kreis

    Muss das mit Punkten sein? Ich denk, das würde einfacher werden, wenn du statt dessen Winkelpaare übergeben würdest. Dann könntest du vor dem Zeichnen einfach prüfen, ob der aktuelle Winkel in einem "verbotenen" Bereich liegt.

    Bei den Punkten ist hald auch die Frage, wie genau das geht. Was ist, wenn der Punkt knapp neben dem Kreis liegt?

    PS: Warum verwendest du "| 0" anstatt Math.round()?

  3. #3
    salazar ist offline Mitglied
    registriert
    22-01-2016
    Ort
    Düsseldorf
    Beiträge
    25

    AW: Kreis in Canvas zeichnen mit Unterbrechungen definiert durch Punkte auf dem Kreis

    Hey, danke für deine Antwort. Winkelpaare wären auch möglich. Die Daten dafür sind vorhanden. Ich werde da mal drüber nachdenken.

    Zu deiner Frage. Ich habe nicht nur einmal gelesen das sich das positiv auf die Performance auswirkt.

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.662

    AW: Kreis in Canvas zeichnen mit Unterbrechungen definiert durch Punkte auf dem Kreis

    Ja, das ist ca. 10% schneller. Aber es lohnt sich nicht, dafür die Lesbarkeit des Codes zu reduzieren, da es beides sehr schnell durchgeführt wird:
    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Fenstertitel</title>
    <script type="text/javascript">
    
    function round(v){
    	return Math.round(v);
    }
    function bit(v){
    	return (v + 0.5) | 0;
    }
    
    var r = 1000000000;
    
    var start = performance.now();
    for (var i = 0; i < r; i += 1){
    	round(Math.random() * 100);
    }
    console.log("round", performance.now() - start);
    
    var start = performance.now();
    for (var i = 0; i < r; i += 1){
    	bit(Math.random() * 100);
    }
    console.log("bit", performance.now() - start);
    
    </script>
    <style type="text/css"></style>
    </head>
    <body>
    inhalt
    </body>
    </html>
    - schau' dir r genau an...

Ähnliche Themen

  1. [FRAGE] Canvas Text als Kreis wie bei einem Ring
    Von dissy555 im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 28-01-2017, 10:23
  2. [HOW-TO/TUTORIAL] Kreis zeichnen mit CSS
    Von mikdoe im Forum CSS und (X)HTML
    Antworten: 34
    Letzter Beitrag: 18-12-2014, 08:40
  3. Kreis malen
    Von Filemon im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 12-09-2008, 17:31
  4. Kreis berechnen
    Von Batou im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 16-08-2004, 23:56
  5. Kreis zeichnen :P
    Von maestr0 im Forum Grafik
    Antworten: 4
    Letzter Beitrag: 14-05-2003, 13:41

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •