BIU
简介
获得BIU
快速上手
引入并使用BIU
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="demo"></div>
</body>
<script src="biu/biu.js"></script>
<script type="text/javascript">
var demo = biu.init(document.getElementById('demo'))
demo.setOption({})
</script>
</html>
一个支持拖拽编辑的页面就产生了^_^
集成案例
参数化元件绘制
网页拖拽布局
API
init | function
完成BIU的初始化,需要提供一个DOM元素
标准语法
示例
var demo = biu.init(document.getElementById('demo'))
参数列表
createItem | function
直接在画布中创建元素,用户项目中历史数据的加载等
标准语法
biu.createItem(itemName, x, y, data)
示例
biu.createItem('html', 0, 0, html)
参数列表
描述对象的类型,需要是itemMenuConf中已经配置的对象种类
items | Array
获取BIU运行时已经实例化的SVG对象集合 标准语法
示例
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运行时辅助点对象集合 标准语法
示例
//辅助点位置重计算
biu.auxs.reLocate()
svg | function
提供svg元素 标准语法
返回svg元素,可供用户操作
currentItems | function
返回此刻的items
返回此刻的itemMenu
配置接口option
BIU定位为独立SVG拖拽框架,原则上只实现拖拽/旋转/缩放功能,不与任何项目数据耦合。 为了实现在项目中能够灵活的使用BIU,BIU提供了丰富的配置项,可通过setOption方法向BIU传入配置参数,完成定制化使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="demo"></div>
</body>
<script src="biu/biu.js"></script>
<script type="text/javascript">
var demo = biu.init(document.getElementById('demo'))
var option = {
bodyStyle: {
backgroundColor: '#fff'
}
}
demo.setOption(option)
</script>
</html>
该元素定义了项目中可使用的对象,一个最简单的itemMenuConf应如下所示
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: [{
name: '删除',
callBack: function(self) {
self.destory()
}
}]
menus数组中的对象参数类型如下
size | Object
表示该种类对象的初始大小,默认大小为100,100
size: {
width: 125,
height: 525
}
size参数如下
data | Object
业务相关数据的配置,可以配置为该种类BIU对象的data默认值。 每一个该种类BIU对象实例化都会携带此默认值 当使用createItem方法并传入data时,传入的data具有更高的优先级
before | function(item_name, x, y)
自定义DOM对象创建前动作 参数列表
默认创建对象方式为
biu.createItem(item_name, x, y)
自定义DOM对象创建方法 参数列表
resize | function(self)
自定义DOM元素的定位方法,可以配置多个SVG组件以及位置关系 参数列表
辅助点事件覆盖
topLeftZoom: function() {}, topMiddleZoom: function() {}, topRightZoom: function() {}, middleLeftZoom: function() {}, middleRightZoom: function() {}, bottomLeftZoom: function() {}, bottomMiddleZoom: function() {}, bottomRightZoom: function() {}
全局菜单内容的配置,featureMenuConf是一个Array,其中的每一个配置项都是一个Object,代表了一个全局菜单的功能 一个简单的featureMenuConf配置示例如下
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中的对象参数类型如下
样式设置 | option.style
page | Object
body对象的样式,用来做一些初始化css 默认值
PAGE_STYLE: {
margin: 0,
padding: 0
}
biu | Object
biu容器的样式,默认是占满全屏 默认值
BIU_STYLE: {
width: '100vw',
height: '100vh',
display: 'flex'
}
左侧菜单容器的样式 默认值
MENU_STYLE: {
width: '10%',
height: '100%',
backgroundColor: '#f7f7f7',
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'flex-start',
alignItems: 'flex-start',
padding: 0
}
body | Object
右侧绘画区域容器的样式 默认值
BODY_STYLE: {
width: '90%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#333'
}
左侧菜单内按钮的样式 默认值
ITEM_BTN_STYLE: {
width: '50%',
height: '5%',
backgroundColor: '#f7f7f7',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
cursor: 'pointer'
}
右键菜单的样式 默认值
svgSize | Object
画布的尺寸,有些场景中需要预定义画布的大小 默认值
SVG_SIZE: {
width: 1920,
height: 1080
}
svg | Object
画布的样式,设置背景颜色或背景图片之类 默认值
SVG_STYLE: {
backgroundColor: '#333'
}
canvasColor | String
画板的背景颜色,是画布背后的一层 默认值
msg | Object
信息窗的样式 默认值
MSG_STYLE: {
position: 'fixed',
left: '80%',
top: '20%',
transform: 'translate(-50%, -50%)',
padding: '20px 40px',
backgroundColor: '#f7f7f7',
color: '#333333'
}
右键菜单的样式 默认值
CONTEXT_MENU_STYLE: {
backgroundColor: '#f7f7f7',
listStyle: 'none',
textAlign: 'center',
padding: 0,
margin: 0
}
左侧元素菜单的内容样式 默认值
MENU_ITEM_STYLE: {
width: '90px',
height: '100px',
display: 'flex',
flexDirection: 'column'
}
左侧元素菜单中的icon样式 默认值
MENU_ITEM_ICON_STYLE: {
height: '60px'
}
左侧元素菜单的文本样式 默认值
MENU_ITEM_TITLE_STYLE: {
textAlign: 'center',
userSelect: 'none'
}
辅助点位移事件 | option.auxItemZoom
辅助点的拖动响应事件,可以使用如下方式覆盖
auxItemZoom: {
topLeftZoom: function() {},
topMiddleZoom: function() {},
topRightZoom: function() {},
middleLeftZoom: function() {},
middleRightZoom: function() {},
bottomLeftZoom: function() {},
bottomMiddleZoom: function() {},
bottomRightZoom: function() {}
}
可用对象