当前位置: 首页 > 工具软件 > jTopo > 使用案例 >

jtopo椭圆

缪风史
2023-12-01
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();
 类似资料: