Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 zu schreiben – Teil 5, Grafikzeichnung

Canvas selbst ist eine Grafik und kann direkt gezeichnet werden.
In Actionscript hat jedes Sprite eine Grafik.
In Html5 ist das Zeichnen einfacher die gleiche Leinwand, daher müssen wir jetzt zwei Probleme berücksichtigen:
1. Wie man die Grafiken in jedem Sprite zu unterschiedlichen Zeiten am selben Ort zeichnet
2, weil wir jetzt sind. Die Seite wird ständig aktualisiert, also wenn Wenn wir Grafiken zum Zeichnen verwenden, müssen diese auch ständig aktualisiert werden


Dann gehe ich immer noch davon aus, dass jede in Sprite gespeicherte Grafik nur einige Zeichenbefehle speichert. Beim Zeichnen dieser Zeichenbefehle werden sie alle gezeichnet die Leinwand
Also der Annahme zufolge benötige ich ein Array oder eine Klasse, um diese Zeichenbefehle zu speichern
Ich baue jetzt eine LGraphics-Klasse, die Zeichenanweisungen und eine Show-Methode enthalten sollte

function LGraphics(){  
    var self = this;  
    self.type = "LGraphics";  
    self.color = "#000000";  
    self.i = 0;  
    self.alpha = 1;  
    self.setList = new Array();  
    self.showList = new Array();  
}  
LGraphics.prototype = {  
    show:function (){  
        var self = this;  
        if(self.setList.length == 0)return;  
        //绘图  
    }  
}

Wenn ich zeichne, füge ich alle Zeichenanweisungen zu setList hinzu und rufe dann die Show-Methode auf, um zu zeichnen
Es gibt auch eine ShowList, die zum Speichern des Zeichenbereichs verwendet wird
Lösen wir das Problem, wie Anweisungen gespeichert werden
Methoden zu LGraphics hinzufügen

drawLine:function (thickness,lineColor,pointArray){  
        var self = this;  
        self.setList.push(function(){  
            LGlobal.canvas.beginPath();  
            LGlobal.canvas.moveTo(pointArray[0],pointArray[1]);  
            LGlobal.canvas.lineTo(pointArray[2],pointArray[3]);  
            LGlobal.canvas.lineWidth = thickness;  
            LGlobal.canvas.strokeStyle = lineColor;  
            LGlobal.canvas.closePath();  
            LGlobal.canvas.stroke();  
        });  
    },  
    drawRect:function (thickness,lineColor,pointArray,isfill,color){  
        var self = this;  
        self.setList.push(function(){  
            LGlobal.canvas.beginPath();  
            LGlobal.canvas.rect(pointArray[0],pointArray[1],pointArray[2],pointArray[3]);  
            if(isfill){  
                LGlobal.canvas.fillStyle = color;  
                LGlobal.canvas.fill();  
            }  
            LGlobal.canvas.lineWidth = thickness;  
            LGlobal.canvas.strokeStyle = lineColor;  
            LGlobal.canvas.stroke();  
        });  
        self.showList.push({type:"rect",value:pointArray});  
    },  
    drawArc:function(thickness,lineColor,pointArray,isfill,color){  
        var self = this;  
        self.setList.push(function(){  
            LGlobal.canvas.beginPath();  
            LGlobal.canvas.arc(pointArray[0],pointArray[1],pointArray[2],pointArray[3],pointArray[4],pointArray[5]);  
            if(isfill){  
                LGlobal.canvas.fillStyle = color;  
                LGlobal.canvas.fill();  
            }  
            LGlobal.canvas.lineWidth = thickness;  
            LGlobal.canvas.strokeStyle = lineColor;  
            LGlobal.canvas.stroke();  
        });  
        self.showList.push({type:"arc",value:pointArray});  
    }

Die drei Methoden bestehen darin, eine Linie, ein Rechteck und einen Kreis zu zeichnen
Weil der von mir gespeicherte Befehl eine Funktion ist
, also kann ich beim Zeichnen die Methode
leicht modifizieren

show:function (){  
    var self = this;  
    if(self.setList.length == 0)return;  
    var key;  
    for(key in self.setList){  
        self.setList[key]();  
    }  
}

Auf diese Weise wird die gesamte Klasse abgeschlossen In einer Weile fertig. Bitte sehen Sie sich den Quellcode an


Fügen Sie dann self.graphics = new LGraphics(); im Konstruktor von LSprite hinzu, und Sie können jederzeit zeichnen
Der Code ist wie folgt

backLayer = new LSprite();  
    addChild(backLayer);  
    //画一圆  
    backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");  
    //画一个矩形  
        backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");  
    //画一条线  
    backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);

Eigentlich gibt es einige Mängel, denn wenn die Maus zur Beurteilung auf das LSprite klickt, beurteile ich nur die im LSprite gespeicherte Bitmap usw. Wenn im LSprite ein Bild gezeichnet ist , es sollte auch auf Mausereignisse reagieren, wenn es angeklickt wird, daher ist es notwendig, den Klick zu beurteilen.
Tatsächlich ist es auch einfach, eine ismouseon-Methode zu LGraphics hinzuzufügen, um festzustellen, ob dies der Fall ist wird angeklickt

ismouseon:function(event,cood){  
        var self = this;  
        var key;  
        for(key in self.showList){  
            if(self.showList[key].type == "rect"){  
                if(event.offsetX >= self.showList[key].value[0] + cood.x && 
                event.offsetX <= self.showList[key].value[0] + cood.x + self.showList[key].value[2] &&   
                    event.offsetY >= self.showList[key].value[1] + cood.y && event.offsetY <= self.showList[key].value[1] + cood.y + self.showList[key].value[3]){  
                    return true;  
                }  
            }else if(self.showList[key].type == "arc"){  
                var xl = self.showList[key].value[0] + cood.x - event.offsetX;  
                var yl = self.showList[key].value[1] + cood.y - event.offsetY;  
                return xl*xl+yl*yl <= self.showList[key].value[2]*self.showList[key].value[2];  
            }  
        }  
          
        return false;  
    }

Die Größe des Zeichenbereichs wird in showList gespeichert. Jetzt senden Nützlich

init(80,"mylegend",800,480,main);  
  
  
var backLayer;  
function main(){  
    legendLoadOver();  
      
    backLayer = new LSprite();  
    addChild(backLayer);  
      
    //画一圆  
    backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");  
    //画一个矩形  
        backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");  
    //画一条线  
    backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);  
    //鼠标点击判断  
    backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);  
}  
  
  
function onmousedown(event){  
    alert("isclick");  
}

Das Obige ist die Verwendung einer ActionScript-ähnlichen Syntax zum Schreiben von HTML5 - Teil 5 Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!