lazy GraphEngine 一款通用的矢量图件绘制引擎 canvas 2d图形引擎 canvas 绘图 svg 绘图

QQ:249250126 微信：18695221159
演示网址:http://124.223.27.3:150/
组态开源系统下载地址:www.lazyiot.cn
二次开发帮助文档：http://www.lazyiot.cn/help.htm

GraphEngine 是一款基于canvas+h5 的web 2d矢量图绘制库，通过这款canvas可以实现从图层-到图件-图元的交互方式应用。集成非常简单，只要要在页面中调用graphEngine.min.js文件，然后按照技术开发文档就可以使用
1 GraphEngine 保存的图件原始文件采用json存储
2 GraphEngine 绘图后的输出到第三方的文件是svg格式的页面，方便用户通过将成果文件可以进行相关javascript操作
3 GraphEngine 可以用来自己开发各种流程图，行业特殊的图件，同时也可以用来开发各种图形编辑器
4 GraphEngine 无缝衔接了svg的绘制，在canas操作绘图的同时也可以输出svg绘图，一绘双用
5 GraphEngine 支持各种34次开发，只需要调用js文件即可集成到任意项目中去
6 GraphEngine 不需要用户关心各种图件上的交互操作，用户只需要按照接口要求实现自己需要的图元即可
7 GraphEngine 可以应用到各种行业中去开发特殊的图形，地质，石油，勘探，煤矿，工控，自动化等各领域
8 GraphEngine 内置了大概2000多种图元，完全满足用户在各行业的工控组态的需要，同时有大量的大屏组件

 

GraphEngine页面调用方式

<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/echarts.min.js"></script> <script src="js/graphEngine.js"></script> <title>通用绘图系统</title> graphEngine.CreateEngine("graphChart"); graphEngine.initViewFromServer(); graphEngine.enableIoHelperJson(true,ioJson);

以下是工控组态的界面

以下是自定义图元的开发案例
定义一个矩形图元
function RectShape() {

//继承基类GraphShape
GraphShape.call(this);
//反序列化图元 json
this.childenDeserialization = function (obj)//反序列化
{
this.fillcolor = obj.fillcolor;
this.fillcolor2 = obj.fillcolor2;
this.borderColor = obj.borderColor;
this.borderWidth = obj.borderWidth;
this.bolderStyle = obj.bolderStyle;
this.showBorder = obj.showBorder
this.fillType = obj.fillType;
this.className = "RectShape";
}
//序列化图元json
this.childenSerialize = function (obj) {
obj.fillcolor = this.fillcolor;
obj.fillcolor2 = this.fillcolor2;
obj.borderColor = this.borderColor;
obj.borderWidth = this.borderWidth;
obj.bolderStyle = this.bolderStyle;
obj.showBorder = this.showBorder
obj.fillType = this.fillType;

obj.className = "RectShape";

},

this.fillcolor = "#FF0000";
this.fillcolor2 = "#00FF00";
this.borderColor = "#000000";
this.borderWidth = 1;
this.showBorder = true;
this.bolderStyle = LineDashStyle.实线;
this.fillType = FillType.单色填充;
this.className = "RectShape";
this.name = "矩形";
//重写基本类菜单 鼠标点击图元显示的右键菜单
this.shapeMenu = function () {
return [
{
id: this.id + "test1",
text: '测试3',
onclick: function () {
this.graphEngine.delete();

    }
  },
  {
    id: this.id + "test2",
    text: '测试3',
    onclick: function () {
      this.graphEngine.delete();

    }
  }

]

};
this.setInfoTip = function () {
return "矩形(x:" + this.rectangle.x + ",y:" + this.rectangle.y + ",w:" + this.rectangle.width + ",h:" + this.rectangle.height + ")"
};
//绘制自定义图元
this.paint = function (graphics) {
var pen = graphCanvas.setPen(this.borderColor, this.borderWidth, this.bolderStyle);
graphCanvas.drawRect(this, this.id, "矩形块", this.rectangle, this.fillType, this.fillcolor, this.fillcolor2, pen, this.showBorder)

};
//添加属性到属性设置界面
this.addShapeProperites = function () {

//处理属性网格的方法
var row = {
  name: '填充样式',
  value: this.fillType,
  group: '图元属性',
  sender: this.id,
  editor: this.graphEngine.getEditor("filltype")
};
this.properties.push(row);

row = {
  name: '填充颜色',
  value: this.fillcolor,
  group: '图元属性',
  sender: this.id,
  editor: this.graphEngine.getEditor("color")
};
this.properties.push(row);
row = {
  name: '填充颜色2',
  value: this.fillcolor2,
  sender: this.id,
  group: '图元属性',
  editor: this.graphEngine.getEditor("color")
};
this.properties.push(row);
row = {
  name: '显示边框',
  value: this.showBorder.toString(),
  group: '图元属性',
  sender: this.id,
  editor: this.graphEngine.getEditor("bool")
};
this.properties.push(row);
row = {
  name: '边框颜色',
  value: this.borderColor,
  group: '图元属性',
  sender: this.id,
  editor: this.graphEngine.getEditor("color")
};
this.properties.push(row);

row = {
  name: '边框宽度',
  value: this.borderWidth,
  group: '图元属性',
  sender: this.id,
  editor: this.graphEngine.getEditor("int")
};
this.properties.push(row);

row = {
  name: '边框样式',
  value: this.bolderStyle,
  group: '图元属性',
  sender: this.id,
  editor: this.graphEngine.getEditor("linestyle")
};
this.properties.push(row);

};
//属性设置界面
this.setShapeProperties = function (data) {

switch (data.name) {
  case "填充样式":
    {
      this.fillType = data.value;
    }
    break;
  case "填充颜色":
    {
      this.fillcolor = data.value;
    }
    break;
  case "填充颜色2":
    {
      this.fillcolor2 = data.value;
    }
    break;
  case "显示边框":
    {
      this.showBorder = this.graphEngine.convertToBool(data.value)
    }
    break;
  case "边框颜色":
    {
      this.borderColor = data.value;
    }
    break;
  case "边框宽度":
    {
      this.borderWidth = parseFloat(data.value);
    }
    break;
  case "边框样式":
    {
      this.bolderStyle = data.value;
    }
    break;
}

};

};