拓?fù)浣Y(jié)構(gòu)
拓?fù)浣Y(jié)構(gòu)圖.png
demo:
demo要用到的js lib包可以用ie瀏覽器在官網(wǎng)點(diǎn)擊鏈接下載
Jtopo lib包下載
html demo:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id='Jtopo'width="1000" height="1000" style="border: solid 1px #0000ff"></canvas>
</body>
<script type="text/javascript" src="jquery-1.9.0.js"></script>//引入jquery包
<script type="text/javascript" src="jtopo-0.4.8-min.js"></script>//引入JTopo包
<script src="testJTopo.js"></script>
</html>
testJtopo.js 代碼(來(lái)自官網(wǎng)的demo)：
$(document).ready(function(){
var canvas = document.getElementById('Jtopo');//獲取畫(huà)布
var stage = new JTopo.Stage(canvas);//獲取舞臺(tái)
//顯示工具欄
//showJTopoToobar(stage);
var scene = new JTopo.Scene(stage);//把舞臺(tái)添加到畫(huà)布
scene.background = '01.png';//畫(huà)布背景
var node = new JTopo.Node("Hello");//新節(jié)點(diǎn) 默認(rèn)test=hello
node.setLocation(409, 269);//節(jié)點(diǎn)位置
scene.add(node);//將節(jié)點(diǎn)添加到場(chǎng)景
node.mousedown(function(event){//設(shè)置鼠標(biāo)事件
if(event.button == 2){
node.text = '按下右鍵';
}else if(event.button == 1){
node.text = '按下中鍵';
}else if(event.button == 0){
node.text = '按下左鍵';
}
});
node.mouseup(function(event){
if(event.button == 2){
node.text = '松開(kāi)右鍵';
}else if(event.button == 1){
node.text = '松開(kāi)中鍵';
}else if(event.button == 0){
node.text = '松開(kāi)左鍵';
}
});
node.click(function(event){
console.log("單擊");
});
node.dbclick(function(event){
console.log("雙擊");
});
node.mousedrag(function(event){
console.log("拖拽");
});
node.mouseover(function(event){
console.log("mouseover");
});
node.mousemove(function(event){
console.log("mousemove");
});
node.mouseout(function(event){
console.log("mouseout");
});
});
