> For the complete documentation index, see [llms.txt](https://vanchun032.gitbook.io/vanchun032/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vanchun032.gitbook.io/vanchun032/chan-pin/biu.md).
# BIU
## BIU
### 简介
* 采用原生JS编写
* 提供SVG对象的拖拽/旋转/缩放等功能
* 多种自定义事件与数据介入方式
### 获得BIU
[github](https://github.com/Vanchun032/biu)
### 快速上手
引入并使用BIU
```markup
```
一个支持拖拽编辑的页面就产生了^\_^
## 集成案例
### 参数化元件绘制
* [线上版本](http://120.77.60.26/yutong/)
* 实现功能
*
```
* 自定义原件样式
```
```
* 原件拖拽编辑
* 原件参数式编辑
```
### 网页拖拽布局
{% content-ref url="/pages/-LcZozsC6\_XO3ednW5HE" %}
[ChartEz](/vanchun032/chan-pin/chartez.md)
{% endcontent-ref %}
## API
### init | function
完成BIU的初始化，需要提供一个DOM元素
标准语法
```javascript
biu.init(dom)
```
示例
```javascript
var demo = biu.init(document.getElementById('demo'))
```
参数列表
| 参数名 | 类型 | 必须 | 默认值 | 描述 |
| --- | ----- | -- | --- | ---------------- |
| dom | DOM元素 | 是 | 无 | 传入Dom元素形成BIU的初始化 |
### createItem | function
直接在画布中创建元素，用户项目中历史数据的加载等
标准语法
```javascript
biu.createItem(itemName, x, y, data)
```
示例
```javascript
biu.createItem('html', 0, 0, html)
```
参数列表
| 参数名 | 类型 | 必须 | 默认值 | 描述 |
| -------- | ------ | -- | --------------------- | --------------------------------- |
| itemName | String | 是 | 无 | 描述对象的类型，需要是itemMenuConf中已经配置的对象种类 |
| x | Number | 是 | 无 | 对象被自动建立时的x轴的位置 |
| y | Number | 是 | 无 | 对象被自动建立时的y轴的位置 |
| data | Object | 否 | itemMenu中的data配置，或空对象 | 对象业务相关数据的存储 |
### items | Array
获取BIU运行时已经实例化的SVG对象集合 标准语法
```javascript
biu.items
```
示例
```javascript
biu.items.forEach(item => {
var config = JSON.parse(item.data.config)
config.top = item.y
config.left = item.x
config.width = item.width
config.height = item.height
//调用服务接口进行保存
callAjax(item.item_name + '/update', {id: item.data.id, config: JSON.stringify(config)}, function(res) {})
})
```
### auxs | Object
获取BIU运行时辅助点对象集合 标准语法
```javascript
biu.auxs
```
示例
```javascript
//辅助点位置重计算
biu.auxs.reLocate()
```
### svg | function
提供svg元素 标准语法
```javascript
biu.svg()
```
返回svg元素，可供用户操作
### currentItems | function
返回此刻的items
### itemMenu | function
返回此刻的itemMenu
## 配置接口option
BIU定位为独立SVG拖拽框架，原则上只实现拖拽/旋转/缩放功能，不与任何项目数据耦合。 为了实现在项目中能够灵活的使用BIU，BIU提供了丰富的配置项，可通过setOption方法向BIU传入配置参数，完成定制化使用。
```markup
```
### 可拖拽对象配置 | option.itemMenuConf
该元素定义了项目中可使用的对象，一个最简单的itemMenuConf应如下所示
```javascript
itemMenuConf: {
diaodian: {
title: '吊点吊模',
url: 'http://vanchun.oss-cn-shenzhen.aliyuncs.com/yutong/model.svg',
color: '#DDDDFF'
}
}
```
itemMenuConf中每配置一个对象类型，BIU的左侧菜单中即会多出一个可使用的对象 所有右侧画布中的对象，都是通过itemMenuConf预定义类型的 下面逐项解释对象中各配置项的含义
#### title | String | required
对象的名称，用于在左侧菜单中展示
#### url | String | required
对象展示图标，用于在左侧菜单中展示
#### color | String | required
对象按钮的背景颜色，用于在左侧菜单中展示
#### menus | Array
对象实例在画布中的右键菜单，默认没有右键菜单
```javascript
menus: [{
name: '删除',
callBack: function(self) {
self.destory()
}
}]
```
menus数组中的对象参数类型如下
| 参数名 | 类型 | 必须 | 默认值 | 描述 |
| -------- | -------- | -- | --- | ------------------------ |
| name | String | 是 | 无 | 菜单项的名称，将在右键菜单中显示 |
| callBack | function | 是 | 无 | 菜单执行的回调方法，接受self参数表示实例自身 |
#### size | Object
表示该种类对象的初始大小，默认大小为100，100
```javascript
size: {
width: 125,
height: 525
}
```
size参数如下
| 参数名 | 类型 | 必须 | 默认值 | 描述 |
| ------ | ------ | -- | --- | ------ |
| width | Number | 是 | 无 | 元素默认宽度 |
| height | Number | 是 | 无 | 元素默认高度 |
#### data | Object
业务相关数据的配置，可以配置为该种类BIU对象的data默认值。 每一个该种类BIU对象实例化都会携带此默认值 当使用createItem方法并传入data时，传入的data具有更高的优先级
#### before | function(item\_name, x, y)
自定义DOM对象创建前动作 参数列表
| 参数名 | 类型 | 描述 |
| ---------- | ------ | ----- |
| item\_name | String | 对象标识符 |
| x | Number | x轴定位 |
| y | Number | y轴定位 |
默认创建对象方式为
```javascript
biu.createItem(item_name, x, y)
```
#### init | function(self, itemMenu, svg)
自定义DOM对象创建方法 参数列表
| 参数名 | 类型 | 描述 |
| -------- | ------ | --------------------- |
| self | Object | 该对象实例 |
| itemMenu | Object | option.itemMenuConf对象 |
| svg | DOM | SVG画布背景 |
| 返回值 | 描述 |
| --- | ----------- |
| DOM | 返回最外层的DOM元素 |
#### resize | function(self)
自定义DOM元素的定位方法，可以配置多个SVG组件以及位置关系 参数列表
| 参数名 | 类型 | 描述 |
| ---- | ------ | ----- |
| self | Object | 该对象实例 |
#### 辅助点事件覆盖
topLeftZoom: function() {}, topMiddleZoom: function() {}, topRightZoom: function() {}, middleLeftZoom: function() {}, middleRightZoom: function() {}, bottomLeftZoom: function() {}, bottomMiddleZoom: function() {}, bottomRightZoom: function() {}
### 全局菜单 | option.featureMenuConf
全局菜单内容的配置，featureMenuConf是一个Array，其中的每一个配置项都是一个Object，代表了一个全局菜单的功能 一个简单的featureMenuConf配置示例如下
```javascript
featureMenuConf: [{
name: '保存',
feature: function() {
//调用用户后台接口,可对当前页面的布局内容进行保存
biu.items.forEach(item => {
var config = JSON.parse(item.data.config)
config.top = item.y
config.left = item.x
config.width = item.width
config.height = item.height
//调用服务接口进行保存
callAjax(item.item_name + '/update', {id: item.data.id, config: JSON.stringify(config)}, function(res) {})
})
}
}]
```
featureMenuConf中的对象参数类型如下
| 参数名 | 类型 | 必须 | 默认值 | 描述 |
| -------- | -------- | -- | --- | ---------------- |
| name | String | 是 | 无 | 菜单项的名称，将在右键菜单中显示 |
| callBack | function | 是 | 无 | 菜单执行的回调方法 |
### 样式设置 | option.style
#### page | Object
body对象的样式，用来做一些初始化css 默认值
```javascript
PAGE_STYLE: {
margin: 0,
padding: 0
}
```
#### biu | Object
biu容器的样式，默认是占满全屏 默认值
```javascript
BIU_STYLE: {
width: '100vw',
height: '100vh',
display: 'flex'
}
```
#### menu | Object
左侧菜单容器的样式 默认值
```javascript
MENU_STYLE: {
width: '10%',
height: '100%',
backgroundColor: '#f7f7f7',
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'flex-start',
alignItems: 'flex-start',
padding: 0
}
```
#### body | Object
右侧绘画区域容器的样式 默认值
```javascript
BODY_STYLE: {
width: '90%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#333'
}
```
#### menuBtn | Object
左侧菜单内按钮的样式 默认值
```javascript
ITEM_BTN_STYLE: {
width: '50%',
height: '5%',
backgroundColor: '#f7f7f7',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
cursor: 'pointer'
}
```
#### subMenu | Object
右键菜单的样式 默认值
```javascript
ITEM_MENU_STYLE: {
width: '100%',
height: '95%',
backgroundColor: '#f7f7f7',
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around',
alignItems: 'flex-start',
boxSizing: 'border-box',
padding: '20px 20px'
}
```
#### svgSize | Object
画布的尺寸，有些场景中需要预定义画布的大小 默认值
```javascript
SVG_SIZE: {
width: 1920,
height: 1080
}
```
#### svg | Object
画布的样式，设置背景颜色或背景图片之类 默认值
```javascript
SVG_STYLE: {
backgroundColor: '#333'
}
```
#### canvasColor | String
画板的背景颜色，是画布背后的一层 默认值
```javascript
CANVAS_COLOR: '#fff'
```
#### msg | Object
信息窗的样式 默认值
```javascript
MSG_STYLE: {
position: 'fixed',
left: '80%',
top: '20%',
transform: 'translate(-50%, -50%)',
padding: '20px 40px',
backgroundColor: '#f7f7f7',
color: '#333333'
}
```
#### contextMenu | Object
右键菜单的样式 默认值
```javascript
CONTEXT_MENU_STYLE: {
backgroundColor: '#f7f7f7',
listStyle: 'none',
textAlign: 'center',
padding: 0,
margin: 0
}
```
#### menuItem | Object
左侧元素菜单的内容样式 默认值
```javascript
MENU_ITEM_STYLE: {
width: '90px',
height: '100px',
display: 'flex',
flexDirection: 'column'
}
```
#### menuItemIcon | Object
左侧元素菜单中的icon样式 默认值
```javascript
MENU_ITEM_ICON_STYLE: {
height: '60px'
}
```
#### menuItemTitle | Object
左侧元素菜单的文本样式 默认值
```javascript
MENU_ITEM_TITLE_STYLE: {
textAlign: 'center',
userSelect: 'none'
}
```
### 辅助点位移事件 | option.auxItemZoom
辅助点的拖动响应事件，可以使用如下方式覆盖
```javascript
auxItemZoom: {
topLeftZoom: function() {},
topMiddleZoom: function() {},
topRightZoom: function() {},
middleLeftZoom: function() {},
middleRightZoom: function() {},
bottomLeftZoom: function() {},
bottomMiddleZoom: function() {},
bottomRightZoom: function() {}
}
```
## 可用对象