# leafer-x-connector
**Repository Path**: miniby/leafer-x-connector
## Basic Information
- **Project Name**: leafer-x-connector
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-25
- **Last Updated**: 2024-09-25
## Categories & Tags
**Categories**: Uncategorized
**Tags**: 参考答案
## README
# 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: 快速上手
```js
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: 属性配置
```js
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: 回调, 自定义连线
```js
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 操作
```js
group.add(rect)
group.add(elipse)
leafer.add(group)
// leafer.add(conn) *这里不能这么写
group.add(conn)
```
### 连线配置颜色，箭头方式
连线继承Line对象，所以直接使用Line对象属性配置就行。 包括箭头的设置等
```js
const connector = new LeaferXQnConnector(a, b)
connector.stroke = 'rgb(50,205,121)'
```