GraphEngine(V1.0) 技术开发文档
” GraphEngine”是宁夏泰则欣科技有限公司开发的一套web端矢量图\流程图\组态设计器等各种行业通用的矢量图开发框架.框架提供了各种接口以及API,用户基于框架可以开发各种web端图形设计器.
” GraphEngine” 采用前端H5 easyui 框架搭建,图形引擎采用H5 canvas .文件发布支持JSON发布和SVG发布.
开源组态:LazyOS 开源物联网系统_LazyOS 开源物联网框架
演示网址:通用绘图系统
| 图形引擎 | Canvas |
| UI框架 | easyui |
| svg | 发布SVG文件 |
| json | 图形存储采用 Json |
| Jquery | 采用最新版本 |
| 作者 | 马勇 |
| 公司 | 宁夏泰则欣科技有限公司 |
开始使用如何用GraphEngine 网页端调用
1 网页中引用加载 GraphEngine.js库文件,jquery.min.js, jquery.timers-1.2.js
, jquery.easyui.min.js
2 在网页<head></head>中增加css样式文件
<head>
<script src="Lib\jquery-3.6.3.min.js"></script>
<script src="Lib/jquery.timers-1.2.js"></script>
<script src="Lib/jquery.easyui.min.js"></script>
<script src=" Lib /graphEngine.min.js"></script>
<script src=" Lib /demo.js"></script>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
</head>
3 在网页<body>中创建和使用GraphEngine
第一种:调用方式 在body直接加载
<body id="graphChart">
<script type="text/javascript">
initChart();
function initChart()
{
graphEngine.CreateEngine("graphChart");//id直接调用Body的 id
graphEngine.initViewFromServer();//从服务器端加载存档的视图列表
}
</script>
</body>
第二种:调用方式 在div直接加载
<body>
<div id="graphChart"></div>
<script type="text/javascript">
initChart();
function initChart()
{
graphEngine.CreateEngine("graphChart");//id直接调用Body的 id
graphEngine.initViewFromServer();//从服务器端加载存档的视图列表
}
</script>
</body>
| GraphEngine 参数及API接口说明 | |||
| 图件参数及其API | |||
| id | 当前视图的id | graphEngine.id= graphEngine.newGuid(); | |
| title | 图件名称 | graphEngine.title=”我的图件” | |
| forder | 图件所在的服务器文件夹也可以是图件的分类名称 | graphEngine.forder=”我的图件” | |
| mode | 指定图件是可编辑模式还是预览模式,在预览模式下不能编辑图元 | graphEngine.mode= GraphMode.edit; 或者 graphEngine.mode= GraphMode. view; | |
| width | 图件的绘图区宽度,只读属性 | var width= graphEngine.width() | |
| height | 图件的绘图区宽度, 只读属性 | var height = graphEngine.height () | |
| authorization | 向服务端请求视图和操作视图等的授权验证信息 | graphEngine.authorization ={ authorization: "12002", user: "admin", password: "123456", data: null }, | |
| background | 图件背景的属性,可直接指定默认的图件背景颜色和样式 backImage:图件背景图片的地址 例如:Http://www.piotsys.com/image/back.gif gradient:指定背景的填充方式 可查看 FillType 枚举值进行复制 | graphEngine.background= { back: "#fff", backImage: "", gradient: FillType.单色填充, back2: "#cccccc" } | |
| grid | lineStyle是绘制网格线条的样式,可查看 LineDashStyle 枚举值进行复制 | graphEngine.grid= { showGrid: true, lineWidth: 1, lineStyle: LineDashStyle.虚线, lineColor: "#ccc", space: 40 } | |
| zoomFactor | 图件缩放比例系数 是小数,初始值为1 例如设置为2表示图件当前放大两倍 | Var zoom= graphEngine. zoomFactor | |
| container | 当前加载的graphGngine的容器对象 | Var container= graphEngine.container container.attr(“style”,””); | |
| activeLayer | 当前正在用的图层,这个事一个GraphLayer 对象,具体查看 GraphLayer的相关参数 | ||
| mouseEvent | 当前在绘图区鼠标的对象,可通过这个获取当前图件鼠标的具体坐标位置 | Var event= graphEngine. mouseEvent Var x=event.offsetX Var y=event.offsetY | |
| shapeDrawMode | 设置图件的绘图方式,主要有两种方式 GraphDrawMode.reverse 逆序绘制 GraphDrawMode.positive 正序绘制 | graphEngine.shapeDrawMode GraphDrawMode.positive graphEngine.shapeDrawMode GraphDrawMode. reverse | |
| shapes | 图件上绘图图元的集合 是一个 GraphShape对象,具体属性可查看GraphShape 类的相关属性 | Var shapes= graphEngine.shapes; For(vai i=0;i< shapes.length;i++) { } | |
| layers | 图件图层的集合,具体对象查看 GraphLayer对象的属性 | Var shapes= graphEngine. layers; For(vai i=0;i< layers.length;i++) { } | |
| hoverShape | 当前正在选中做编辑的图元,是一个 GraphShape类 | Var shape= graphEngine. hoverShape; | |
| viewOption | 用户服务上存储绘图视图的配置 | graphEngine. viewOption { saveUrl://保存图件的服务器路径 "https://localhost:44315/graph/saveview", getUrl://从服务器获取一个视图内容的路径 "https://localhost:44315/graph/getview", addUrl: 新建立一个绘图视图的地址"https://localhost:44315/graph/addview", loadUrl: 加载服务器上存档视图列表 "https://localhost:44315/graph/loadview", deleteUrl:删除一个视图的地址 "https://localhost:44315/graph/deleteview", editViewNameUrl: "https://localhost:44315/graph/saveviewname", deleteFolderUrl: "https://localhost:44315/graph/deletefolder", editFolderUrl: "https://localhost:44315/graph/editfolder", }, | |
| scadaOption | 当前使用的组态数据点表的配置 | graphEngine. scadaOption { realReadTimes: 300,//毫秒 realDataUrl: "",//数据读取的json地址 commandUrl: "",//命令下置的URL ioPointUrl: ""//获取IO数据点表的地址 }, | |
| uploadOption | 图件上传图片和各种文件的服务器地址 | graphEngine. uploadOption { imageUrl: "https://localhost:44315/graph/uploadimage",//用户图片上传的URL路径 fileUrl: "https://localhost:44315/graph/uploadfile",//用户文件上传的URL videoUrl: "https://localhost:44315/graph/uploadvideo",//用户视频上传的URL路径 } | |
| 图件的相关事件返回 | |||
| graphMouseMove | 图件鼠标移动的事件 | graphEngine. graphMouseMove =function(event){Alert(event.offsetX); } | |
| shapeMouseMove | 正在移动图元的事件返回 | graphEngine. shapeMouseMove =function(event,shape){Alert(shape.name); } | |
| graphMouseDown | 当鼠标点击图件的时候事件 | graphEngine. graphMouseDown =function(event){Alert(event.offsetX); } | |
| shapeMouseDown | 当鼠标点击图元的时候事件 | graphEngine. shapeMouseDown =function(event,shape){Alert(shape.name); } | |
| graphMouseUp | 当鼠标按下图件起来的事件 | graphEngine. graphMouseUp =function(event){Alert(event.offsetX); } | |
| shapeMouseUp | 当鼠标按下图元起来的事件 | graphEngine. shapeMouseUp =function(event,shape){Alert(shape.name); } | |
| graphDbClick | 当用户双击图件的事件 | graphEngine. graphDbClick =function(event){Alert(event.offsetX); } | |
| shapeDbClick | 当用户双击图元的事件 | graphEngine. shapeDbClick =function(event,shape){Alert(shape.name); } | |
| shapeCuted | 当用户剪贴图元后发生的事件 | graphEngine. shapeCuted =function(shape) {Alert(shape.name); } | |
| shapeCopyed | 当复制图元后发生的事件 | graphEngine. shapeCopyed =function(shape) {Alert(shape.name); } | |
| shapePasted | 粘贴图元后发生的事件 | graphEngine. shapePasted =function(shape) {Alert(shape.name); } | |
| graphPainted | 绘图的时候发送的事件 | graphEngine. shapePasted =function(graphics) } | |
| graphZoomed | 图件缩放发送的事件 | graphEngine. graphZoomed =function(zoom) } | |
| mouseInfomation | 鼠标在图件上移动的时候输出的鼠标信息 | graphEngine. mouseInfomation =function(message) } | |
| shapeSelected | 选择了一个图元的事件 | graphEngine. shapeSelected =function(shape){Alert(shape.name); } | |
| shapesSelected | 鼠标拖动选择了多个图元额事件,返回的是一个 | graphEngine. shapesSelected =function(shapes){Alert(shape.name); } | |
| coordinateSystem | 图件的坐标系设置 | graphEngine.coordinateSystem=new CoordinateSystem(); graphEngine.coordinateSystem. graphEngine.coordinateSystem.top = 0;//映射的顶坐标 graphEngine.coordinateSystem.bottom = 0;//映射的底坐标 graphEngine.coordinateSystem.left = 0;//映射的左坐标 graphEngine.coordinateSystem.right = 0;//映射的右坐标 graphEngine.coordinateSystem.mapWidth = 30;//设置图件的宽度(cm) graphEngine.coordinateSystem.mapHeight = 30;//设置图件的高度(cm) graphEngine.coordinateSystem.mapMargin = 1;//设置图件空白边距(cm) graphEngine.coordinateSystem.coodinateType = "normal";//mapping,normal | |
| 图件操作的API | |||
| saveAs | 将当前图件另存为一个图片 | graphEngine.saveAs () | |
| saveImage | 保存图片到本地 | graphEngine. saveImage () | |
| CreateEngine | 初始化图形引擎 参数是容器(div) 或者是 Body的id | graphEngine.CreateEngine(containerId) | |
| CreatePurenessEngine | 初始化图形引擎 参数是容器(div) 或者是 Body的id, 这个事创建一个只有绘图区域和属性区域的界面 | graphEngine.CreatePurenessEngine(containerId) | |
| save | 将当前视图和Json内容保存到服务器 | graphEngine. save () | |
| drawItem | 设置当前图件要绘制的图形, 参数”none”,当前图件鼠标处于选择和编辑图元状态 参数”move”,设置用鼠标移动整个图件 参数”图元的类名称” 鼠标拖到用来绘制该图元 | graphEngine. drawItem (shapeClassName) | |
| refreshPaint | 刷新图件的之前绘图并显示这个事缓存里的 | graphEngine. refreshPaint () | |
| paint | 实时刷新绘图 | graphEngine. paint () | |
| zoomMap | 给一个缩放比例并缩放图件 | graphEngine.zoomMap(zoomFactor) | |
| showMessageDialog | 弹出一个easyui提示窗 | graphEngine.showMessageDialog (message) | |
| showConfirmDialog | 弹出一个带确定和取消的对话框 successFun 是传入确定后的执行方法 | graphEngine.showConfirmDialog (message,function(){ alert(“点击确定按钮了”); }) | |
| formDialog | 弹出一个自定义内容的窗体 Savefun 当用户点击确认时候要执行的方法 Destroyfun:窗体内容销毁的额方法 beforeOpen:窗体内容打开前调用的方法 content:窗体的html | graphEngine.formDialog(title, width, height, savefun, destroyfun, beforeOpen, content) | |
| appendContextMenuItem
| 添加一个自定义鼠标右键菜单项 Click是一个function | graphEngine. appendContextMenuItem (id,text,function(){ Alert(“测试菜单”) }) | |
| removeContextMenuItem | 删除一个鼠标右键菜单项,参数是输入要删除菜单的text | graphEngine. removeContextMenuItem (menuId) | |
| clearContextMenuItem | 清空自定义菜单项 | graphEngine. clearContextMenuItem() | |
| enableDefaultMenu | 是否启用默认鼠标右键菜单 true为启用 false 为不启用 | graphEngine.enableDefaultMenu =true | |
| enableDefaultShapeMenu | 当用户选择某个图元显示图元的菜单项的时候,是否禁用默认和启用默认的图元菜单项 | graphEngine.enableDefaultShapeMenu=true | |
| resetContextMenu | 刷新鼠标右键菜单,当删除和增加自定义菜单后必须用这个方法 | graphEngine. resetContextMenu () | |
| Width() | 获取图件的宽度 参数为空 | graphEngine.width() | |
| Height() | 获取图件的高度 参数为空 | graphEngine.height () | |
| newGuid | 随机分配一个唯一ID | Var id=graphEngine.newGuid() | |
| graphDrawMode(mode) | 参数为 | 设置绘图模式 graphEngine. graphDrawMode(GraphDrawMode.reverse); | |
| addToolBarItem (btnId, iconCls, title, click) | 在工具条上增加一个自定义按钮 btnId: 按钮Id, iconCls: 按钮图标,图标请在icon.css中配置, title:按钮标题; click:按钮执行的方法 | graphEngine.addToolBarItem (“btnCus”, “cusIcon”, “测试按钮”, function() { Alert(“这是一个自定义按钮”) }) | |
| clearToolBarItem | 删除工具栏上所有按钮 | graphEngine. clearToolBarItem (); | |
| defaultToolBar | 恢复工具条为默认按钮 | graphEngine. defaultToolBar (); | |
| restoreOriginalGraph | 恢复默认视图比例1,图件移动的距离是0 | graphEngine. restoreOriginalGraph (); | |
| graphMode | 设置图件模式 | graphEngine. graphMode (GraphMode.edit); | |
| 服务器图件视图API(要配置视图viewOption相关属性) | |||
| initViewFromServer | 从服务器上加载和初始所有视图列表 | graphEngine. initViewFromServer (); | |
| createViewFromServer | 从服务器上加载一个指定视图的存档内容,并在图件中显示视图内容 视图对象为 GraphView,具体参考相关属性 | graphEngine. createViewFromServer (view,function(){ Alert(“从服务器加载视图成功”) }); | |
| loadViewFromServer | 从服务器上加载一个指定ID的视图的存档内容,并在图件中显示视图内容 | graphEngine. createViewFromServer (viewId,function(){ Alert(“从服务器加载视图成果”) }); | |
| deleteViewFromServer | 删除服务器上指定Id的视图,并执行删除成功后的操作方法 | graphEngine. deleteViewFromServer (viewId,function(){ Alert(“从服务器加载视图成功”) }); | |
| saveViewToServer | 保存当前图件上显示的视图内容到服务器 | graphEngine. saveViewToServer (function(){ Alert(“从服务器加载视图成功”) }); | |
| setGraphCoordinateSystem | 设置图件的坐标系系统 传入参数是CoordinateSystem | graphEngine. setGraphCoordinateSystem (coord) | |
| 对已经加载的视图列表的相关操作 | |||
| addView | 向视图列表增加一个视图,并且更新视图目录树,参数是一个GraphView对象 | graphEngine.addView(view) | |
| deleteView | 从视图树删除一个指定ID的视图 | graphEngine.deleteView (viewId) | |
| findView | 从视图列表中查找一个树,返回结果是 GraphView对象 | graphEngine.findView (viewId) | |
| clearView | 删除当前目录下的所有视图 | graphEngine.clearView() | |
| initBlankView | 在当期图件上创建一个空白视图 Title:视图标题 Folder:视图的文件目录或者分类 Cood:视图的坐标系对象(CoordinateSystem ) | graphEngine.initBlankView(title, folder, cood ); | |
| loadViewToGraph | 将指定的视图内容加载到当前的图件中并显示出来,参数是GraphView对象 | graphEngine. loadViewToGraph (view) | |
| ajaxPost | 向指定路径发送Json数据 Fun 参数为一个返回成功后要执行的方法 | ajaxPost: function (url, data, fun) | |
| 视图图层列表的API | |||
| addLayer | 向当期视图中的图层列表增加一个图层,参数是GraphLayer 对象 | graphEngine.addLayer(layer) | |
| insertLayer | 在图层列表指定索引插入一个视图 | graphEngine.insertLayer (layer) | |
| removeLayer | 删除一个指定的视图 参数是GraphLayer | graphEngine.removeLayer (layer) | |
| clearLayers | 清空所有图层和图层上的图元 | graphEngine. clearLayers () | |
| resetLayersManager | 刷新图层界面图层管理器中的数据. 在图层的增删改中如果要让图层管理器上的也变化必须调用此方法 | graphEngine. resetLayersManager () | |
| layerVisible | 设置一个图层的显示和隐藏,传入参数是 图层的索引和true或者是false | graphEngine.layerVisible(index,boolValue) | |
| findLayer | 查找一个指定的图层并返回GraphLayer | Var layer= graphEngine. findLayer (layerId ) | |
| 图元操作的API | |||
| addShape | 向图元列表中增加一个图元,传入参数是 GraphShape和已经存在的一个图层id 传入的shape也可以是一个数组 | graphEngine. addShape (shape,layerId) | |
| insertShape | 向图元列表中的指定位置插入一个图元 | graphEngine. addShape (shape,scrIndex,layerId) | |
| removeShape | 删除指定的图元或者图元集合 传入的shape也可以是一个数组 | graphEngine. removeShape (shapes ) | |
| findShape | 查找一个指定Id或者名称的图元,并返回GraphShape | Var shape= graphEngine. findShape (shapeNameOrID ) | |
| lockShape | 锁定一个图元,当图元锁定后无法移动调整大小 | graphEngine. lockShape (shapeId) | |
| unLockShape | 将已经锁定的图元取消锁定 | graphEngine. unLockShape (shapeId) | |
| 绘图操作API | |||
| showGrid | 设置图件上的背景网格显示和隐藏 | graphEngine. showGrid(bool) | |
| deleteSelected | 删除用户在图件上选择的图元 | graphEngine. deleteSelected () | |
| selectAll | 设置图件上所有图元处于选中状态 | graphEngine. selectAll () | |
| deselectAll | 设置图件上所有图元处于非选中状态 | graphEngine. deselectAll () | |
| sendToBack | 将一个指定的图元放置到图件最底层, 传入参数是GraphShape | graphEngine. sendToBack (shape) | |
| sendToBackwards | 将一个指定的图元放置到指定序位的位置后面. 传入参数是GraphShape和后置的数量.层序是根据图元的遮挡来算 | graphEngine. sendToBackwards shape, zShift) | |
| sendToFront | 将一个指定的图元放置到图件最前面, 传入参数是GraphShape | graphEngine. sendToFront (shape) | |
| sendToForwards | 将一个指定的图元放置到指定序位的位置的前面. 传入参数是GraphShape和后置的数量.层序是根据图元的遮挡来算 | graphEngine. sendToForwards shape, zShift) | |
| cut | 剪贴指定的一个图元,参数是图元id | graphEngine.cut(shapeId) | |
| copy | 复制指定的一个图元,参数是图元id | graphEngine. copy (shapeId) | |
| paste | 粘贴指定的一个图元到指定的位置 | graphEngine. paste () | |
| registeShape | 注册一个自定义图元,customShape 格式如下 { key: "LineShape", creator: function () { return new LineShape(); }, group: "基本形状", text: "直线", icon: "", show: true, classgroup: "常规" } Classgroup:树结构第一级别目录 Group:树结构第二级别目录 Key:自定义图元的名称 creator:为自定义类创建的方法 | graphEngine.registeShape(customShape) | |
| exportSVG | 导出当前视图的svg模板,如果是做好图后需要用在组态或者是别人浏览可以导出svg并发布到服务器上 | Var svgHtml=graphEngine. exportSVG () | |
| refresh | 这个方法是封装了图件上主要相关操作 第一个参数是操作命令,第二个参数是操作值 graphEngine.refresh(“showGrid”) 显示网格 graphEngine.refresh(“hideGrid”)隐藏网格 graphEngine.refresh(“editView”,viewId)编辑服务器上的某个视图 graphEngine.refresh(“reload ”)从服务器上下载更新当前id的视图内容 graphEngine.refresh(“paint ”)刷新绘图 graphEngine.refresh(“selectAll”)所有图元处于选中状态 graphEngine.refresh(“deselectAll”)所有图元非选中状态 graphEngine.refresh(“restore ”)恢复图件到正常比例和位置 graphEngine.refresh(“deleteShape”,shapeId)删除指定的图元 graphEngine.refresh(“delete ”) 删除所有选择的图元 graphEngine.refresh(“deleteLayer”,layerId)删除指定的图层 graphEngine.refresh(“showLayer”,layerId) 显示一个图层 graphEngine.refresh(“hideLayer”,layerId) 隐藏一个图层 graphEngine.refresh(“showShape”,shapeId)显示一个图元 graphEngine.refresh(“hideShape”,shapeId)隐藏一个图元 graphEngine.refresh(“sendToBack”,shapeId)图元置底 graphEngine.refresh(“sendToBackwards”,shapeId)图元后置一个序位 graphEngine.refresh(“sendToFront”,shapeId)图元置顶 graphEngine.refresh(“lockShape”,shapeId)锁定图元 graphEngine.refresh(“unLockShape”,shapeId)取消锁定图元 graphEngine.refresh(“cut”,shapeId)剪贴图元 graphEngine.refresh(“copy”,shapeId)复制图元 graphEngine.refresh(“paste”)粘贴图元 graphEngine.refresh(“clearAll”)清空图件 graphEngine.refresh(“refresh ”)刷新图件,显示之前缓存绘制过的 graphEngine.refresh(“paintCache”) 更新缓存绘图 graphEngine.refresh(“paintGrid”)刷新背景网格 graphEngine.refresh(“paintBackgroud”)刷新背景 graphEngine.refresh(“expSvg ”)导出svg graphEngine.refresh(“save”) 保存视图内容JSON到服务器 graphEngine.refresh(“saveImage”)保存为图片 graphEngine.refresh(“preview ”)视图svg格式预览 graphEngine.refresh(“publish”)发布svg设计视图到服务器 graphEngine.refresh(“testing”) 加载一个含有5000个图元的测试 | graphEngine.refresh(operator,value) | |
| 图元的基类GraphShape API | |||
| id | 图元的唯一id | ||
| name | 图元名称 | ||
| layerId | 图元所在图层的id | ||
| isSelected | 图元所在选中状态 true false | ||
| lock | 图元的锁定状态 true false | ||
| visible | 图元的隐藏显示状态 true false | ||
| globalAlpha | 图元整体透明度 0-1 | ||
| startPoint | 线段的起点 {x,y} | ||
| endPoint | 线段的终点{x,y} | ||
| rectangle | 图元的绘图区域 Rectangle类 | ||
| points | 图元不规则路径的拐点是{x,y}数组 | ||
| className | 图元的类的字符串名称 | ||
| enableAnimate | 当前图元是否启用动画 | ||
| enableFilter | 当前图元是否启用滤镜 | ||
| offset(x,y) | 图元偏移一定的距离 | ||
| childenSerialize(sender) | 继承类图元要实现的序列化 | ||
| childenDeserialization(sender) | 继承类要实现的反序列化 | ||
| shapeMenu() | 继承类要实现的图元鼠标右键菜单 | ||
| addShapeProperites() | 继承类图元要实现的显示在属性窗体中的属性 | ||
| setShapeProperties | 属性窗体返回设置后如何设置属性 | ||
| setShapeConnector() | 配置图元连接点 | ||
| onMouseDown(sender,e) | 继承类中实现鼠标按下的实现 | ||
| onMouseUp(sender,e) | 继承类中鼠标按起的实现 | ||
| onMouseMove(sender,e) | 继承类中鼠标移动的实现 | ||
| hitShape(r) | 继承类中实现判断选中图元的规则 r 传入为当前鼠标点击中心的一个矩形区域 | ||
| dbclick(e) | 继承类中实现鼠标双击 | ||
| delete() | 删除图元自己从图件中 | ||
| paintShape(graphics) | 当前图元的绘制实现 | ||
| selectedPaint(graphics) | 当前图元中如果选中的时候绘制的显示状态 | ||
| 系统枚举类的全局变量 | |||
| GraphMode | 视图模式 GraphMode.edit 编辑模式 GraphMode.view 非编辑模式 | ||
| GraphDrawMode | 绘图顺序 GraphDrawMode .positive 正序 GraphDrawMode .reverse 逆序 | ||
| LineDashStyle | LineDashStyle.实线 LineDashStyle.虚线 LineDashStyle.点划线 LineDashStyle.划线 LineDashStyle,点点划线 | ||
| FillType | 图元的填充样式 FillType.水平居中渐变 FillType.垂直居中渐变 FillType.水平渐变 FillType.垂直渐变 FillType.单色填充 FillType.径向居中渐变 FillType.径向渐变 FillType.不填充 | ||
| FontStyle | 字体样式 斜体 和正常 FontStyle.normal FontStyle.italic FontStyle.blique | ||
| FontWeight | 字体粗体和正常 FontWeight.normal FontWeight.bold FontWeight.bolder FontWeight.lighter | ||
| FontAlign | 字体水平对齐方式 FontAlign.右 FontAlign.中 FontAlign.左 | ||
| FontBaseLine | 字体垂直对齐方式 FontBaseLine.远 FontBaseLine.中 FontBaseLine.近 | ||
| ConnectorLineArrowStyle | 线段的箭头样式 ConnectorLineArrowStyle.start: "起始箭头", ConnectorLineArrowStyle.end: "结束箭头", ConnectorLineArrowStyle.double: "双箭头", ConnectorLineArrowStyle.none: "无箭头" | ||
| RoundRectStyle= | 矩形圆角的样式 RoundRectStyle .All:,//全部为圆角 RoundRectStyle .Left_Top,//左上角为圆角 RoundRectStyle .Left_Bottom,//做下角为圆角 RoundRectStyle .Right_Top,//右上角为圆角 RoundRectStyle .Right_Bottom,//右下角为圆角 RoundRectStyle .Top,//上边为圆角 RoundRectStyle .Left,//左边为圆角 RoundRectStyle .Right,//右边为圆角 RoundRectStyle .Bottom,//下边为圆角 RoundRectStyle .Left_Top_NoCorner,//左上角不为圆角 RoundRectStyle .Left_Bottom_NoCorner,//做下角不为圆角 RoundRectStyle .Right_Top_NoCorner,//右上角不为圆角 RoundRectStyle .Right_Bottom_NoCorner,//右下角不为圆角 RoundRectStyle .LT_RB,//左上角和右下角为圆角 RoundRectStyle .LB_R//左下角和右上角为圆角 | ||
| 视图对象类GraphView | |||
| GraphView 使用必须 new | title | 视图标题 | |
| id | 视图id | ||
| content | 视图设计的JSON内容 | ||
| folder | 视图分类或服务器文件夹 | ||
| coordinate | 当前视图的坐标系系统 这个是一个 CoordinateSystem | ||
| 矩形区域对象类Rectangle | |||
| Rectangle 类 使用必须new | x | 获取或者设置矩形区域左上角x坐标 | |
| y | 获取或者设置矩形区域左上角y坐标 | ||
| width | 矩形区域的宽度 | ||
| height | 矩形区域的高度 | ||
| left() | 获取左x坐标 | ||
| top() | 获取矩形顶y坐标 | ||
| right() | 获取矩形右x坐标 | ||
| bottom() | 获取矩形底y坐标 | ||
| center() | 返回矩形的中心点{x,y} | ||
| RectangleF(x,y,width,height) | 初始化一个矩形rect.RectangleF(0,0,100,100) | ||
| location() | 返回矩形的左上角坐标{x,y} | ||
| size() | 返回矩形大小(width,height) | ||
| equals(rect) | 返回bool 判断矩形是否相等 | ||
| contains(x,y) | 返回bool 判断矩形是否包含x y 的坐标点 | ||
| inflate(x,y) | 将当前矩形放大或者缩小指定量 | ||
| intersect(rect) | 返回Rectangle 是当前矩形和指定矩形的交叉区域 | ||
| intersectsWith (rect) | 返回bool 判断是否和指定矩形交叉 | ||
| isLineIntersectRectangle (p1,p2) | 判断一个线段是否经过这个矩形,这个线段包含{x,y}的坐标 p1,p2 | ||
| union (rect) | 返回一个当前矩形和指定矩形的合并后的最大包含区域 | ||
| offset(x,y) | 将当前矩形移动一定量的位置 x,y 为偏移量 | ||
| 坐标系统类CoordinateSystem | |||
| CoordinateSystem 使用必须new | coodinateType | “mapping”,指定带有映射坐标的坐标系 ”normal”普通屏幕坐标系 | |
| mapWidth | 图件的宽度 厘米 cm | ||
| mapHeight | 图件的高度 厘米 cm | ||
| mapMargin | 绘图区域距离图件的边距 | ||
| top | 映射图件顶边对应的虚拟坐标 | ||
| bottom | 映射图件底边对应的虚拟坐标 | ||
| left | 映射图件左边对应的虚拟坐标 | ||
| right | 映射图件右边对应的虚拟坐标 | ||
| getMapRectangle() | 获取绘图区域的坐标系 返回值是 Rectangle | ||
| getMapSize() | 获取整个图件的大小,返回值 {width,height} | ||
| returnUToL(ux,uy) | 将虚拟坐标转屏幕坐标,返回{x,y} | ||
| returnUToL_Point(point) | 将虚拟坐标转屏幕坐标,返回{x,y},传入参数是虚拟的{x,y} | ||
| returnUToL_Rectangle(rect) | 将虚拟的一个Rectangle 转屏幕上的一个Rectangle 返回值为Rectangle | ||
| returnLToU(x,y) | 将屏幕坐标 x,y 转一个虚拟的坐标{x,y} | ||
| returnLToU_Point(point) | 将屏幕坐标转虚拟坐标返回{x,y},传入参数是屏幕的{x,y} | ||
| returnLToU_Rectangle | 将屏幕上的矩形区域转映射后的矩形区域,传入参数是屏幕的Rectangle 返回值为Rectangle | ||
| 属性设置窗体的编辑器Editor | |||
| 这个editor是属性窗体中针对不同类型的值而显示不同的编辑器,这个在自定义图元开发中非常有用 调用方式 graphEngine.getEditor(“bool”) 获取一个bool 类的checkbox的编辑器 graphEngine.getEditor(“boolean”) 获取一个bool 类的checkbox的编辑器 graphEngine.getEditor(“color”) 获取一个下拉颜色选择器 graphEngine.getEditor(“string”)获取一个文本输入框, graphEngine.getEditor(“url”) 获取一个网址输入框 graphEngine.getEditor(“image”)获取一个图片上传编辑器 graphEngine.getEditor(“video”) 获取一个视频上传编辑器 graphEngine.getEditor(“file”) 获取一个文件上传编辑器 graphEngine.getEditor(“font”) 获取一个字体设置编辑器 graphEngine.getEditor(“filltype”)获取一个填充样式下来的编辑器 graphEngine.getEditor(“fontname”) 获取一个字体名称选择的编辑器 graphEngine.getEditor(“fontweight”) 获取一个字体粗细选择的编辑器 graphEngine.getEditor(“fontstyle”) 获取一个字体斜体的样式下拉编辑器 graphEngine.getEditor(“linestyle”) 获取一个线样式的下拉编辑器 graphEngine.getEditor(“fontalign”)获取字体水平对齐方式编辑器 graphEngine.getEditor(“fontbaseline”) 取字体垂直对齐方式编辑器 graphEngine.getEditor(“int”) 获取一个整形数值编辑器 graphEngine.getEditor(“float”)小数数值编辑器 graphEngine.getEditor(“angle”) -360到360度的角度编辑器 graphEngine.getEditor(“percentage”)百分数编辑器 graphEngine.getEditor(“percent”)百分数编辑器 graphEngine.getEditor(“zoom”)获取缩放比例编辑器 graphEngine.getEditor(“date”)获取一个日期编辑器 graphEngine.getEditor(“ionumber”)一个数值类的组态IO编辑器 graphEngine.getEditor(“iobool”)一个组态开关量的编辑器 graphEngine.getEditor(“list”,[ {value:”1”,text:”序号1”}, { value:”3”,text:”序号3”} ]) 一个自定义下拉列表的编辑器 graphEngine.getEditor(“iotree”)一个组态IO点表选择的下来编辑器 graphEngine.getEditor(“checklist”, [ {value:”1”,text:”序号1”}, { value:”3”,text:”序号3”} ] )一个自定义多选项的下拉编辑器 | |||
| 系统绘图类graphCanvas API 这个类封装了canvas和svg同步绘制的绘图方法 调用方法: graphCanvas.drawLine() | |||
| graphics | 当前要绘制的canvas绘图对象 | graphCanvas.graphics=value | |
| drawLine(target, eleId, title, p1, p2, pen) | 绘制一个线段 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 p1,p2 线段的两个端点{x,y}类型 pen 传入一个画笔对象 Pen | ||
| drawLines(target, eleId, title, points, pen) | 绘制一条折线 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 points 折线的拐点坐标是一个{x,y}的数组 pen 传入一个画笔对象 Pen | ||
| drawLineArrow (target, eleId, title, p1, p2, arrowColor, arrowStyle, arrowLength, arrowTheta, pen) | 绘制一个带箭头的线段 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 p1,p2 线段的两个端点{x,y}类型 arrowColor 箭头填充颜色 arrowStyle 为箭头样式 ConnectorLineArrowStyle arrowLength 箭头侧边长度 arrowTheta 箭头夹角度数 pen 传入一个画笔对象 Pen | ||
| drawCurve (target, eleId, title, points, pen) | 绘制一个拜塞尔的曲线段 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 points 线的拐点坐标是一个{x,y}的数组 pen 传入一个画笔对象 Pen | ||
| drawArcArrow (target, eleId, title, p1, p2, ctrl1, ctrl2, arrowColor, arrowStyle, arrowLength, arrowTheta, pen) | 绘制一个贝塞尔线段的并且带箭头和控制点 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 p1,p2 线段的两个端点{x,y}类型 ctrl1, ctrl2为控制点 arrowColor 箭头填充颜色 arrowStyle 为箭头样式 ConnectorLineArrowStyle arrowLength 箭头侧边长度 arrowTheta 箭头夹角度数 pen 传入一个画笔对象 Pen | ||
| drawArc (target, eleId, title, p1, p2, ctrl1, ctrl2, pen) | 绘制一个贝塞尔线段的 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 p1,p2 线段的两个端点{x,y}类型 ctrl1, ctrl2为控制点 pen 传入一个画笔对象 Pen | ||
| drawClosedCurve (target, eleId, title, points, fillType, fillColor1, fillcolor2, pen, showBorder) | 绘制一个闭合的曲面 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 points 线的拐点坐标是一个{x,y}的数组 fillType 为FillType 对象,表示面颜色填充方式 fillColor1 如果是渐变色 则第一个,单色填充采用第一个颜色 fillColor2如果是渐变色 则第二个 pen 传入一个画笔对象 Pen showBorder 是否显示面的边框线 | ||
| drawRect (target, eleId, title, rectangle, fillType, fillColor1, fillcolor2, pen, showBorder) | 绘制一个矩形面 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 rectangle 是一个Rectangle 的区域对象 fillType 为FillType 对象,表示面颜色填充方式 fillColor1 如果是渐变色 则第一个,单色填充采用第一个颜色 fillColor2如果是渐变色 则第二个 pen 传入一个画笔对象 Pen showBorder 是否显示面的边框线 | ||
| drawCircle (target, eleId, title, rectangle, fillType, fillColor1, fillColor2, pen, showBorder) | 绘制一个圆 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 rectangle 是一个Rectangle 的正方形 fillType 为FillType 对象,表示面颜色填充方式 fillColor1 如果是渐变色 则第一个,单色填充采用第一个颜色 fillColor2如果是渐变色 则第二个 pen 传入一个画笔对象 Pen showBorder 是否显示面的边框线 | ||
| drawEllipse (target, eleId, title, rectangle, fillType, fillColor1, fillcolor2, pen, showBorder) | 绘制一个矩形区域的椭圆 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 rectangle 是一个Rectangle 的正方形 fillType 为FillType 对象,表示面颜色填充方式 fillColor1 如果是渐变色 则第一个,单色填充采用第一个颜色 fillColor2如果是渐变色 则第二个 pen 传入一个画笔对象 Pen showBorder 是否显示面的边框线 | ||
| drawPolygon (target, eleId, title, points, fillType, fillColor1, fillcolor2, pen, showBorder) | 绘制一个不规则多边型 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 points 线的拐点坐标是一个{x,y}的数组 fillType 为FillType 对象,表示面颜色填充方式 fillColor1 如果是渐变色 则第一个,单色填充采用第一个颜色 fillColor2如果是渐变色 则第二个 pen 传入一个画笔对象 Pen showBorder 是否显示面的边框线 | ||
| drawRegularPolygon (target, eleId, title, rectangle, vertex, startAngle, fillType, fillColor1, fillcolor2, pen, showBorder) | 绘制一个规则的多边型 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 vertex,规则多边形的顶角度,最小为3 rectangle 这个规则区域的最大矩形 fillType 为FillType 对象,表示面颜色填充方式 fillColor1 如果是渐变色 则第一个,单色填充采用第一个颜色 fillColor2如果是渐变色 则第二个 pen 传入一个画笔对象 Pen showBorder 是否显示面的边框线 | ||
| drawRegularStar (target, eleId, title, rectangle, vertex, shrink = 0.55, startAngle, fillType, fillColor1, fillcolor2, pen, showBorder) | 绘制一个规则星形 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 vertex,规则多边形的顶角度,最小为3 shrink 星形内角的收缩系数 rectangle 这个规则区域的最大矩形 fillType 为FillType 对象,表示面颜色填充方式 fillColor1 如果是渐变色 则第一个,单色填充采用第一个颜色 fillColor2如果是渐变色 则第二个 pen 传入一个画笔对象 Pen showBorder 是否显示面的边框线 | ||
| drawPie (target, eleId, title, rectangle, startAngle, sweepAngle, fillType, fillColor1, fillcolor2, pen, showBorder) | 绘制一个基于圆的扇图 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 startAngle 起始角度 sweepAngle 扇形跨过的角度 rectangle 这个规则区域的最大矩形 fillType 为FillType 对象,表示面颜色填充方式 fillColor1 如果是渐变色 则第一个,单色填充采用第一个颜色 fillColor2如果是渐变色 则第二个 pen 传入一个画笔对象 Pen showBorder 是否显示面的边框线 | ||
| drawCrossLines (target, eleId, title, rectangle, vertex, shrink = 0.55, startAngle, pen) | 绘制一个矩形区域内的交叉线 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 vertex,交叉线数量最小为3 shrink收缩系数 rectangle 这个规则区域的最大矩形 pen 传入一个画笔对象 Pe | ||
| drawParallelLine(target, eleId, title, rectangle, vertex, origin, pen) | 绘制一个矩形区域内的平行线 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个线元素的名称 vertex,平行线的数量最小为3 rectangle 区域的最大矩形 pen 传入一个画笔对象 Pen showBorder 是否显示面的边框线 | ||
| drawRoundRect (target, eleId, title, rectangle, r, rectStyle , fillType, fillColor1, fillcolor2, pen, showBorder) | 绘制一个带圆角的矩形面 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个元素的名称 rectangle 是一个Rectangle 的区域对象 r 圆角的半径 rectStyle 是一个RoundRectStyle 枚举类 默认是4个角全部是圆角 fillType 为FillType 对象,表示面颜色填充方式 fillColor1 如果是渐变色 则第一个,单色填充采用第一个颜色 fillColor2如果是渐变色 则第二个 pen 传入一个画笔对象 Pen showBorder 是否显示面的边框线 | ||
| drawText (target, eleId, title, rectangle, text, textfillType, textfillColor1, textfillcolor2, fillType, fillColor1, fillcolor2, font, pen, showBorder) | 绘制一个文本 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个元素的名称 rectangle 文本的Rectangle 的区域对象 textfillType为FillType 对象,表示文本颜色填充方式 textfillColor1 文本的颜色 textfillcolor2 文本颜色的渐变色 illType 为FillType 对象,表示文本背景区域颜色填充方式 fillColor1 文本背景颜色 如果是渐变色 则第一个,单色填充采用第一个颜色 fillColor2文本背景渐变色如果是渐变色 则第二个 font 传入字体对象 pen 传入一个画笔对象 Pen showBorder 是否显示面的边框线 | ||
| drawImage (target, eleId, title, rectangle, image) | 绘制一个图像 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个元素的名称 rectangle 图片显示的Rectangle 的区域对象 image 为图片对象 是一个Image类 | ||
| drawPath (target, eleId, title, fillType, fillColor1, fillColor2, pen, showBorder) | 绘制一个path路径 target 为当前图元GraphShape, eleId 给当前一个ID值, title,绘制的这个元素的名称 fillType 为FillType 对象,表示面颜色填充方式 fillColor1 如果是渐变色 则第一个,单色填充采用第一个颜色 fillColor2如果是渐变色 则第二个 pen 传入一个画笔对象 Pen showBorder 是否显示面的边框线 | ||
| scale(target, scalex,scaley) | 缩放当前元素 target 为当前图元GraphShape, | ||
| translate(target, ofx,ofy) | 移动元素 target 为当前图元GraphShape, | ||
| rotate(target, angle) | 旋转元素 target 为当前图元GraphShape, | ||
| beginPath(target, id) | 开始一段路径绘制 | ||
| closePath() | 结束并闭合路径 | ||
| fill() | 填充图像 | ||
| stroke() | 绘制线或者边框 | ||
| save() | 保存当前绘图状态 | ||
| restore | 恢复当前绘图状态 | ||
| setLinearGradient(id, fillType, fillcolor1, fillcolor2, rectangle) | 设置画刷并返回画刷对象 Id 给一个画刷的ID fillType 为FillType 对象,表示面颜色填充方式 fillColor1 如果是渐变色 则第一个,单色填充采用第一个颜色 fillColor2如果是渐变色 则第二个 | ||
| setPen (lineColor, lineWidth, lineStyle) | 设置画刷并返回画笔 lineColor: 线颜色 lineWidth :线宽度 lineStyle :线样式 是LineDashStyle枚举类 | ||
| setFont(textFontName,textSize,textFontStyle,textFontWeight, textFillType,textColor1,textColor2,textLineHeight,isStroke,textStrokeWidth,textStrokeColor,textAlign, textBaseline) | textFontName: FontName 枚举中的字体 textSize:字体大小 默认14 textFontStyle:FontStyle枚举的字体样式 textFontWeight: FontWeight枚举的字体粗细 textFillType: FillType枚举类的文字填充样式 textColor1: 文本颜色 textColor2:文本渐变色 textLineHeight:文本行距 isStroke: 是否绘制文本边框 textStrokeWidth:文本边框大小 textStrokeColor:文本边框颜色 textAlign:文本水平对齐FontTypeAlign枚举类 textBaseline:文本水平对齐方式 FontBaseline 枚举类 | ||
| getImage(imageUrl) | 获取一个Image对象,传入是网络的url图片地址 | ||
| getDistance(p1, p2) | 获取两个点之间的距离 p1 p2 都是{x,y}对象 | ||
| 绘图图形中的GraphPath类 | |||
| addLine (p1, p2) | 向路径中增加一个线段p1 p2 都是{x,y}对象 | ||
| addLines(points) | 向路径中增加一系列线段points是{x,y}的数组 | ||
| addPolygon(points) | 向路径中增加一个多边形区域points是{x,y}的数组 | ||
| addRect (rect) | 路径中增加一个矩形区域 | ||
| addEllipse (rect) | 路径中增加一个椭圆 | ||
| addPie (rect, startAngle, sweepAngle) | 路径中增加一个扇面 | ||
| addArcLine(rect, startAngle, sweepAngle) | 路径中增加一个弧线 | ||
| addQuadraticCurve (ctrl, end, start) | 增加一个二次贝塞尔曲线 | ||
| addBezierCurve (ctrl1, ctrl2, end, start)/ | 增加一个三次贝塞尔曲线 | ||
| addCircle(center, radious) | 增加一个圆 | ||