jTopo学习笔记1

一、宽高设置

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 = "图片路径" // 设置画布背景图片

如果：

var scene = new JTopo.Scene()

stage.add(scene)

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';// 文字居中（

'Top_Left', 'Top_Center', 'Top_Right', 'Middle_Left', '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");

 });