Realization box effect based on HTML5 Canvas

When the user mouse is moved, there is a pop -up frame. This demand is very common. This is simple when dealing with HTML elements, but if it is processed by the graphics composed of HTML5 Canvas, this method is no longer applicable, because Canvas uses another set of mechanisms. No matter how much graphics are drawn on Canvas, Canvas is a one overall. The graphics itself is actually part of CANVAS. It cannot be obtained alone, so it cannot directly add a JavaScript event to a figure. However, in HT for web, this demand is easy to realize, and the scene is as follows:

This scene is based on the JSON file of HT for Web. Maybe everyone has doubts about how to generate such a JSON file. In fact, this is based on this sparrows. /Demo/2Deditor_20151010/ht-2d-editor.html) is expanded, and it is easy to customize to meet the topology editor that meets my needs. Not only that, in this DEMO, the vector chart of the three types of bomb frames 'tips1.json', 'tips2.json', 'tips3.json' are through this vector editor (http://www.hightopo. COM/DEMO/VECTOR-EDITOR/Index.html) is simply drawn, and it is quite easy to use. In the above scenario, when the user moves the mouse into the grass and other objects, there will be a detailed information of the pop -up box to display it.

The specific implementation is as follows:

Introduce our ht (http://www.hightopo.com/):):

 <script src = 'ht.js'> </script> datamodel = new ht.datamodel (); Graphview = new ht.graph.graphview (datamodel); GraphView.addtodom ();

HT provides a customized vector description form in JSON format. The JSON vector format defined by HT standard can also be registered and used as a picture. HT vector mode saves space more than traditional formats. Learn about details. Here, register the three -shaped JSON pop -up box into pictures for subsequent calls:

 ht.Default.Setimage ('Tips1', 'Symbols/Tips1.json'); Age ('TIPS3', 'Symbols /tips3.json ');

Then obtain an object with interactive effects, the attribute names of the objects are the label name set for each image:

 // Tree var time = {'time1': true, 'tree2': true, 'tree3': true}; // grass varga grass = {'grass1': true, 'grass2': true, 'grass3': true }; // Mountain Var Mountain = {'mountain': true};

In fact, the essence of the pop -up box is a node. When the user mouse moves in,

1. Control the hidden and display of NODE can achieve the effect of the bomb frame;

2. The change of the mouse position is accompanied by the change of the node position;

3. When the mouse is moved into different objects, the texture on the node also changes;

4. The attribute value in NODE also changes with the position of the mouse.

Therefore, to achieve the bullet frame, first create a new Node and set the level to 'Higher'. Before that, the JSON file of the scene chart is also required Hierarchical 'LOWER' to prevent being blocked by the existing dollars:

 ht.Default.xhrload ('Meadow.json', Function (Text) {const json = ht.default.parse (text); if (json.tital) document.title = json.title; deserialize (json); // Set the hierarchical DataModel.each (function (data) {data.setlayer ('lower');}); // new node var node = new ht.Node (); node.s ('2d.visible', facese );; 'Higher'); datamodel.add (node);})

Then, to listen to the mousemove incident at the bottom layer, judge whether the position of the mouse is above the three objects, and call the layout () function to the node re -layout according to the object type:

 GraphView.getView (). AddeventListener ('MouseMove', Function (E) {node.s ('2d.visible', false); VAR HOVERDATA = GraphView.GetDataT (E); POS = GraphView.getLogicalpoint (e); if (! HoverData) Return; if (tree [holddata.gettg ()]) {layout (node, pos, 'tips1');} Else if (Grass [holddata.gettg ()]) {layout (node, pos, ' tips2 ');} else if (mountain [holddata.gettg ()]) {layout (node, pos,' tips3 ');}});});

What the layout () function is done in detail in detail. Among them, the update of the attribute value in the bomb frame is to bind the text property of the json file. The parameter value can be replaced with an object with a Func attribute. The content of the FUNC has several types:

1. Function type, directly call the function, and pass in the related data and view objects. The function return value determines the parameter value, that is, func (data, view); call.

2. String type:

Starting at Sty@***, the Data.GetStyle (***) value is returned, which is the attribute name of style.

At the beginning of ATTR@***, the Data.Getattr (***) value is returned, where *** represents the attribute name of ATTR.

At the beginning of field@***, the Data. *** value is returned, which *** represents the attribute name of ATTR.

If the above situations are not matched, the String type is directly called Data *** (View) as the function name of the Data object, and the return value is used as the parameter value.

In addition to the FUNC attribute, you can also set the value attribute as the default value. If the corresponding FUNC is obtained by UNDEFINED or NULL, the default value defined by the value attribute will be used. For details, it can be seen that the HT FOR Web data binding manual (HTTP:/ /www.hightopo.pom/guide/guide/core/datamodel/htamodel-Guide.html). For example, here, the results of the data binding of the sunlight value in the 'tips1.json' file are as follows:

 Text: {func: Attr@sunshine, value: sunlight value},

Put the source code of the layout () function:

 Function layout (node, pos, type) {node.s ('2D.Visible', TRUE); node.setImage (type); if (type == 'tips1') {node.Setpositation (pos.x + node. getWidth ()/2, POS.Y -NODE.Getheigh ()/2); node.a ({'sunshine': ': sunlight:'+ (pos.x/1000) .tofixed (2), 'rain' : 'Rain dew value:'+ (pos.y/1000) .tofixed (2), 'love': ': love value: ***'});} else if (type == 'tips2') {node.setposition (POS.X, POS.Y -Node.getheight ()/2); node.a ({'Temp': ': temperature: 30', 'humidity': ':'+math.round (pos.x// 100)+'%'});} else if (type == 'tips3') {node.setposition (pos.x -node.getwidth ()/2, pos.y -node.getheigh ()/2); node.a ({'hight': ':' + math.round (pOS.Y) + 'Mi', 'LandScapes': 'Landform: Karster'});}}

Finally, our DEMO also has a cloud mobile animation effect. Under the design architecture of the graphic component driven by the data model driven by HT, the animation can be understood as the process of gradually changing certain attributes from the starting value to the target value. HT provides provided by HT The animation function of ht.default.startanim, ht.default.startanim supports two ways: Frame-Based and Time-Based:

The Frame-Based method users control the animation effect by specifying the number of Frames animation frames, and the interval interval parameter of the Interval animation frame;

Time-based method users only need to specify the milliseconds of the animation cycle of Duration. HT will complete the animation within the specified time cycle.

For details, see HT for Web.

Here we use the time-based method. The source code is as follows:

 Var Cloud = DataModel.GetDataBytag ('Cloud'); Parent = DataModel.GetDataBytag ('MOUNTAIN'); Round1 = Parent.getposition (). X - th ()/2 + Cloud.getWidth ()/2; Round2 = Parent.getposition (). X + Parent.getWidth ()/2 -Cloud.getWidth ()/2; End = Round1; // Cloud Movement animation varparam = {Duration: 10000, Finishfunc: Funct: ION () {end = (END == Round1)? Round2: Round1; ht.default.startanim (animparam);}, action: function (v, t) {var p = cloud.getposition (); Cloud.Setposition ( px + (end -px ) * v, py);}}; ht.default.startanim (animparam);

Finally, put on our demo again for your reference.