Share an example of the effect of pop-up box in HTML5

This article mainly introduces the pop-up box effect based on HTML5 Canvas. Friends who need it can refer to it

When the user moves the mouse, a pop-up box appears. Such a requirement is very common. This is simple when processing HTML elements, but if you are processing graphics composed of HTML5 Canvas, this method is no longer applicable, because Canvas uses another set of mechanisms. No matter how many graphics are drawn on Canvas, Canvas is the same overall. The graphics themselves are actually part of the Canvas and cannot be obtained separately, so it is impossible to directly add JavaScript events to a graphics. However, in HT for Web, this requirement is easily realized. The scenario is as follows:

This scene graph is based on the JSON file of HT for Web. You may have some questions about how to generate it. There is confusion about such a JSON file. In fact, this is based on the "HTML5 topology editor" (www.hightopo.com/demo/2deditor_20151010/HT-2D-Editor.html), which is small and complete. It is very easy to expand. Just customize the topology editor to meet my needs. Not only that, in this Demo, the vector images 'tips1.json', 'tips2.json', and 'tips3.json' of the three types of bullet boxes defined are through this vector editor (http://www.hightopo. com/demo/vector-editor/index.html), I drew it briefly and it is quite easy to use. In the above scenario, when the user moves the mouse into an object such as grass, a pop-up box will display its detailed information. Demo address: http://www.hightopo.com/demo/blog_meadow_20170605/index.html

The specific implementation is as follows:

Preparation work

Introduction to our HT (www.hightopo.com/):

<script src=&#39;ht.js&#39;></script>
dataModel = new ht.DataModel();
graphView = new ht.graph.GraphView(dataModel);
graphView.addToDOM();

HT provides a custom JSON format vector description form. The JSON vector format defined in the HT standard can also be registered and used as an image. HT's vector method saves space more than traditional formats and does not cause distortion when scaling. Click HT for Web for details. Here, three shapes of JSON pop-up boxes are registered as images for subsequent calls:

ht.Default.setImage('tips1', 'symbols/tips1.json');
ht.Default.setImage('tips2', 'symbols/tips2.json');
ht.Default.setImage('tips3', 'symbols/tips3.json');

Then obtain objects with interactive effects, where the attribute names in each object are the label names set for each primitive:

//树
var tree = {
     'tree1' : true,
     'tree2' : true,
     'tree3' : true
};
//草地
var grass = {
     'grass1' : true,
     'grass2' : true,
     'grass3' : true
 };
//山
var mountain = {
    'mountain': true
};

Pop-up box

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

1. Control the Node The hiding and displaying can achieve the effect of a pop-up box;

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

3. When the mouse moves to different objects, the Node The texture also changes accordingly;

4. The attribute values ​​in Node also change with the mouse position.

Therefore, to implement the pop-up box, you should first create a new Node and set its level to 'higher'. Before that, you need to deserialize the JSON file of the scene graph and deserialize it. The graphics elements are all set to the level 'lower' to prevent them from being blocked by existing graphics elements:

ht.Default.xhrLoad('meadow.json', function(text) {
    const json = ht.Default.parse(text);                   
    if(json.title) document.title = json.title;
    dataModel.deserialize(json);
    //设置层级
    dataModel.each(function(data){
        data.setLayer('lower');
    });
    //新建node
    var node = new ht.Node();                   
    node.s('2d.visible',false);
    node.setLayer('higher');
    dataModel.add(node);
})

Then, monitor the mousemove event on the underlying p to determine whether the mouse position is above the above three objects. According to the object type, call the layout() function to re-layout the Node:

graphView.getView().addEventListener('mousemove', function(e) {
     node.s('2d.visible',false);
     var hoverData = graphView.getDataAt(e);
     pos = graphView.getLogicalPoint(e);
     if(!hoverData) return;
     if(tree[hoverData.getTag()]){
        layout(node, pos, 'tips1');
     } else if (grass[hoverData.getTag()]) {
        layout(node, pos, 'tips2');
     } else if (mountain[hoverData.getTag()]) {
        layout(node, pos, 'tips3');
     }
});

What the layout() function does has been explained in detail before. Among them, the update of the attribute value in the pop-up box is to update the JSON file The text attribute is used for data binding. The binding format is very simple. Just replace the previous parameter value with an object with the func attribute. The content of func has the following types:

1 , function type, call the function directly and pass in the relevant Data and view objects. The parameter value is determined by the function return value, that is, func(data, view); call.

2. String type:

style@*** starts with, the data.getStyle(***) value is returned, where *** represents the attribute name of style.

ATTR@*** Starting at the beginning, the data.getattr (***) value is returned, where *** represents the attribute name of ATTR.

Field@*** Starting at the beginning, the data. *** value is returned, where *** represents the attribute name of ATTR.

If the above conditions are not matched, directly use the string type as the function name of the data object to call data***(view), and the return value will be used as the parameter value.

In addition to the func attribute, you can also set the value attribute as the default value. If the value obtained by the corresponding func is undefined or null, the default value defined by the value attribute will be used. For details, see HT for Web Data Binding Specification manual (http://www.hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html). For example, here, the result of data binding the sunshine value in the 'tips1.json' file is as follows:

"text": {
        "func": "attr@sunshine",
        "value": "阳光值"
      },

The source code of the layout() function is pasted below:

function layout(node, pos, type){
                node.s('2d.visible',true);
                node.setImage(type);                  
                if(type == 'tips1'){
                    node.setPosition(pos.x + node.getWidth()/2, pos.y - node.getHeight()/2);
                    node.a({
                        'sunshine'  :   '阳光值   :     '+ (pos.x/1000).toFixed(2),
                        'rain'  :   '雨露值   :     '+ (pos.y/1000).toFixed(2),
                        'love'  :   '爱心值   ：    ***'
                    });
                } else if(type == 'tips2'){
                    node.setPosition(pos.x , pos.y - node.getHeight()/2);
                    node.a({
                        'temp'  :   '温度   :     30',
                        'humidity'  :   '湿度   :     '+Math.round(pos.x/100)+'%'
                    });
                } else if(type == 'tips3'){
                    node.setPosition(pos.x - node.getWidth()/2, pos.y - node.getHeight()/2);
                    node.a({
                        'hight'  :   '海拔   :    ' + Math.round(pos.y)+'米',
                        'landscapes'  :   '地貌   :    喀斯特'
                    });
                }
            }

CloudMove

Finally, our Demo also has a cloud mobile animation effect. Under the design architecture of HT's data model-driven graphic components, animation can be understood as changing certain attributes from start to finish. The process of the initial value gradually changing to the target value. HT provides the animation function of ht.Default.startAnim. ht.Default.startAnim supports two methods of animation: Frame-Based and Time-Based:

Frame-Based方式用户通过指定frames动画帧数，以及interval动画帧间隔参数控制动画效果；

Time-Based方式用户只需要指定duration的动画周期的毫秒数即可，HT将在指定的时间周期内完成动画。

详情见HT for Web。

在这里我们用的是Time-Based方式，源码如下：

var cloud = dataModel.getDataByTag('cloud');
parent = dataModel.getDataByTag('mountain');
round1 = parent.getPosition().x - parent.getWidth()/2 + cloud.getWidth()/2;
round2 = parent.getPosition().x + parent.getWidth()/2 - cloud.getWidth()/2;
end = round1;
//云运动动画
var animParam = {
    duration: 10000,
    finishFunc: function() {
         end = (end == round1) ? round2 : round1;
         ht.Default.startAnim(animParam);
    },
    action: function(v, t) {
         var p = cloud.getPosition();
         cloud.setPosition(p.x + (end - p.x) * v , p.y);
     }
};
ht.Default.startAnim(animParam);

The above is the detailed content of Share an example of the effect of pop-up box in HTML5. For more information, please follow other related articles on the PHP Chinese website!