BIU

独立SVG拖拽框架

BIU

简介

采用原生JS编写
提供SVG对象的拖拽/旋转/缩放等功能
多种自定义事件与数据介入方式

获得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>

一个支持拖拽编辑的页面就产生了^_^

集成案例

参数化元件绘制

线上版本
实现功能
- 自定义原件样式
- 原件拖拽编辑
- 原件参数式编辑

网页拖拽布局

ChartEz

API

init | function

完成BIU的初始化，需要提供一个DOM元素

标准语法

biu.init(dom)

示例

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

参数列表

参数名

类型

必须

默认值

描述

dom

DOM元素

是

无

传入Dom元素形成BIU的初始化

createItem | function

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

标准语法

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

示例

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

参数列表

参数名

类型

必须

默认值

描述

itemName

String

是

无

描述对象的类型，需要是itemMenuConf中已经配置的对象种类

Number

是

无

对象被自动建立时的x轴的位置

Number

是

无

对象被自动建立时的y轴的位置

data

Object

否

itemMenu中的data配置，或空对象

对象业务相关数据的存储

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数组中的对象参数类型如下

参数名

类型

必须

默认值

描述

name

String

是

无

菜单项的名称，将在右键菜单中显示

callBack

function

是

无

菜单执行的回调方法，接受self参数表示实例自身

size | Object

表示该种类对象的初始大小，默认大小为100，100

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

对象标识符

Number

x轴定位

Number

y轴定位

默认创建对象方式为

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配置示例如下

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 默认值

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

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

可用对象

PreviousChartEz Next技术

Last updated 5 years ago

BIU

简介

获得BIU

快速上手

集成案例

参数化元件绘制

网页拖拽布局

API

init | function

createItem | function

items | Array

auxs | Object

svg | function

currentItems | function

itemMenu | function

配置接口option

可拖拽对象配置 | option.itemMenuConf

title | String | required

url | String | required

color | String | required

menus | Array

size | Object

data | Object

before | function(item_name, x, y)

init | function(self, itemMenu, svg)

resize | function(self)

辅助点事件覆盖

全局菜单 | option.featureMenuConf

样式设置 | option.style

page | Object

biu | Object

menu | Object

body | Object

menuBtn | Object

subMenu | Object

svgSize | Object

svg | Object

canvasColor | String

msg | Object

contextMenu | Object

menuItem | Object

menuItemIcon | Object

menuItemTitle | Object

辅助点位移事件 | option.auxItemZoom

可用对象