Utiliser une syntaxe de type ActionScript pour écrire du HTML5 - Partie 5, Dessin graphique

Le canevas lui-même est un graphique et peut être dessiné directement.
En actionscript, chaque Sprite a un graphique. Je ne considérerai pas la forme pour l'instant.
En Html5, les dessins sont dessinés. la même toile, nous devons donc considérer deux problèmes maintenant,
1. Comment dessiner les graphiques dans chaque Sprite au même endroit à des moments différents
2, car nous sommes maintenant La page est constamment actualisée, donc si nous utilisons des graphiques pour dessiner, alors ils doivent également être constamment actualisés


Ensuite, je suppose toujours que chaque graphique stocké dans Sprite n'enregistre que certaines commandes de dessin. Lors du dessin de ces commandes de dessin, elles sont toutes dessinées. le canevas
Donc, selon l'hypothèse, j'ai besoin d'un tableau ou d'une classe pour enregistrer ces commandes de dessin
Je construis maintenant une classe LGraphics, qui doit contenir des instructions de dessin, et une méthode d'affichage

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

Lorsque je dessine, j'ajoute toutes les instructions de dessin à setList, puis j'appelle la méthode show pour dessiner
Il existe également une showList, qui est utilisée pour enregistrer la zone de dessin. Vous le saurez dans un instant
. Résolvons le problème de la façon de stocker les instructions
Ajouter des méthodes à LGraphics

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

Les trois méthodes consistent à tracer une ligne, un rectangle et un cercle
Parce que la commande que j'ai stockée est une fonction
, donc quand je dessine, je peux appeler directement la méthode
Donc, modifiez légèrement la méthode show

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

De cette façon, le cours de dessin sera terminé. terminé dans un moment. Veuillez consulter le code source


Ensuite, ajoutez self.graphics = new LGraphics(); dans le constructeur de LSprite, et vous pourrez dessiner à tout moment
Le code est comme suit

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

En fait, il y a quelques défauts, car lorsque la souris clique sur le LSprite pour juger, je ne juge que le bitmap etc. enregistré dans le LSprite s'il y a une image dessinée dans le LSprite. , il doit également répondre aux événements de la souris lorsqu'on clique dessus, il est donc nécessaire de juger du clic si la position est dans la zone de dessin
En fait, c'est aussi simple qu'il suffit d'ajouter une méthode ismouseon à LGraphics pour déterminer si c'est le cas. est cliqué

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

La taille de la zone de dessin est stockée dans showList. Maintenant, envoyez-la Utile

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

Ce qui précède consiste à utiliser une syntaxe de type ActionScript pour écrire du HTML5 - Partie 5. , Contenu de dessin graphique Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !