사용자 마우스가 이동하면 팝업 프레임이 매우 일반적입니다. 이것은 HTML 요소를 다룰 때 간단하지만 HTML5 캔버스로 구성된 그래픽으로 처리 된 경우 캔버스는 캔버스에 얼마나 많은 그래픽을 그려도 캔버스가 사용 되므로이 방법은 더 이상 적용되지 않습니다. 전반적으로 하나. 그래픽 자체는 실제로 캔버스의 일부이므로 자바 스크립트 이벤트를 직접 추가 할 수 없습니다. 그러나 Web for Web에서는이 요구가 쉽게 알 수 있으며 장면은 다음과 같습니다.
이 장면은 Web 용 JSON 파일을 기반으로합니다 확장되었으며 내 필요를 충족시키는 토폴로지 편집기를 만나기 위해 사용자 정의 할 수 있습니다. 이 데모에서, 세 가지 유형의 폭탄 프레임 'Tips1.json', 'tips2.json', 'tips3.json'의 벡터 차트는이 벡터 편집기 (http : //www.hightopo. com. /demo/vector-editor/index.html)는 단순히 그려져 사용하기 쉽습니다. 위의 시나리오에서는 사용자가 마우스를 잔디 및 기타 물체로 이동할 때 팝 업 상자의 자세한 정보가 표시됩니다.
특정 구현은 다음과 같습니다.
준비ht (http://www.hightopo.com/)를 소개합니다. :) :
<스크립트 src = 'ht.js'> </script> datamodel = new ht.datamodel ();
HT는 HT 표준으로 정의 된 JSON 벡터 형식으로 사용자 정의 된 벡터 설명을 제공합니다. 여기에서 세 가지 형태의 JSON 팝 -UP 상자를 후속 통화를 위해 그림에 등록하십시오.
ht.default.setimage ( 'tips1', 'symbols /tips1.json');
그런 다음 대화식 효과가있는 객체를 얻으십시오. 객체의 속성 이름은 각 이미지에 대한 레이블 이름입니다.
// tree var time = { 'time1': true, 'tree2': true, 'tree3': true}; }; // Mountain Mountain = { 'Mountain'; 팝업 상자실제로, 팝 -UP 박스의 본질은 사용자 마우스가 움직일 때.
1. 숨겨진 노드 및 디스플레이는 폭탄 프레임의 효과를 달성 할 수 있습니다.
2. 마우스 위치의 변화에는 노드 위치의 변화가 동반됩니다.
3. 마우스가 다른 물체로 이동하면 노드의 텍스처도 변경됩니다.
4. 노드의 속성 값도 마우스의 위치에 따라 변경됩니다.
따라서 총알 프레임을 달성하려면 먼저 새 노드를 만들고 레벨을 '더 높은'으로 설정하면 장면 차트의 JSON 파일도 기존 달러에 의해 차단되지 않도록해야합니다.
ht.default.xhrload ( 'meadow.json', function (text) {const json = ht.default.parse (text); if (json.tital) document.title = json.title; deserialize (json); // 계층 적 데이터 모드를 설정합니다. ;; 'Higher');그런 다음 바닥 레이어에서 MouseMove 사건을 들으려면 마우스의 위치가 세 객체 위에 있는지 판단하고 객체 유형에 따라 노드 리 레이아웃으로 레이아웃 () 함수를 호출하십시오.
addeventListener ( 'mouseMove', function.s ( '2d.visible', false); var hoverdata = graphview.getDatat (e); pos = GraphView.getLogicalPoint (e); (! hoverdata) 반환 (tree [holddata.gettg ()]) {layout (node, pos, 'tips1');} else if (Grass [HoldData.getTg ()] {. tips2 ');} else if (mountain [holddata.gettg ()]) {Layout (Node, Pos,'tips3 ';}});});레이아웃 () 함수가 자세히 수행되는 것은 BOMB 프레임의 속성 값의 업데이트는 JSON 파일의 텍스트 속성을 바인딩하는 것입니다. func의 내용에는 다음과 같은 유형이 있습니다.
1. 함수를 직접 호출하고 관련 데이터를 전달하고 뷰 값을 확인하면 매개 변수 값, 즉 data, view.
2. 문자열 유형 :
sty@***에서 시작하여 data.getStyle (***) 값이 리턴되며, 이는 스타일의 속성 이름입니다.
attr@***의 시작 부분에서 data.getattr (***) 값이 반환됩니다. 여기서 ***는 attr의 속성 이름을 나타냅니다.
필드@***의 시작 부분에서 *** 값은 attr의 속성 이름을 나타냅니다.
위의 상황이 일치하지 않으면 문자열 유형은 데이터 객체의 함수 이름으로 데이터 *** (보기)로 직접 호출되며 리턴 값은 매개 변수 값으로 사용됩니다.
funce 속성 외에도 값 속성을 기본 값으로 설정할 수 있습니다 웹 데이터 바인딩 설명서 (http ://www.hightopo.pom/guide/guide/core/datamodel/htamodel-guide.html). 예를 들어, 여기에서 'tips1.json'파일에서 햇빛 값의 데이터 바인딩 결과는 다음과 같습니다.
텍스트 : {func : att@sunshine, value : sunlight value},레이아웃 () 함수의 소스 코드를 넣습니다.
함수 레이아웃 (Node, POS, Type) {Node.s ( '2d.visible', true (type) {node.setpositation (pos.x + node. getWidth ()/2, pos.y -node.getheigh ()/2); : '비 이슬 값 :'+ (pos.y/1000) .tofixed (2), 'love': ': 사랑 가치 : ***'});} else if (type == 'tips2') {노드 .SetPosition (pos.x, pos.y -node.getheight ()/2); x // 100)+'%'});} else if (type == 'tips3') {node.setposition (pos.x -node.getWidth ()/2, pos.y -node.getheigh ()/ 2); 노드. 클라우드 모바일마지막으로, 우리의 데모에는 HT가 구동하는 데이터 구성 요소의 디자인 아키텍처에서도 클라우드 모바일 애니메이션 효과가 있습니다. . HT 제공 HT가 제공합니다.
프레임 기반 메소드 사용자는 프레임 애니메이션 프레임 수와 간격 애니메이션 프레임의 간격 간격 매개 변수를 지정하여 애니메이션 효과를 제어합니다.
시간 기반 메소드 사용자는 지속적인 시간주기 내에서 애니메이션주기의 밀리 초만 지정하면됩니다.
자세한 내용은 웹을위한 HT를 참조하십시오.
여기서는 시간 기반 방법을 사용합니다.
var cloud.getDatabytag ( 'cloud'); .getPosition (). x + parent.getWidth ()/2cloud.getWidth ()/2; end == Round2 : round1; * v, py);}};
마지막으로, 참조를 위해 데모를 다시 입력하십시오.