Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 zu schreiben – Teil 5, Grafikzeichnung-H5-Tutorial-php.cn

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

黄舟

Freigeben： 2017-01-17 16:44:30

Original

1393 Leute haben es durchsucht

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;  
        //绘图  
    }  
}

Nach dem Login kopieren

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});  
    }

Nach dem Login kopieren

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]();  
    }  
}

Nach dem Login kopieren

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]);

Nach dem Login kopieren

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;  
    }

Nach dem Login kopieren

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");  
}

Nach dem Login kopieren

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 (m.sbmmt.com)!