var stage = new jtopo.Stage('divId');
var layer = new jtopo.Layer();
stage.addChild(layer);
// 自定义节点: 重写Node对象的draw 方法即可.
class MyNode extends jtopo.Node {
constructor(text, x, y, w, h) {
super(text, x, y, w, h);
}
/**
* 绘制图形
*/
draw(ctx) {
// 填充个矩形
//ctx.beginPath();
//ctx.rect(0, 0, this.width, this.height);
//ctx.fill();
if(ctx.ellipse){
ctx.ellipse(37,0,this.width, this.height,0,0,Math.PI*2);
ctx.fillStyle="#fff";
ctx.strokeStyle="#000";
ctx.fill();
ctx.stroke();
}else{
alert("no ellipse!");
}
// 鼠标拾取(固定模式,一般情况不需要修改)
// 判断鼠标位置是否在上面填充的矩形内
this.mousePickupPath(ctx);
//ctx.beginPath();
//ctx.fillStyle = 'green';
//ctx.rect(20, 20, this.width-40, 20);
//ctx.fill();
// 文本
this.paintText(ctx);
}
}
// 自定义属性(名字不能和父类的冲突)
MyNode.prototype.myProperties1 = '123';
jtopo.regClass('MyNode', MyNode); // 如果需要序列化必须执行该句
var myNode = new MyNode('自定义节点', 200, 200, 80, 50);
// 节点样式
var nodeStyle = new jtopo.Style({
'fillStyle': 'orange',
'fontColor': 'black',
'font': 'bold 14px 仿宋',
});
myNode.style = nodeStyle;
myNode.textOffsetY = -55
layer.addChild(myNode);
//layer.fromJson(layer.toJson()); // 序列化并加载(同一个位置重复一个节点处理)
stage.show();