jtopo椭圆

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();
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值