jsMind 使用直角画线

在jsMind的默认画线中,连接各个节点的是使用的贝塞尔曲线画法,默认展示的线条如下:

想要改成直线,就需要重新绘制这些连线,其中jsMind的画线是存在于 draw_line方法中的。默认采用的是贝塞尔曲线画法

想要画成直线,就需要改造以下,可以自定义声明两个直角直线画法

1.取两个节点中途点作为拐点

//用直角画线方式 取得是两点中间的距离
        _brokenline_to: function (ctx, x1, y1, x2, y2) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x1 + (x2 - x1)  / 2,y1);
            ctx.lineTo(x1 + (x2 - x1)  / 2,y2);//延长了一半 
            ctx.lineTo(x2,y2);
            ctx.stroke();
        },

示例:

2.取靠近父级节点点

//取得是相对近的方式
        _nearby_brokenline_to: function (ctx, x1, y1, x2, y2) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            let offset = x1<x2?-5:5;//仅延长5
            ctx.lineTo(x2+offset, y1);
            ctx.lineTo(x2+offset,y2);
            ctx.lineTo(x2,y2);
            ctx.stroke();
        }

示例:

©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值