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;//仅延长5ctx.lineTo(x2+offset, y1);ctx.lineTo(x2+offset,y2);ctx.lineTo(x2,y2);ctx.stroke();}

示例：

jsMind 使用直角画线相关推荐

百度地图轨迹回放,自定义路书,边走边画线
转自:https://www.cnblogs.com/syj2016/p/5685294.html 百度地图轨迹回放,自定义路书,边走边画线在原有的百度路书的基础上,做了修改,使其能实现边走边画线的 ...
JAVA实现中点画线_实验1-中点画线和Bresenham画线算法的实现
<实验1-中点画线和Bresenham画线算法的实现>由会员分享,可在线阅读,更多相关<实验1-中点画线和Bresenham画线算法的实现(9页珍藏版)>请在人人文库网上搜索. ...
18怎么确定板子形状_板绘怎么画线条排线？板绘小白画线不稳怎么办？
想学习绘画去找不到方法?小编为大家提供一套学习素材~~领取方式在文章最后~~ 很多初学者在刚刚接触板绘的时候经常会因为手不稳而无法控制线条的运用,导致画面显得粗糙,形状或结构不标准,画面花等等问题. ...
毛边效果 html,Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
OpenCV在图像上画线、矩形、椭圆、多边形、填充的多边形、圆、显示文字
OpenCV在图像上随机画直线.椭圆.多边形.圆.显示文字代码如下: /*** @file Drawing_2.cpp* @brief Simple sample code*/#include &l ...
Bresenham 算法画线画圆
最近作业在做 graphics driver 涉及到 Bresenham 画线以及画圆算法,以防自己忘记了总结一些知识点以及源码. 所有代码的输入参数类型都是 unsinged int Bresenh ...
Matlab画线实例图
1 plot画线直线: 设置线宽和颜色: 黄色,8像素宽: 直线,黄色: 2 line 画线画的是坐标(1,3)到(2,4)的一条线: 设置线型和颜色: 3 数学曲线另一个:
VC++简单实现工具软件随鼠标移动画线的功能
一些绘图或仿真软件都有这功能,随鼠标移动,始终有一条线从起点跟随到鼠标当前位置:这功能不只是随鼠标移动画线:实际要实现2个功能:擦除前一条线,再画一条从起点到当前鼠标位置的线: 环境Win10,VC6 ...
php gd库画线,[PHP] GD库（十）绘制线段与圆弧 imageline、imagesetstyle 与 imagearc 函数...
[PHP] GD库(十)绘制线段与圆弧 imageline.imagesetstyle 与 imagearc 函数 imageline() 函数用于绘制一条线段. imagearc() 函数用于绘制椭 ...
Qt 实现钢笔画线效果详细原理
前言上一篇文章:Qt 实现画线笔锋效果详细原理,根据这篇介绍的实现笔锋效果的原理,我们很容易实现另外一种笔效:钢笔. 所谓的钢笔笔效,就是真实还原钢笔书写出来的线条效果,其特征就是:根据笔的绘制速度 ...

jsMind 使用直角画线

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

2.取靠近父级节点点

jsMind 使用直角画线相关推荐

最新文章

热门文章