• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Kreis in Canvas zeichnen mit Unterbrechungen definiert durch Punkte auf dem Kreis

S

salazar

New member
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? :confused:

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.
 
Zuletzt bearbeitet:
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()?
 
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.
 
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...
 
Ich bin auch ein Freund von lesbarem Code, aber in diesem Fall wollte/musste ich alles rauskitzeln, da hier schon sehr viel berechnet und gerundet wird. Extrem viel.
Danke für dein schönes Beispiel mit dem Vergleich!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben