Write html5 with the syntax of the imitation of ActionScript -- Article 5: Graphics plotting

 

Write html5 with the syntax of the imitation of ActionScript -- Article 5: Graphics plotting

 

Write html5 with the syntax of the imitation of the ActionScript-article 1,

Write html5 using the syntax similar to ActionScript -- Article 2: Use Sprite to implement animation

Compiling html5 using the syntax similar to ActionScript -- Article 3: mouse events and movement of game characters

Write html5 with the syntax of the imitation of ActionScript-Article 4: inheritance and simple rpg

 

Canvas itself is a Graphics, which can be directly drawn.

Each Sprite has a Graphics in actionscript, and Shape is easier to implement,

In Html5, all plotting is painted on the same canvas. Therefore, we need to consider two issues,

1. How to draw Graphics in each Sprite at different times in the same place

2. Because we are constantly refreshing pages, if we use Graphics to draw, it also needs to be refreshed constantly.

 

 

Now I still assume that each Sprite stores Graphics and only saves some drawing commands. All these drawing commands are painted on the canvas.

Then, according to the assumptions, I need an array or class to save these drawing commands.

I want to create an LGraphics class, which should contain drawing commands and show methods.

 

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;

// Drawing

}

}

 

 

When I plot, I add all the drawing commands to setList, and then call the show method to plot

There is also a showList used to save the drawing area, which will be known soon.

The following describes how to store commands.

Add method to 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 });

}

 

 

The three methods are to draw a line, a rectangle, and a circle.

Because the command I stored is a function

Therefore, you can call the method directly when drawing.

Therefore, slightly modify the show method.

 

Show: function (){

Var self = this;

If (self. setList. length = 0) return;

Var key;

For (key in self. setList ){

Self. setList [key] ();

}

}

 

 

This completes the drawing class. For the complete class, please check the source code later.

 

 

Then, add self. graphics = new LGraphics () in the LSprite constructor to plot the image at any time.

The Code is as follows:

 

BackLayer = new LSprite ();

AddChild (backLayer );

// Draw a circle

BackLayer. graphics. drawRect (1, "black", [20, 20,150, 20], true, "# cccccc ");

// Draw a rectangle

BackLayer. graphics. drawArc (2, "black", [100,100, 50, * Math. PI, false], true, "# FF0000 ");

// Draw a line

BackLayer. graphics. drawLine (2, "# FF0000", [200, 20,100, 50]);

 

 

In fact, there are also disadvantages, because when you click LSprite to judge, I only judge the bitmap saved in LSprite, if the LSprite shows a picture, When you click, you should also respond to mouse events, so you need to determine whether the clicked position is in the drawn Area

In fact, it is easy to add an ismouseon method to LGraphics to determine whether it is clicked.

 

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;

}

 

 

The showList stores the area size of the drawing, which is useful now.

 

Init (80," mylegend ", 800,480, main );

 

 

Var backLayer;

Function main (){

LegendLoadOver ();

BackLayer = new LSprite ();

AddChild (backLayer );

// Draw a circle

BackLayer. graphics. drawRect (1, "black", [20, 20,150, 20], true, "# cccccc ");

// Draw a rectangle

BackLayer. graphics. drawArc (2, "black", [100,100, 50, * Math. PI, false], true, "# FF0000 ");

// Draw a line

BackLayer. graphics. drawLine (2, "# FF0000", [200, 20,100, 50]);

// Click and judge

BackLayer. addEventListener (LMouseEvent. MOUSE_DOWN, onmousedown );

}

 

 

Function onmousedown (event ){

Alert ("isclick ");

}

 

 

Let's take a look at the results. If there is no effect, download the html5-supported browser.

Http://fsanguo.comoj.com/html5/jstoas04/index.html

Click the rectangle and circle above to see if the mouse event is accurate.

 

From lufy hut