jTopo學習筆記1

一、寬高設定

1、預設可設定的範圍 （300，150）

2、調整為可設定的範圍（600，600）

#canvas 設定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)else if(event.button == 1)else if(event.button == 0)

});

node.mouseup(function(event)else if(event.button == 1)else if(event.button == 0)

});

node.click(function(event));

node.dbclick(function(event));

node.mousedrag(function(event));

node.mouseover(function(event));

node.mousemove(function(event));

node.mouseout(function(event));

jTopo學習筆記4 容器布局

var container new jtopo.container 邊界自動變化 scene.add container for var i 0 i 5 i scene.add new jtopo.link container.childs 0 container.childs 1 scene.ad...

筆記 JTOPO報警顏色變化

在jtopo的官網上有乙個裝置關係的demo裡面報警的裝置顏色為紅色，如圖所示 這裡是設定節點的alarm屬性即可實現顏色的變化，閃爍是利用了setinterval實現的。setinterval function else 600 addnode obj else 600 else if obj.i...

學習筆記1

struct test test int x void fun class test1 test1 int x void fun int main void test1 a 行1 a.fun 行2 test1 b 行3 b.fun 行4 test c 行5 c.fun 行6 test d 行7 d....