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）

  

• [X] 箭头自定义

• [ ] 多边形

• [ ] 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)