lazyiot web 通用组态，通用canvas矢量图库 开发文档

已于 2023-07-11 12:20:29 修改
阅读量573 收藏
点赞数
文章标签： 前端
于 2023-07-10 13:40:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37731328/article/details/131636917
版权

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)

增加一个圆

马家华
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)
~~~~~~~~~~~~
05-23 2494
绘制图形有很多方法，可以借助Flash实现，也可以使用SVG和VML来绘图。本次将要学习一种新的灰土方法——使用Canvas元素，它是基于HTML5原生的绘图功能。使用Canvas元素，可以绘制图形，也可以实现动画。它方便了使用JavaScript脚本的前端开发人员，寥寥数行代码，就可以在Canvas元素中实现各种图像及动画。 Canvas基本知识 构建Canvas元素 非常简单 你的浏览
用Canvas打造高强度渲染SVG
前端小白
11-10 6078
前言          早就想写这篇博客。一个原因是其中某些内容在某度的面试中遇到，比如第二部分；二是一些需求在实际工程中遇到了。   一、基本概念 Canvas：html5新增的DOM，提供了像素级图形编程接口。支持path，不支持鼠标响应，不能绘制矢量图，依赖分辨率，文本渲染能力弱，刷新能力强。适用于图像密集型编程，如游戏。 SVG：一种使用XML描述2D图像的语言。因此SVG中所有
lazyiot:一款开源的web组态，IOT，物联网产品
05-13
lazyiot 一款开源的web组态，IOT，物联网产品 最新版本修改了部分Bug. 目前整个解决方案采用vs2017进行编译，编译后的所有程序放置在系统目录下的Publish,在Publish目录下包含IOCenter和IOStation 两个文件夹。 IOCenter 是中心服务器的应用程序 IOStation 是采集站的应用程序，在该程序下包含三个exe可执行文件：IOManager.exe 采集站工程管理器,IOMonitor.exe负责采集站上的数据采集与转存，ScadaFlowDesign.exe是组态设计器。 服务器端部署： 1 首先编译发布web端程序，发布工程中Scada.WebServer/UI/SCADA.Web网站工程，将发布的文件拷贝到要部署的电脑或者是服务器上。 2 在发布的电脑上安装iis7以上版本，.net4.5 版本，部署web工程 3 打开部署电脑的we
lazy GraphEngine 一款通用的矢量图件绘制引擎 canvas 2d图形引擎 canvas 绘图 svg 绘图
m0_37731328的博客
07-10 211
return "矩形(x:" + this.rectangle.x + ",y:" + this.rectangle.y + ",w:" + this.rectangle.width + ",h:" + this.rectangle.height + ")"集成非常简单，只要要在页面中调用graphEngine.min.js文件，然后按照技术开发文档就可以使用。7 GraphEngine 可以应用到各种行业中去开发特殊的图形，地质，石油，勘探，煤矿，工控，自动化等各领域。this.name = "矩形";
仅2800元，开源低代码WEB组态，快速搭建物联网大屏+管理后台，轻松交付项目！...
最新发布
05-28 312
WEB组态、大屏可视化工具，现在越来越普遍，做物联网智慧化项目通常跟物联网平台一块成为一项标配，效果通常是这样：而这样的大屏组态你肯定没见过，支持页面嵌套，能搭建后台管理界面，作为一站式前端解决方案！这就是今天要介绍的主角UIOTOS。它能实现上面的组态大屏之外，还能开箱即用，开发各种前端GUI交互界面，不止于可视化！介绍页如下（也由UIOTOS搭建）：UIOTOS作为一款通用的前端工具，支持页面...
lazyiot2.0 开源 物联网组态系统 工控组态软件
m0_37731328的博客
07-10 1060
一款开源的web组态，IOT，物联网产品 一款开源的web组态，IOT，物联网产品 ,改开源系统采用分布式集群部署，支持多采集站/数据中心模式，前端采用web显示 开发语言全部是.net/C# 最新版本2021-10-10
一款基于windows的web组态编辑器，完美解决window端设计web端应用的组态设计器，最重要的是源码开放
m0_37731328的博客
10-16 473
Lazy Scada 是一款基于c# /.net 下开发的windows进行web页面的组态设计器，通过这款设计器用户可以在windows下设计web组态界面，系统发布后的工程采用当前web端最常用的svg格式存储，其发布后的文件可以 嵌入到任何前端网页，同时组态设计器提供了大量的工程类的图元元素，基本满足各行业的需求。同时lazy Scada 从采集到通讯 IO 点表的设计都对应有自己的开源系统，用户可以通过这些代码完善修改成自己的一套scada系统。油田行业的自动化注水系统web页面。
开源项目推荐：SCADA组态软件Qt，kanzi，C#，MFC和WEB大全（收藏版）
thanklife的专栏
09-28 5959
尊重作者，支持原创，如需转载，请附上原地址：https://blog.csdn.net/libaineu2004/article/details/79715737 1、PC端之Qt HmiFuncDesigner https://github.com/VelsonWang/HmiFuncDesigner 高仿武汉舜通QTouch，请重点关注 libaineu2004/HmiFuncDesigner 国内镜像 读开源QScada框架HmiFuncDesigner-master的笔记 https://
从零开始搭建web组态
BY组态
03-03 2354
konva 是一个对 canvas API 做了封装增强的 JavaScript 库。HTML 原生的 canva 提供的 API 比较底层，用法上像是操纵一支画笔进行各种操作，画完就结束了。canvas 本身不维护图形树，你也无法操作修改已被绘制的图形。而 konva 能够像我们操作 DOM 树一样去绘制和维护元素，它会额外维护图形构成的树，并能在绘制后，对特定图形进行样式的修改。你还可以在上面添加事件，比如鼠标滑入某图形时，图形变大一点。此外还支持方便的变形、动画、拖拽等高级能力。
一个基于canvas开发,封装于Vue组件的通用手写签名板
05-06
在现代Web应用开发中，Vue.js是一个非常流行的前端框架，以其易用性和组件化设计而受到广泛欢迎。Vue组件是Vue.js的核心特性，它允许开发者将UI分解为可重用的独立部分，提高了代码的复用性和可维护性。而Canvas API...
canvas矢量图形渲染器
11-06
在本主题中，我们将深入探讨canvas如何作为矢量图形渲染器工作，以及它在Web开发中的应用。 1. **基本概念**：Canvas是一个HTML元素，通过JavaScript API来实现绘图。这个API包括了各种画线、填充形状、绘制图像、...
天空组态软件免费版
10-31
天空组态软件专为智能仪表开发设计。能快速开智能仪表监控系统。方便修改界面，第三方硬件整合。 能实现各种硬件组态、在线温度报警、温度远程控制、批量工业控制、温湿度数据在线存贮。 产品特点: 1、 支持快速硬件数据采样、能以最快的速度完成硬件数据采集、配合腾辉专业硬件，实现1秒500点测量值采样的超快速度。软件支持多线程技术、多个串口设备同时工作。 ２、 方便、快捷的串口硬件驱动开发 、可以在几个小时内完成第三方硬件产品的驱动开发与测试。 ３、 采用特定实时历史数据库算法、海量数据也能快速查询与分析。 ４、不采用任何ＷINDOWS 控件库、实现系系统的最小依赖。 ５、精美的而快速的界面处理技术、最少内存使用、让用户可以开发精美工控画面而实现高效工控软件。 6、作为软硬件生产商、软硬件完美结合、雄厚的技术实力、让用户只专注于工控系统而不是软件本身。 7、内置数据打印、窗体打印、温控曲线、数据报表等控件与方案、更加轻松的实现各种监控系统。 8、采用分布式网络设计技术、让用户可以轻松方便的在网络中管理硬件、实现多台监控系统连网。 http://17zk.com.cn/SkyScada.html
物联网：真正的物联网
02-28
设置新的Raspberry Pi Geometron服务器时，单击下面的链接以加载描述设置新服务器的滚动条。 这始于假设有人已向您分发服务器。 它显示了如何在本地wifi上进行设置，以及如何创建新服务器以在Geometron网络上转发。 加载RASPBERRY PI SETUP滚动 加载诗歌引擎滚动 关于地图，图层和墙壁的滚动 使用GITHUB在全球范围内复制本地服务器的负载滚动 自复制集理论的负载滚动 地磁 诗歌引擎 在Geometron中要做的第一件事是学习操作诗歌引擎。 诗歌引擎指向万维网上的任何图像，并通过在图像上放置单词（如冰箱上的磁铁）来为其添加含义。 这是一种在最抽象的可能意义上将意义强加给任何种类的“事物”，并将该意义立即传递给世界上任何其他人的工具。 现在在Web上查找图像并复制链接。 通过选择您想考虑的事情，在上查找它，然后右键单击您喜欢的文章中的图像，这是最容易做
iotview:物联网云组态
05-13
iotView 物联网云组态
开源IOT最小物联网系统.zip
07-17
文档 一步步搭建物联网系统 HTTP vs CoAP 现有的这个版本是HTTP版，目前的CoAP版正在开发中，欢迎加入。 https://github.com/phodal/iot-coap Minimum Internet of Things A Minimum IOT with arduino and raspberry pi. 一个最小的物联网系统设计方案及源码 android/ 一个最小的Android程序实例 rest/ PHP Laravel Framework to create RESTful API python/ 简单的pyhon示例 hardware/ 硬件串口通信收集 -/ arduino Arduino板 doc/ 文档 简介ppt nginx配置 系统框架图 dashboard/ 基于ruby框架dashing的dashboard 简要的初始化代码说明 代码中因为有两个子模块，即Android与REST，Android是一个简单的Android程序示例,REST作为子模块的原因是考虑到后期会用更简单的源码来替换。但是laravel作为一个运行环境，还是很理想的。 先clone git clone git@github.com:phodal/iot.git iot or git clone https://github.com/phodal/iot.git iot 子模块 git submodule init git submodule update 系统框架图 测试 1.将arduino/BareMinimum.ino 烧录到开发板上 2.执行get.py (ps:如果用的是Windows系统 需要将get.py中的 /dev/ttyACM0 改为 COM*.) sudo python python/get.py 3.打开 http://localhost/athome/create 创建一个数据。打开 http://localhost/athome/1/edit 编辑状态 4.测试网址: b.phodal.com 如何在Android手机上测试 1.下载安装 Stay at Home 交流 QQ群：348100589 中文文档 一个最小的物联网系统设计方案及源码 最小物联网系统（一）——系统组成 最小物联网系统（二）——RESTful 最小物联网系统（三）——创建RESTful 最小物联网系统（四）——详解Laravel的RESTful 最小物联网系统（五）——Laravel RESTful模板化 最小物联网系统（六）——Ajax打造可视化 最小物联网系统（七）——与服务器通讯 最小物联网系统（八）——与单片机通讯 最小物联网系统（九）——Android客户端 最小物联网系统设计——给Laravel添加测试 最小物联网系统——Dashboard License © 2014 Phodal Huang. This code is distributed under the MIT license. 标签：物联网
cax:HTML5 Canvas 2D渲染引擎-小程序，小游戏以及Web通用Canvas渲染引擎
04-01
English |卡克斯 HTML5 Canvas 2D渲染引擎特征简单的API，轻巧和高性能支持PC和Mobile Canvas 2D渲染以及鼠标和触摸事件支持元素和DOM之类的元素管理事件图灵完整的组套系统支持剪辑和剪辑转换内置文本，位图，子...
Web技术课程实验 指导 Canvas.zip
06-10
1.参考网上教程，基于canvas设计一个页面，主题不限。 三、实验报告要求 报告在课程学习平台上提交，内容包括设计的1源代码2实验总结：包括制作这个网页参考的网页网址、遇到的问题和解决方法、心得体会等。
Web开发中的矢量绘图处理和应用
08-20
### Web开发中的矢量绘图处理和应用 #### 前言 自1991年物理学家Tim Berners-Lee首次发布HTML的第一版描述规范文档以来，HTML已迅速发展成为编程领域中最广泛使用的语言之一，也是互联网上最常见的文档格式。尽管...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

马家华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值