就只是简单的闭包问题。现在定义了的setrectangle等函数只是返回了一个对象，然后在后面用zr.addShape(New rectangle(topo.rectangle))来绘制。现在想将zr。addShape也封装起来，不过addShape这个函数还有New rectangleShape不知道怎么封装进去，求指教。
var fileLocation = './www/js/zrender';
require.config({
paths: {
zrender: fileLocation,
'zrender/shape/Rose': fileLocation,
'zrender/shape/Trochoid': fileLocation,
'zrender/shape/Circle': fileLocation,
'zrender/shape/Sector': fileLocation,
'zrender/shape/Ring': fileLocation,
'zrender/shape/Ellipse': fileLocation,
'zrender/shape/Rectangle': fileLocation,
'zrender/shape/Text': fileLocation,
'zrender/shape/Heart': fileLocation,
'zrender/shape/Droplet': fileLocation,
'zrender/shape/Line': fileLocation,
'zrender/shape/Image': fileLocation,
'zrender/shape/Star': fileLocation,
'zrender/shape/Isogon': fileLocation,
'zrender/shape/BezierCurve': fileLocation,
'zrender/shape/Polyline': fileLocation,
'zrender/shape/Path': fileLocation,
'zrender/shape/Polygon': fileLocation
}
});
var topo = {
zr: null,
imgroute: {
hgw: "../asset/img/hgw.jpg",
obd2: "../asset/img/obd.jpg",
obd1: "../asset/img/obd.jpg",
olt: "../asset/img/olt.jpg",
l2sw: "../asset/img/server.jpg",
"bras-sr": "../asset/img/bras.jpg",
"ipnet": "../asset/img/cloud.jpg",
"success": "../asset/img/success.png",
"error": "../asset/img/error.png",
"fault": "../asset/img/fault.png",
"phone": "../asset/img/phone.jpg",
"stb": "../asset/img/stb.jpg",
"pc": "../asset/img/stb.jpg",
"router": "../asset/img/router.jpg",
"other": "../asset/img/unknown.jpg"
},
imgtext: {
"hgw": "家庭网关",
"obd2": "二级分光器",
"obd1": "一级分光器",
"olt": "OLT",
"l2sw": "12sw",
"bras-sr": "bras-sr",
"ipnet": "ipnet",
"success": "../asset/img/success.png",
"error": "../asset/img/error.png",
"fault": "../asset/img/fault.png",
"phone": "手机",
"stb": "机顶盒",
"pc": "电脑",
"router": "路由器",
"other": "未知设备"
},
setrectangle: function(x, y, w, h, text) { //矩形
var rectangle = {
style: {}
};
rectangle.style.x = x;
rectangle.style.y = y;
rectangle.style.width = w;
rectangle.style.height = h;
rectangle.style.radius = 20;
rectangle.style.brushType = 'both';
rectangle.style.color = '#ffffff';
rectangle.style.lineWidth = 2;
rectangle.style.strokeColor = '#d8d8d8';
rectangle.style.lineJoin = 'round';
rectangle.draggable = false;
rectangle.hoverable = false;
this.zr.addShape(new RectangleShape(rectangle));
return rectangle;
},
setimg: function(x, y, imageroute, w, h, text) { //图片
var img = {};
img.style = {
x: x,
y: y,
width: w,
height: h,
image: imageroute,
textPosition: 'bottom',
text: text,
};
img.draggable = false;
img.hoverable = false;
return img;
},
setcircle: function(x, y, r, text) { //圆形
var circle = {};
circle.style = {
x: x,
y: y,
r: r,
brushType: 'both',
color: '#ffffff',
strokeColor: '#d8d8d8',
lineWidth: 2,
text: text,
textPosition: 'bottom',
textColor: '#000'
};
circle.draggable = false;
circle.hoverable = false;
return circle;
},
setlink: function(xs, ys, xe, ye) { //连线
var link = {};
link.style = {
xStart: xs,
yStart: ys,
xEnd: xe,
yEnd: ys,
strokeColor: 'yellow',
lineWidth: 2,
lineType: 'solid'
};
link.draggable = false;
link.hoverable = false;
this.zr.addShape(link);
},
getreschain: function(data) { //获取主干节点
var res = [];
for (var i = 0; i < data.reschain.length; i++) {
res.push(data.reschain[i])
}
return res;
},
getsubres: function(data) { //获取子节点
var res = [];
for (var i = 0; i < data.subres.length; i++) {
res.push(data.subres[i])
}
return res;
},
route: function(x, i, x1, y1, rx0, ry0) { //旋转函数 点x1,y1,绕着 rx0,ry0旋转。
var angle = Math.PI / (x - 1) * (i)
var x0 = (x1 - rx0) * Math.cos(angle) - (y1 - ry0) * Math.sin(angle) + rx0;
var y0 = (x1 - rx0) * Math.sin(angle) + (y1 - ry0) * Math.cos(angle) + ry0;
return {
x: x0,
y: y0
}
},
xdistance: function(reserve, distance, i) { //计算图片节点的横坐标
return reserve + distance * i;
}
}
require(
[
'zrender',
'zrender/shape/Rectangle',
'zrender/shape/Line',
'zrender/shape/Polyline',
'zrender/shape/Image',
'zrender/shape/Circle'
],
function(zrender, RectangleShape, LineShape, PolylineShape, ImageShape, CircleShape) {
topo.zr= zrender.init(document.getElementById('main'));
var color = require('zrender/tool/color');
var resdata = topo.getreschain(data);
var subdata = topo.getsubres(data);
topo.setrectangle(100,100,50,50);
topo.zr.render();
} //function
) //require已经解决了，addshape是zr的一个方法，可以直接使用，在引用时将zr声明即可。然后new rectangleShape（）中的 rectangleShape是需要在后面获取的，所以在封装的时候可以这样：new rec（ ） 然后在下面的函数定义的时候
topo.rec=rectangleShape