jtopo过程记录

Problem：
1.Uncaught DOMException: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The HTMLImageElement provided is in the ‘broken’ state：
scene.background属性之前可以直接写颜色，js升级之后属性要改成“backgroundColor”

2.增加图像缩放：
stage.wheelZoom=0.85
(官方API文档有介绍)

3.设置node位置 ：
不是setPosition(x,y); 应该是setLocation(x,y);

4.textNode设置：

  var text=new JTopo.TextNode("出水口");
            text.setLocation(100,300);
            scene.add(text);

5.link.storkeColor只能添加RGB代码（255,255,0），不能使用十六进制数字（#000000）或者表示颜色的单词代替（white）。

6.实例源码down到本地之后，浏览器报错“$ is not define”：
jquery文件引用错误。从官网下载最新版本jQuery.min.js文件引用就可以了。

7.官网Demo（切水果）使用了Math.stan2()方法：

该方法接受两个参数x/y，即横坐标和纵坐标。
计算出来的结果angel是一个弧度值。
同时此方法可以计算两点间连线的倾斜角：
两点的横纵坐标分别相减，得到一个新的点，计算此点的角度，即得到了两点的连线夹角。
Math.atan2(x1-x2,y1-y2);//得到的是一个数值
Math.atan2(x1-x2,y1-y2)*180/Math.PI;//得到连线夹角

关于Math.stan的详细介绍：
https://blog.csdn.net/pecke/article/details/41014069

8.线条：
Link表示普通线条；
Link方法属性（node1,node2,text,dashPattern）;

FoldLink表示有一个折点的线条；
FoldLink方法属性(node1,node2,text,direction,dashPattern);

FlexionalLink表示二次折点的线条。
FlexionalLink方法属性：(node1,node2,text,direction,dashPattern);

CurvelLink表示曲线。
curvelLink方法属性：
(node1,node2,text);

创建后要在scene上add()。

属性：

//线条方向 horizontal可换为Vertical
link.direction=direction||'horizontal';

//箭头大小
link.arrowsRadius = 30;

// 线宽
link.lineWidth = 60; 

//线条间隔
link.offsetGap = 350;

// 线条之间的间隔
link.bundleGap = 15; 

 // 文本偏移量（向下15个像素）
link.textOffsetY = 10;

//线条颜色
link.strokeColor = '0,250,0';

//线条样式
link.dashedPattern = dashedPattern;

9.利用JSON传递数据：

10.节点：

		//创建jtopo节点
		var node = new JTopo.Node(text);

		//给节点添加背景图片
        if(null!=path){
            node.setImage(path, false);
        }
        
        //设置节点位置
        node.setLocation(x, y);

		//设置节点大小
        node.setSize(w, h);

		//设置节点文字字体颜色
        node.fontColor = '0,0,0';

		//设置节点文字字体
        node.font = 'bold 10px Arial';

		//将节点添加到scene上
        scene.add(node);
       

作者编写demo时参考的内容：
jtopo详细记录

P.S.：使用WebStorm能够编写代码时有js提示，建议下载。
安装破译WebStorm参考页面：
WebStorm破解大全
个人建议：
（1）破解一定要在hosts文件里把WebStorm官网注释掉，否则大部分Activation code/License server都会失效；
（2）如果遇到code失效就多换几个其他的，本人至少试了十个才成功；
（3）建议汉化。汉化之后出现打不开WebStorm设置选项卡的问题，说明汉化包与WebStorm版本不一致，建议重新下载同样版本的汉化包；或者直接删除汉化包。