Write html5 using the syntax similar to ActionScript-Article 6 TextField and input box

Source: Internet
Author: User

 

Write html5 using the syntax similar to ActionScript-Article 6 TextField and input box

 

 

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

 

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

 

I. Comparison

1. html5

First, let's look at the text display in the html5 canvas.

 

Var canvas = document. getElementById ("myCanvas ");

Var context = canvas. getContext ("2d ");

Context. font = "40pt Calibri ";

Context. fillStyle = "# 0000ff ";

Context. fillText ("text test! ", 50,150 );

 

The input box in html does not need to be added. The input tag is required.

 

<Input type = "text" id = "myTextbox"/>

 

2. In the

 

// Text display

Var txt: TextField = new TextField ();

Txt. text = "text test! ";

Txt. x = 50;

Txt. y = 50;

AddChild (txt );

// Input box

Var txt: TextField = new TextField ();

Txt. type = TextFieldType. INPUT;

Txt. x = 50;

Txt. y = 50;

AddChild (txt );

 

2. Compile the code after the js class library

 

// Text display

Var txt = new LTextField ();

. Txt. x = 100;

Txt. text = "TextField test ";

AddChild (txt );

// Input box

Var txt1 = new LTextField ();

Txt1.x = 100;

Txt1.y = 50;

Txt1.setType (LTextFieldType. INPUT );

AddChild (txt1 );

 

3. Implementation Method

Text display is very simple. You only need to create an LTextField class and a show method to function LTextField (){

 

Var self = this;

Self. objectindex = ++ LGlobal. objectIndex;

Self. type = "LTextField ";

Self. texttype = null;

Self. x = 0;

Self. y = 0;

Self. text = "";

Self. font = "UTF-8 ";

Self. size = "11 ";

Self. color = "#000000 ";

Self. textAlign = "left ";

Self. textBaseline = "middle ";

Self. lineWidth = 1;

Self. stroke = false;

Self. visible = true;

}

 

 

LTextField. prototype = {

Show: function (cood ){

If (cood = null) cood = {x: 0, y: 0 };

Var self = this;

If (! Self. visible) return;

 

 

LGlobal. canvas. font = self. size + "pt" + self. font;

LGlobal. canvas. textAlign = self. textAlign;

LGlobal. canvas. textBaseline = self. textBaseline;

LGlobal. canvas. lineWidth = self. lineWidth;

 

 

If (self. stroke ){

LGlobal. canvas. strokeStyle = self. color;

LGlobal. canvas. strokeText (self. text, parseFloat (cood. x) + parseFloat (self. x ),

ParseFloat (cood. y) + parseFloat (self. y) + parseFloat (self. size ));

} Else {

LGlobal. canvas. fillStyle = self. color;

LGlobal. canvas. fillText (self. text, parseFloat (cood. x) + parseFloat (self. x ),

ParseFloat (cood. y) + parseFloat (self. y) + parseFloat (self. size ));

}

}

}

 

 

The code is not hard to understand, that is, when you call the show method, you just need to draw it on the canvas,

The key is the input box. In html, the input box is a label. How can I draw this label on the canvas? Or can canvas be directly input into a real box?

I am not quite sure about this. If you know it, I hope you can tell me,

Let me talk about my practice now. When textField is input, I first draw a rectangular box and then use div to display the textbox directly in the corresponding position.

At first, only the following code is available in my html.

 

<! DOCTYPE html>

<Html>

<Head>

<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">

<Title> test-TextField simulation </title>

<Script type = "text/javascript" src = ".../legend. js"> </script>

<Script type = "text/javascript" src = "./js/Main. js"> </script>

</Head>

<Body>

<Div id = "mylegend"> reading the page ...... </Div>

</Body>

</Html>

 

Then, use javascript to write a canvas and a textbox for preparation.

 

LGlobal. object = document. getElementById (id );

LGlobal. object. innerHTML = '<div id = "' + LGlobal. id + '_ inittxt "style =" position: absolute; margin: 0px 0px 0px 0px; width:' + width + 'px; height: '+ height + 'px; "> reading data ...... </Div> '+

'<Div style = "position: absolute; margin: 0px 0px 0px 0px; z-index: 0;"> <canvas id = "' + LGlobal. id + '_ canvas "> your browser does not support HTML5 </canvas> </div>' +

'<Div id = "' + LGlobal. id + '_ InputText "style =" position: absolute; margin: 0px 0px 0px 0px; z-index: 10; display: none; "> <input type =" text "id =" '+ LGlobal. id + '_ InputTextBox "/> </div> ';

 

 

LGlobal. canvasObj = document. getElementById (LGlobal. id + "_ canvas ");

LGlobal. inputBox = document. getElementById (LGlobal. id + '_ inputtext ');

LGlobal. inputTextBox = document. getElementById (LGlobal. id + '_ InputTextBox ');

LGlobal. inputTextField = null;

 

First, hide textbox. Then, when you click the rectangle box that I have drawn, show it to the rectangle box, and then click somewhere else, assign input content to textField and hide textbox

The specific practice is not to mention. The following is the complete LTextField code, or you can right-click to view the complete code function LTextField (){

 

Var self = this;

Self. objectindex = ++ LGlobal. objectIndex;

Self. type = "LTextField ";

Self. texttype = null;

Self. x = 0;

Self. y = 0;

Self. text = "";

Self. font = "UTF-8 ";

Self. size = "11 ";

Self. color = "#000000 ";

Self. textAlign = "left ";

Self. textBaseline = "middle ";

Self. lineWidth = 1;

Self. stroke = false;

Self. visible = true;

}

 

 

LTextField. prototype = {

Show: function (cood ){

If (cood = null) cood = {x: 0, y: 0 };

Var self = this;

If (! Self. visible) return;

If (self. texttype = LTextFieldType. INPUT ){

Self. inputBackLayer. show ({x: self. x + cood. x, y: self. y + cood. y });

If (LGlobal. inputBox. name = "input" + self. objectindex ){

LGlobal. inputBox. style. marginTop = (self. y + cood. y) + "px ";

LGlobal. inputBox. style. marginLeft = (self. x + cood. x) + "px ";

}

}

LGlobal. canvas. font = self. size + "pt" + self. font;

LGlobal. canvas. textAlign = self. textAlign;

LGlobal. canvas. textBaseline = self. textBaseline;

LGlobal. canvas. lineWidth = self. lineWidth;

 

 

If (self. stroke ){

LGlobal. canvas. strokeStyle = self. color;

LGlobal. canvas. strokeText (self. text, parseFloat (cood. x) + parseFloat (self. x ),

ParseFloat (cood. y) + parseFloat (self. y) + parseFloat (self. size ));

} Else {

LGlobal. canvas. fillStyle = self. color;

LGlobal. canvas. fillText (self. text, parseFloat (cood. x) + parseFloat (self. x ),

ParseFloat (cood. y) + parseFloat (self. y) + parseFloat (self. size ));

}

},

SetType: function (type ){

Var self = this;

If (self. texttype! = Type & type = LTextFieldType. INPUT ){

Self. inputBackLayer = new LSprite ();

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

Self. inputBackLayer. addEventListener (LMouseEvent. MOUSE_DOWN, function (){

If (self. texttype! = LTextFieldType. INPUT) return;

LGlobal. inputBox. style. display = "";

LGlobal. inputBox. name = "input" + self. objectindex;

LGlobal. inputTextField = self;

LGlobal. inputTextBox. value = self. text;

});

} Else {

Self. inputBackLayer = null;

}

Self. texttype = type;

},

MouseEvent: function (event, type, cood ){

If (cood = null) cood = {x: 0, y: 0 };

Var self = this;

If (self. inputBackLayer = null) return;

Self. inputBackLayer. mouseEvent (event, type, {x: self. x + cood. x, y: self. y + cood. y });

}

}

 

 

 

 

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

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

Click the input box. the textbox is automatically displayed. Click other places after the input, and the textbox disappears automatically.


 

From lufy hut

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.