jtopo 使用记录（2017.12.08更新）

jtopo 使用记录

---

jtopo api：http://www.jtopo.com/api.html#

场景背景

    var mainCanvas = document.getElementById(canvasId); // canvas节点    var stage = new JTopo.Stage(mainCanvas); // 创建舞台    // 舞台设置    stage.cursor = "url(./img/cur/closedhand.cur) 8 8, default"; // 拖动鼠标图形设置     stage.wheelZoom =   Browser == "FF" ? 0.8 : 1.2; // 设置场景缩放  Firefox缩放bug     var scene = new JTopo.Scene();  // 创建场景    // 场景设置    scene.translateX = 0; // 场景偏移    scene.translateY = 0;    scene.scaleX = 1; // 场景缩放    scene.scaleY = 1;    scene.alpha = 1; // 通道透明度    scene.backgroundColor = '80,100,80'; // 背景颜色--只支持输入rgb值，设置背景颜色是必须设置通道透明度    scene.background = './img/bg.jpg';   // 背景图    showJTopoToobar(this.stage); //显示工具栏

创建节点

    var ordinaryNode = new JTopo.Node('节点名称');   // 创建普通节点    var circleNode= new JTopo.CircleNode('节点名称';  // 创建圆形节点    var textNode = new JTopo.TextNode('This is a text node.');  // 创建文本节点    var linkNode = new JTopo.LinkNode('超链接：http://www.jtopo.com')； // 创建链接节点

普通节点设置1

    var defaultNode = new JTopo.Node();    // 节点文字设置    defaultNode.text = '节点名字'; // 文字    defaultNode.font = '14px 微软雅黑'; // 字体    defaultNode.textPosition = 'Middle_Center'; // 文字位置，对齐方式可选择：（'Top_Left', 'Top_Center', 'Top_Right', 'Middle_Left', 'Middle_Center', 'Middle_Right', 'Bottom_Left', 'Bottom_Center', 'Bottom_Right'）    defaultNode.textOffsetX = -30; // 文字向左偏移 30像素    defaultNode.textOffsetX = 30; // 文字向右偏移 30像素    defaultNode.textOffsetY = -8; // 文字向上偏移8像素    defaultNode.textOffsetY = 8; // 文字向下偏移8像素    defaultNode.setLocation(180, 100); // 设置节点位置    defaultNode.setCenterLocation(X, Y); // 设置节点中心位置    defaultNode.setSize(100, 60);  // 设置节点尺寸    defaultNode.setBound(500, 210, 64, 64); // 同时设置大小及位置，setBound(x, y, width, height)    defaultNode.borderRadius = 5; // 圆角    defaultNode.borderWidth = 2; // 边框的宽度    defaultNode.borderColor = '255,255,255'; // 边框颜色                defaultNode.zIndex = 15; // 节点层级 （10及以下保留）    defaultNode.alpha = 0.7; // 节点透明度    defaultNode.fillColor = "227,227,227"; // 节点填充颜色    defaultNode.setImage('./img/OS_Apple.png', true); // 节点图片    defaultNode.showSelected = false; // 不显示选中矩形    defaultNode.paintSelected = function (a){   //修改节点选中样式                0 != this.showSelected &&                 (a.save(), a.beginPath(), a.strokeStyle = "rgba(218,221,221, 0)",                 a.fillStyle = "rgba(218,221,221,0)",                 a.arc( 0, 0, this.width/2 + 3, 0, Math.PI*2, false),                  a.fill(), a.stroke(), a.closePath(), a.restore())            };    scene.add(defaultNode); // 把节点添加到场景

文本节点设置

            var textNode = new JTopo.TextNode('This is a text node.');            textNode.font = 'bold 16px 微软雅黑';            textNode.setLocation(317, 250);            scene.add(textNode);

链接节点设置

            var linkNode = new JTopo.LinkNode('超链接：http://www.jtopo.com');            linkNode.href = 'http://www.jtopo.com';            linkNode.target = '_blank'; // 新窗口打开链接            linkNode.font = 'italic bold 16px 微软雅黑';            linkNode.visitedColor = '0,0,255'; // 访问过的链接为蓝色            linkNode.shadowOffsetX = 5; // 阴影设置            linkNode.shadowOffsetY = 16;            linkNode.setLocation(250, 360);            scene.add(linkNode);

圆形节点设置

            var circleNode = new JTopo.CircleNode('node');            circleNode.radius = 24; // 半径            circleNode.alpha = 0.7;            circleNode.fillColor = '0, 0, 255'; // 填充颜色            circleNode.setLocation(508, 100);            circleNode.textPosition = 'Middle_Center'; // 文本位置            scene.add(circleNode);

自定义节点设置

            var node = new JTopo.Node("自定义");                            node.percent = 0.8; // 百分比            node.beginDegree = 0; // 开始度            node.width = node.height = 60;            node.setLocation(200, 210);            node.paint = function(g){ // 绘制                g.beginPath();                g.moveTo(0,0);                g.fillStyle = 'rgba(0,255,0,' + this.alpha + ')';                g.arc(0, 0, this.width/2, this.beginDegree, this.beginDegree + 2*Math.PI*this.percent);                g.fill();                                g.closePath();                g.save();                                g.beginPath();                g.fillStyle = 'rgba(255,255,0,' + this.alpha + ')';                g.moveTo(0,0);                g.arc(0, 0, this.width/2-10, this.beginDegree, this.beginDegree + 2*Math.PI);                                g.fill();                g.closePath();                                                g.restore();                this.paintText(g);            };                        scene.add(node);

方法

1. stage方法

// 放大stage.zoomOut(scale) // 缩小stage.zoomOut(scale) // 缩放并居中显示所有元素stage.centerAndZoom(scale)// 设置当前舞台的中心坐标（舞台平移)stage.setCenter(x, y)// 得到舞台中所有元素位置确定的边界大小（left、top、right、bottom）stage.getBound()// 导出成PNG图片（在新打开的浏览器Tab页中） 此方法不能在绘制结束后立即调用，不然得到的是张空图。。stage.saveImageInfo()// 监听事件stage.addEventListener(eventName, eventHandler) //支持的事件： click,dbclick,mousedown,mouseup,mouseover,mouseout,mousemove,mousedrag,mousewheel// 移除监听事件stage.removeEventListener(eventName)// 例子stage.addEventListener("click",function(e){});stage.removeEventListener("click");// 移除所有监听事件stage.removeAllEventListener()// 监听鼠标单击事件（鼠标按下并松开），等价于：stage.addEventListener("click", eventHandler);stage.click(eventHandler) // 所有支持的事件都可如此调用