Ankündigung

Einklappen
Keine Ankündigung bisher.

gestrichelte Linie am falschen Ort

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • gestrichelte Linie am falschen Ort

    Ich habe folgende Funktion, die eine "Schlange" aus Kreisen und Rechtecken zeichnen soll:
    Code:
    function paint() {
    
        // Snake zeichnen            
        for (i = this.snakeElements.length-1; i >= 0; i--) {
            // Kreis zeichnen
            this.context.fillStyle = 'red';
            this.context.beginPath();
            this.context.arc(this.snakeElements[i].x+(this.snakeElementWidth/2), this.snakeElements[i].y+(this.snakeElementHeight/2), this.snakeElementWidth/2, 0, 2*Math.PI);
            this.context.fill();
    
            if (i === 0 || i === this.snakeElements.length-1) {
                switch (this.snakeElements[i].direction) {
                    case 'R': this.snakeElements[i].x += this.speed;
                              break;
                    case 'L': this.snakeElements[i].x -= this.speed;
                              break;
                    case 'U': this.snakeElements[i].y -= this.speed;
                              break;
                    case 'D': this.snakeElements[i].y += this.speed;
                              break;
                }
            }                             
    
            var h = 0;
            var w = 0;
            var supx = 0;
            var supy = 0;
    
            // Rechteck zeichnen, wenn nicht Kopf
            if (i < this.snakeElements.length-1) {
                if (this.snakeElements[i+1].direction === 'R' || this.snakeElements[i+1].direction === 'L') {
                    h = 35;
                    w = this.snakeElements[i+1].x - this.snakeElements[i].x;
                    supx = 17;
                } else {
                    w = 35;
                    h = this.snakeElements[i+1].y - this.snakeElements[i].y;
                    supy = 17;
                }                    
    
                this.context.fillStyle = 'red';
                this.context.fillRect(this.snakeElements[i].x+supx, this.snakeElements[i].y+supy, w, h);
                this.context.save();  
    
                // Linie zeichnen
                this.context.setLineDash([6,6]);
                this.context.filter = 'blur(1px)';
                if (supx > 0) {
                    this.context.moveTo(this.snakeElements[i].x+17, this.snakeElements[i].y+17);
                    this.context.lineTo(this.snakeElements[i+1].x+17, this.snakeElements[i].y+17);
                } else {
                    this.context.moveTo(this.snakeElements[i].x+17, this.snakeElements[i].y+17);
                    this.context.lineTo(this.snakeElements[i].x+17, this.snakeElements[i+1].y+17);
                }                   
                this.context.stroke();
                this.context.restore();
    
                if (i === this.snakeElements.length-2 && i > 0 && (w === 0 || h === 0)) {
                    this.snakeElements.splice(this.snakeElements.length-1, 1);
                }                                        
            }
    
            // Schablone mit Augen über Kopfelement legen
            if (i === 0) {
                var img = new Image();
                switch(this.direction) {
                    case 'R': img.src = '../pictures/eyes_right.png';
                              break;
                    case 'L': img.src = '../pictures/eyes_left.png';
                              break;
                    case 'U': img.src = '../pictures/eyes_up.png';
                              break;
                    case 'D': img.src = '../pictures/eyes_down.png';
    
                              break;
                }
                this.context.drawImage(img, this.snakeElements[i].x, this.snakeElements[i].y, this.snakeElementWidth, this.snakeElementHeight);
            }
        }
    
        // Kollisionserkennung
        this.checkCollision();
    }
    Mit 'setLineDash()' möchte ich eine gestrichelte Linie zeichnen, die sich durch die Mitte der Schlange zieht. Das funktioniert mehr oder weniger. Das Problem ist, dass diese Linie zum Teil auch um die Kreise geht (siehe Bild, grüner Kreis).
    Woran kann das liegen?

  • #2
    Zusatz: wenn ich vor dem Aufrufen der Funktion 'setLineDash()' die Zeile "this.context.beginPath()" einfüge und vor 'this.context.stroke()' die Zeile "this.context.closePath()", wird das Problem behoben. Allerdings wechselt die Linie dann in Intervallen von gestrichelt zu durchgezogen und wieder zurück

    Kommentar


    • #3
      Hab den Fehler gefunden! Es ist natürlich unsinnig, 'closePath()' aufzurufen wenn die Linie nur in eine Richtung gehen soll

      Kommentar

      Lädt...
      X