HTML5의 팝업 상자 효과 예 공유

이 글에서는 주로 HTML5 Canvas 기반의 팝업 상자 효과를 소개합니다. 필요하신 분들은 참고하시면 됩니다.

사용자가 마우스를 움직이면 팝업 상자가 나타나는 경우가 많습니다. 이는 HTML 요소를 처리할 때는 간단하지만, HTML5 Canvas로 구성된 그래픽을 처리하는 경우에는 Canvas가 다른 메커니즘을 사용하기 때문에 이 방법은 더 이상 적용되지 않습니다. Canvas에 얼마나 많은 그래픽을 그려도 Canvas는 전체적으로 동일합니다. 그래픽 자체는 실제로 Canvas의 일부이며 별도로 얻을 수 없으므로 JavaScript 이벤트를 그래픽에 직접 추가하는 것은 불가능합니다. 그러나 HT for Web에서는 이 요구 사항이 쉽게 구현됩니다.

이 장면 그래프는 HT for Web의 JSON 파일을 기반으로 합니다. 이러한 JSON 파일을 생성하는 방법에 대해 의구심이 생길 수 있습니다. 실제로 여기에는 이 작고 완전한 "HTML5 토폴로지 편집기"(www.hightopo.com/demo/2deditor_20151010/HT-2D-Editor.html)를 기반으로 내 요구 사항에 맞는 토폴로지 편집기를 쉽게 사용자 정의할 수 있습니다. . 뿐만 아니라, 이 Demo에서는 정의된 3가지 유형의 글머리 기호 상자 중 벡터 이미지 'tips1.json', 'tips2.json', 'tips3.json'이 이 벡터 편집기(http://www.hightopo)를 통해 제공됩니다. .com/demo/Vector-editor/index.html), 간략하게 그려봤는데 꽤 사용하기 쉽습니다. 위 시나리오에서 사용자가 잔디와 같은 개체 위로 마우스를 이동하면 팝업 상자에 자세한 정보가 표시됩니다. 데모 주소: http://www.hightopo.com/demo/blog_meadow_20170605/index.html

구체적인 구현은 다음과 같습니다.

Preparation

HT 소개(www.hightopo.com/):

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

HT는 다음과 같이 정의된 JSON 벡터 형식으로 사용자 정의 JSON 형식 벡터 설명 형식을 제공합니다. HT 표준을 준수하며, 이미지로도 등록하여 사용할 수 있습니다. HT의 벡터 형식은 기존 형식보다 공간을 더 많이 절약하고 크기 조정 시 왜곡이 발생하지 않습니다. 자세한 내용을 보려면 HT를 클릭하세요. 여기에서는 세 가지 모양의 JSON 팝업 상자가 후속 호출을 위한 이미지로 등록됩니다.

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

그런 다음 대화형 효과가 있는 개체를 가져옵니다. 여기서 각 개체의 속성 이름은 각 기본 요소에 설정된 레이블 이름입니다.

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

Pop -up box

사실 팝업박스의 핵심은 노드입니다. 사용자가 마우스를 안팎으로 움직일 때,

1. 노드 숨김과 표시를 제어하면 팝업 효과를 얻을 수 있습니다. -up 상자;

2. 노드의 변경이 동반됩니다.

3. 마우스가 다른 개체 위로 이동하면 노드의 질감도 변경됩니다. . 노드의 속성 값도 마우스 위치에 따라 변경됩니다.

따라서 팝업 상자를 구현하려면 먼저 새 노드를 생성하고 해당 레벨을 '높음'으로 설정해야 합니다. 그 전에 장면 그래프의 JSON 파일을 역직렬화하고 역직렬화된 프리미티브를 레벨로 설정해야 합니다. 기존 프리미티브에 의해 차단되는 것을 방지하기 위해 '낮음':

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

그런 다음 기본 p에서 mousemove 이벤트를 수신하고 마우스 위치가 위의 세 개체 위에 있는지 확인하고 개체 유형에 따라 레이아웃()을 호출합니다. 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');
     }
});

layout() 함수가 하는 일은 앞에서 자세히 설명했는데, 그 중 팝업 상자의 속성 값을 업데이트하는 것은 노드의 텍스트 속성을 데이터 바인딩하는 것입니다. JSON 파일 형식은 매우 간단합니다. func의 내용은 다음과 같습니다.

1. 함수를 직접 호출하고 관련 데이터를 전달합니다. view.Object의 경우 매개변수 값은 함수 반환 값, 즉 func(data, view);에 의해 결정됩니다.

2. 문자열 유형:

  style@***로 시작하면 data.getStyle(***) 값이 반환됩니다. 여기서 ***는 스타일의 속성 이름을 나타냅니다. ATTR@***의 시작 부분에는 data.getattr(***) 값이 반환됩니다. 여기서 ***는 ATTR의 속성 이름을 나타냅니다. Field@*** 처음부터 시작하여 데이터를 반환합니다. *** 값 중 ***은 ATTR의 속성 이름을 나타냅니다.

위의 조건이 일치하지 않는 경우, 데이터객체의 함수명을 문자열 형태로 직접 사용하여 data***(view)를 호출하고, 반환된 값이 매개변수 값으로 사용됩니다.

func 속성 외에도 value 속성을 기본값으로 설정할 수도 있습니다. 해당 func에서 얻은 값이 정의되지 않거나 null인 경우 value 속성에 정의된 기본값이 사용됩니다. 웹 데이터 바인딩 매뉴얼용 HT(http://www.hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html). 예를 들어 여기서 'tips1.json' 파일에 sunshine 값을 데이터 바인딩한 결과는 다음과 같습니다.

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

아래에 레이아웃() 함수의 소스 코드를 붙여넣습니다.

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'  :   '地貌   :    喀斯特'
                    });
                }
            }

Cloud Mobile

마지막으로, 데모에는 클라우드 이동 애니메이션 효과도 있습니다. HT의 데이터 모델 기반 그래픽 구성 요소의 디자인 아키텍처에서 애니메이션은 HT가 제공하는 특정 속성을 시작 값에서 목표 값으로 점진적으로 변경하는 과정으로 이해될 수 있습니다. .Default .startAnim 애니메이션 기능인 ht.Default.startAnim은 프레임 기반 및 시간 기반 애니메이션을 지원합니다:

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

위 내용은 HTML5의 팝업 상자 효과 예 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!