一、宽高设置
1、<canvas id="canvas" ></canvas> 默认可设置的范围 （300，150）
2、<canvas id="canvas" width="600" height="600" ></canvas> 调整为可设置的范围（600，600）#canvas {width: 600px; height: 700px; }设置style后会将画布按照宽高比例缩放例如2、设置后宽度 600:600px 高度600:700px
二、初始画板
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
var scene = new JTopo.Scene(stage); // 创建一个场景对象
scene.background = "图片路径" // 设置画布背景图片
scene.centerAndZoom(); // 居中显示(保证整个画布中的内容居中显示)三、添加节点
var node1 = new JTopo.Node("Hello1"); // 创建一个节点 node1.setLocation(100,400); // 设置节点坐标位置
node1.setImage('./check.png'); // 设置图片
node1.setSize(100, 60); // 节点尺寸
node1.rotate = Math.random(); // 旋转角度
node1.scaleX = Math.random(); // 水平方向的缩放
node1.scaleY = Math.random(); // 垂直方向的缩放
node1.alpha = Math.random(); // 透明度
node1.fillColor = '0, 0, 0'; // 填充背景颜色
node1.text = '微软雅黑'; // 文字
node1.textPosition = 'Middle_Center';// 文字居中（
, 'Middle_Right', 'Bottom_Left', 'Bottom_Center', 'Bottom_Right'
）
node1.textOffsetX = -30; // 文字左偏
node1.textOffsetY = 8; // 文字向下偏移8个像素
node1.fontColor = '100,255,0';
node1.font = '14px 微软雅黑'; // 字体
node1.borderRadius = 5; // 圆角
node1.borderWidth = 2; // 边框的宽度
node1.borderColor = '255,255,255'; //边框颜色
node1.showSelected = false; // 不显示选中矩形
router2.alarm = "1 W"; // 个人观点：圆形节点不太好使
router2.alarmColor = '0,255,0';
rootNode.alarmAlpha = 0.9;
scene.add(node1); // 添加节点到画布
四、节点事件
node.mousedown(function(event){ 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 = '松开右键';
}else if(event.button == 1){
node.text = '松开中键';
}else if(event.button == 0){
node.text = '松开左键';
}
});
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");
});
