BIU

独立SVG拖拽框架

BIU

简介

  • 采用原生JS编写

  • 提供SVG对象的拖拽/旋转/缩放等功能

  • 多种自定义事件与数据介入方式

获得BIU

github

快速上手

引入并使用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元素

标准语法

biu.init(dom)

示例

var demo = biu.init(document.getElementById('demo'))

参数列表

createItem | function

直接在画布中创建元素，用户项目中历史数据的加载等

标准语法

biu.createItem(itemName, x, y, data)

示例

biu.createItem('html', 0, 0, html)

参数列表

items | Array

获取BIU运行时已经实例化的SVG对象集合 标准语法

biu.items

示例

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

示例

//辅助点位置重计算
biu.auxs.reLocate()

svg | function

提供svg元素 标准语法

biu.svg()

返回svg元素，可供用户操作

currentItems | function

返回此刻的items

itemMenu | function

返回此刻的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>

可拖拽对象配置 | option.itemMenuConf

该元素定义了项目中可使用的对象，一个最简单的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 | Array

对象实例在画布中的右键菜单，默认没有右键菜单

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)

init | function(self, itemMenu, svg)

自定义DOM对象创建方法 参数列表

resize | function(self)

自定义DOM元素的定位方法，可以配置多个SVG组件以及位置关系 参数列表

辅助点事件覆盖

topLeftZoom: function() {}, topMiddleZoom: function() {}, topRightZoom: function() {}, middleLeftZoom: function() {}, middleRightZoom: function() {}, bottomLeftZoom: function() {}, bottomMiddleZoom: function() {}, bottomRightZoom: function() {}

全局菜单 | option.featureMenuConf

全局菜单内容的配置，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 | Object

左侧菜单容器的样式 默认值

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'
}

menuBtn | Object

左侧菜单内按钮的样式 默认值

ITEM_BTN_STYLE: {
  width: '50%',
  height: '5%',
  backgroundColor: '#f7f7f7',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  cursor: 'pointer'
}

subMenu | Object

右键菜单的样式 默认值

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

画布的尺寸，有些场景中需要预定义画布的大小 默认值

SVG_SIZE: {
  width: 1920,
  height: 1080
}

svg | Object

画布的样式，设置背景颜色或背景图片之类 默认值

SVG_STYLE: {
  backgroundColor: '#333'
}

canvasColor | String

画板的背景颜色，是画布背后的一层 默认值

CANVAS_COLOR: '#fff'

msg | Object

信息窗的样式 默认值

MSG_STYLE: {
  position: 'fixed',
  left: '80%',
  top: '20%',
  transform: 'translate(-50%, -50%)',
  padding: '20px 40px',
  backgroundColor: '#f7f7f7',
  color: '#333333'
}

contextMenu | Object

右键菜单的样式 默认值

CONTEXT_MENU_STYLE: {
  backgroundColor: '#f7f7f7',
  listStyle: 'none',
  textAlign: 'center',
  padding: 0,
  margin: 0
}

menuItem | Object

左侧元素菜单的内容样式 默认值

MENU_ITEM_STYLE: {
  width: '90px',
  height: '100px',
  display: 'flex',
  flexDirection: 'column'
}

menuItemIcon | Object

左侧元素菜单中的icon样式 默认值

MENU_ITEM_ICON_STYLE: {
  height: '60px'
}

menuItemTitle | Object

左侧元素菜单的文本样式 默认值

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() {}
}

可用对象

PreviousChartEzNext技术

Last updated