leafer-x-connector

字段	类型	默认	说明
*rect1	Rect		连接对象1
*rect2	Rect		连接对象2
*option	IQnConnectorOption		连接属性

IQnConnectorOption 属性

字段	类型	默认	说明
padding	number	8	连接面延伸距离
margin	number	0	对象和连线之间的空隙
opt1	ITargetOption		单独设置连接面1的延伸距离
opt2	ITargetOption
addPoint	IPointData[]		连线自定义点
type	IConnectorType		连线类型，目前暂时只支持最简单类型
boundType	IBoundsType	stroke	边界类型(继承官网属性)
onDraw	FOnDrowCallback = (param:{ s:IConnectorPoint, e:IConnectorPoint, path:string })=>string		自定义连线回调函数

【Rect类型】ITargetOption 属性(后续根据不同形状参数略不同)

字段	类型	默认	说明
padding	number	8	连接面延伸距离
margin	number	0	对象和连线之间的空隙
side	ISideType		指定连接面，连线与对象的接触面 top, bottom, left, right 首字母
percent	ISideType		指定连接面与连线的接触点（按顺时针方向）
arrow	IArrowType		箭头类型参考官网箭头类型

后续开发计划: （已完成）

• 添加自定义链接点

  

• 连线类型样式（default，straight，curve）

  

• 箭头自定义

• 多边形

• PNG透明图片

• 对象之间围绕碰撞检测（自定义连接点的时候有点问题）

示例1: 快速上手

import { Leafer, Rect, Ellipse } from 'leafer-ui'
import { LeaferXQnConnector } from "leafer-x-connector";
const leafer = new Leafer({ view: window })
 

const elipse = new Ellipse({ 
    x: 150, 
    y: 150,  
    fill: '#32cd79',  
    draggable: true,
}) 
const rect = new Rect({ 
    x: 350,
    y: 220,
    fill: '#323379', 
    draggable: true,
}) 
const conn = new LeaferXQnConnector(elipse,rect) 

leafer.add(rect)
leafer.add(elipse)
leafer.add(conn)

示例2: 属性配置

import { Leafer, Rect, Ellipse } from 'leafer-ui'
import { LeaferXQnConnector } from "leafer-x-connector";
const leafer = new Leafer({ view: window })
 

const elipse = new Ellipse({ 
    x: 150, 
    y: 150,  
    fill: '#32cd79',  
    draggable: true,
}) 
const rect = new Rect({ 
    x: 350,
    y: 220,
    fill: '#323379', 
    draggable: true,
}) 

const opt:IConnectorOption = {
    opt1:{
        margin:25,    // 比外层优先级更高
    },
    opt2:{
        percent:0.8,
        margin:5,
    },
    padding:20,
    margin:10,
}

const conn = new LeaferXQnConnector(elipse,rect,opt) 

leafer.add(rect)
leafer.add(elipse)
leafer.add(conn)

示例3: 回调, 自定义连线

import { Leafer, Rect, Ellipse } from 'leafer-ui'
import { LeaferXQnConnector } from "leafer-x-connector";
const leafer = new Leafer({ view: window })
 

const elipse = new Ellipse({ 
    x: 150, 
    y: 150,  
    fill: '#32cd79',  
    draggable: true,
}) 
const rect = new Rect({ 
    x: 350,
    y: 220,
    fill: '#323379', 
    draggable: true,
}) 
const opt:IConnectorOption = {
    onDraw:(param)=>{
        console.log(`param::`,param)
        
        // 根据需求可自定义path即可
        return param.path   
    }
}
const conn = new LeaferXQnConnector(elipse,rect,opt) 

leafer.add(rect)
leafer.add(elipse)
leafer.add(conn)

/* 回调输出:
param::{
  "s": {
    "linkPoint": {
      "x": 236.12890625,
      "y": 387.453125
    },
    "padding": {
      "x": 236.12890625,
      "y": 367.453125
    },
    "side": "t",
    "anglePoint": {   // padding为零的时候为了计算角度使用的点
      "x": 236.12890625,
      "y": 387.453125
    },
    "angle": 261.0890177921008
  },
  "e": {
    "linkPoint": {
      "x": 455,
      "y": 330
    },
    "padding": {
      "x": 475,
      "y": 330
    },
    "side": "r",
    "anglePoint": {
      "x": 455,
      "y": 330
    },
    "angle": 351.0890177921008,
    "pathPoint": {    // 自动补长连线点, (*可能后续这个变量会有变动)
      "x": 475,
      "y": 367.453125
    }
  },
  "path": "M 236.12890625 387.453125 L 236.12890625 367.453125 L 475 367.453125 L 475 330 L 455 330"
}

示例4: Group 操作

group.add(rect)
group.add(elipse)
leafer.add(group)

// leafer.add(conn)  *这里不能这么写
group.add(conn)

连线配置颜色，箭头方式

连线继承Line对象，所以直接使用Line对象属性配置就行。 包括箭头的设置等

const connector = new LeaferXQnConnector(a, b)
connector.stroke = 'rgb(50,205,121)'