gojs 点击事件_GOJS学习（VUE）- Shape

最新推荐文章于 2024-06-13 14:26:56 发布
最新推荐文章于 2024-06-13 14:26:56 发布
阅读量1.9k 收藏 2
点赞数 1
文章标签： gojs 点击事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39541844/article/details/112099259
版权

3bdec6e819c220a6135839d9ec281fbf.png

使用Shape类绘制几何图形，可以控制什么样的形状被绘制，以及它的样式。形状，和文本块、图片一样，是“原子”对象——它们不能包含任何其他对象。因此S类永远不会绘制文本或图像。

Figures

可以将shape.figure属性设置为常用的形状类型。使用GraphObject.make时，可以将图形名作为字符串参数传递。

  mounted () {
    const GO = go.GraphObject.make
    this.diagram = GO(go.Diagram, this.$el)
    this.diagram.add(
      GO(go.Part, 'Horizontal',
        GO(go.Shape, 'Rectangle',        { width: 40, height: 60, margin: 4, fill: null }),
        GO(go.Shape, 'RoundedRectangle', { width: 40, height: 60, margin: 4, fill: null }),
        GO(go.Shape, 'Ellipse',          { width: 40, height: 60, margin: 4, fill: null }),
        GO(go.Shape, 'Diamond',          { width: 40, height: 60, margin: 4, fill: null }),
        GO(go.Shape, 'TriangleRight',    { width: 40, height: 60, margin: 4, fill: null }),
        GO(go.Shape, 'TriangleDown',     { width: 40, height: 60, margin: 4, fill: null }),
        GO(go.Shape, 'TriangleLeft',     { width: 40, height: 60, margin: 4, fill: null }),
        GO(go.Shape, 'TriangleUp',       { width: 40, height: 60, margin: 4, fill: null }),
        GO(go.Shape, 'MinusLine',        { width: 40, height: 60, margin: 4, fill: null }),
        GO(go.Shape, 'PlusLine',         { width: 40, height: 60, margin: 4, fill: null }),
        GO(go.Shape, 'XLine',            { width: 40, height: 60, margin: 4, fill: null })
      ))
  }

创建的图表如下所示：

c88552a5b370ef05ca370223c22d0cb7.png

填充和轮廓

Shape.stroke和Shape.fill分别设置轮廓和填充，大多数情况下会提供一个CSS颜色字符串来表示纯色画笔， 默认为实心黑色画笔，但是通常将它们中的一个指定为空或“透明”。空画笔和透明画笔具有相同的外观，但存在明显的区别，具有不同的操作行为。为空时，形成了一个空心的形状，形状中心区域不会触发鼠标点击事件，不会选中该形状所在的节点，但是透明时会形成一个填充的形状，鼠标点击事件在形状内部会被触发。

<template>
  <div class='lean'></div>
</template>
<script>
import go from 'gojs'
export default {
  data () {
    return {
      diagram: ''
    }
  },
  mounted () {
    const GO = go.GraphObject.make
    this.diagram = GO(go.Diagram, this.$el)
    this.diagram.add(
    GO(go.Part, 'Horizontal',
      GO(go.Shape, { figure: 'Rectangle', width: 40, height: 40, margin: 4 }),
      GO(go.Shape, { figure: 'Rectangle', width: 40, height: 40, margin: 4, fill: 'green' }),
      GO(go.Shape, { figure: 'Rectangle', width: 40, height: 40, margin: 4, fill: 'green', stroke: null }),
      GO(go.Shape, { figure: 'Rectangle', width: 40, height: 40, margin: 4, fill: null, stroke: 'green' }),
      GO(go.Shape, { figure: 'Rectangle', width: 40, height: 40, margin: 4, fill: null, stroke: 'green', strokeWidth: 3 }),
      GO(go.Shape, { figure: 'Rectangle', width: 40, height: 40, margin: 4, fill: null, stroke: 'green', strokeWidth: 6 }),
      GO(go.Shape, { figure: 'Rectangle', width: 40, height: 40, margin: 4, fill: 'green', background: 'orange' })
    ))
  }
}
</script>
<style scoped>
.lean {
  height: 100%;
  width: 100%;
}
</style>

创建的图表如下所示：

796f680ebf99eaac776865146ce2dc79.png 
<template>
  <div class='lean'></div>
</template>
<script>
import go from 'gojs'
export default {
  data () {
    return {
      diagram: ''
    }
  },
  mounted () {
    const GO = go.GraphObject.make
    this.diagram = GO(go.Diagram, this.$el)
    this.diagram.div.style.background = 'lightgray'
    this.diagram.add(
    GO(go.Part, 'Table',
      GO(go.Shape, { row: 0, column: 0, figure: 'TriangleDown', width: 60, height: 60, margin: 4, fill: 'green' }),
      GO(go.TextBlock, 'green', { row: 1, column: 0 }),
      GO(go.Shape, { row: 0, column: 1, figure: 'TriangleDown', width: 60, height: 60, margin: 4, fill: 'white' }),
      GO(go.TextBlock, 'white', { row: 1, column: 1 }),
      GO(go.Shape, { row: 0, column: 2, figure: 'TriangleDown', width: 60, height: 60, margin: 4, fill: 'transparent' }),
      GO(go.TextBlock, 'transparent', { row: 1, column: 2 }),
      GO(go.Shape, { row: 0, column: 3, figure: 'TriangleDown', width: 60, height: 60, margin: 4, fill: null }),
      GO(go.TextBlock, 'null', { row: 1, column: 3 })
    ))
  }
}
</script>
<style scoped>
.lean {
  height: 100%;
  width: 100%;
}
</style>

创建的图表如下所示：

f5b4c178d423d30af0906a3e22961154.png

尝试在每个形状内单击以查看哪些形状将响应单击，并使整个面板处于选中状态。请注意，使用“透明”填充可以看到图表背景，但是当您单击它时，您会“点击”该形状。只有最后一个填充为空的，才是真正的“空心”。单击最后一个形状只会导致单击图表背景，除非单击笔划轮廓。（点击倒三角中心，必须是中心，由于图形原因区域比较小）

几何图形

每一个形状都从它使用的几何图形中得到它的“形状”。几何图形只是对给定一组点如何绘制线的保存描述。设置shape.figure使用可参数化的已命名的预定义几何图形。一般来说，给一个几何图形比给它一个图形更有效。

如果您想要一些不同于gojs中所有预定义图形的东西，您可以通过shape.geometry构建自己的几何图形。构建自己几何图形的一种方法是构建由路径段组成的路径图。在构建基于某些数据计算点的几何图形时，这通常是必需的。无需给几何图形设置desiredSize、height和width等属性。

<template>
  <div class='lean'></div>
</template>
<script>
import go from 'gojs'
export default {
  data () {
    return {
      diagram: ''
    }
  },
  mounted () {
    const GO = go.GraphObject.make
    this.diagram = GO(go.Diagram, this.$el)
    let W_geometry = go.Geometry.parse('M 0,0 L 10,50 20,10 30,50 40,0', false)
    this.diagram.add(
    GO(go.Part, 'Horizontal',
      GO(go.Shape, { geometry: W_geometry, strokeWidth: 2 }),
      GO(go.Shape, { geometry: W_geometry, stroke: 'blue', strokeWidth: 10, strokeJoin: 'miter', strokeCap: 'butt' }),
      GO(go.Shape, { geometry: W_geometry, stroke: 'blue', strokeWidth: 10, strokeJoin: 'miter', strokeCap: 'round' }),
      GO(go.Shape, { geometry: W_geometry, stroke: 'blue', strokeWidth: 10, strokeJoin: 'miter', strokeCap: 'square' }),
      GO(go.Shape, { geometry: W_geometry, stroke: 'green', strokeWidth: 10, strokeJoin: 'bevel', strokeCap: 'butt' }),
      GO(go.Shape, { geometry: W_geometry, stroke: 'green', strokeWidth: 10, strokeJoin: 'bevel', strokeCap: 'round' }),
      GO(go.Shape, { geometry: W_geometry, stroke: 'green', strokeWidth: 10, strokeJoin: 'bevel', strokeCap: 'square' }),
      GO(go.Shape, { geometry: W_geometry, stroke: 'red', strokeWidth: 10, strokeJoin: 'round', strokeCap: 'butt' }),
      GO(go.Shape, { geometry: W_geometry, stroke: 'red', strokeWidth: 10, strokeJoin: 'round', strokeCap: 'round' }),
      GO(go.Shape, { geometry: W_geometry, stroke: 'red', strokeWidth: 10, strokeJoin: 'round', strokeCap: 'square' }),
      GO(go.Shape, { geometry: W_geometry, stroke: 'purple', strokeWidth: 2, strokeDashArray: [4, 2] }),
      GO(go.Shape, { geometry: W_geometry, stroke: 'purple', strokeWidth: 2, strokeDashArray: [6, 6, 2, 2] })
    ))
  }
}
</script>
<style scoped>
.lean {
  height: 100%;
  width: 100%;
}
</style>

创建的图表如下所示：

d2adfe1b86e3b162a674b978563db933.png

角度和比例

除了设置GraphObject.desiredSize或GraphObject.width和GraphObject.height来声明形状的大小之外，还可以设置其他属性来影响外观。例如，可以设置graphObject.angle和graphObject.scale属性。

<template>
  <div class='lean'></div>
</template>
<script>
import go from 'gojs'
export default {
  data () {
    return {
      diagram: ''
    }
  },
  mounted () {
    const GO = go.GraphObject.make
    this.diagram = GO(go.Diagram, this.$el)
    let W_geometry = go.Geometry.parse('M 0,0 L 10,50 20,10 30,50 40,0', false)
    this.diagram.add(
    GO(go.Part, 'Table',
      GO(go.Shape, { row: 0, column: 1, geometry: W_geometry, width: 40, height: 40 }),
      GO(go.Shape, { row: 0, column: 2, geometry: W_geometry, width: 40, height: 40, angle: 30 }),
      GO(go.Shape, { row: 0, column: 3, geometry: W_geometry, width: 40, height: 40, scale: 1.5 }),
      GO(go.Shape, { row: 0, column: 4, geometry: W_geometry, width: 40, height: 40, angle: 30, scale: 1.5 })
    ))
  }
}
</script>
<style scoped>
.lean {
  height: 100%;
  width: 100%;
}
</style>

创建的图表如下所示：

8975141316f2300aa51d52a2bd3cc37c.png

Shape.fill和GraphObject.background画笔会随形状缩放和旋转。GraphObject.areaBackground是在面板中绘制的，因此它不受对象的比例或角度的影响。

<template>
  <div class='lean'></div>
</template>
<script>
import go from 'gojs'
export default {
  data () {
    return {
      diagram: ''
    }
  },
  mounted () {
    const GO = go.GraphObject.make
    this.diagram = GO(go.Diagram, this.$el)
    let bluered = GO(go.Brush, 'Linear', { 0.0: 'blue', 1.0: 'red' });
    let yellowgreen = GO(go.Brush, 'Linear', { 0.0: 'yellow', 1.0: 'green' });
    let grays = GO(go.Brush, 'Linear', { 0.0: 'black', 1.0: 'lightgray' });
    this.diagram.add(
    GO(go.Part, 'Table',
      GO(go.Shape, 
        { row: 0,
          column: 0,
          figure: 'TriangleDown',
          width: 40,
          height: 40,
          angle: 0,
          scale: 1.5,
          fill: bluered,
          background: yellowgreen,
          areaBackground: grays
        }),
      GO(go.Shape, { row: 0, column: 1, width: 10, fill: null, stroke: null }),
      GO(go.Shape,
        { row: 0,
          column: 2,
          figure: 'TriangleDown',
          width: 40,
          height: 40,
          angle: 45,
          scale: 1.5,
          fill: bluered,
          background: yellowgreen,
          areaBackground: grays
        })
    ))
  }
}
</script>
<style scoped>
.lean {
  height: 100%;
  width: 100%;
}
</style>

创建图表如下所示：

58ba57cf197160ac50a664f70426e211.png

自定义

如上图所示，只需设置shape.geometry或shape.geometryString即可轻松创建自定义形状。这在导入SVG时特别方便。但是，也可以定义其他命名图形，当您希望通过设置或数据绑定shape.figure属性轻松指定或更改现有形状的几何图形时，这很方便。

静态函数shape.defineFigureGenerator可用于定义新的图形名称。第二个参数是一个函数，它有形状、宽度和高度三个参数，生成和返回几何图形。这允许基于形状属性和大小参数化几何图形。特别是，在生成几何图形时，除了宽度和高度之外，还可以考虑shape.parameter1和shape.parameter2属性。要有效的生成的几何图形，边界必须等于或小于提供的宽度和高度。

<template>
  <div class='lean'></div>
</template>
<script>
import go from 'gojs'
export default {
  data () {
    return {
      diagram: ''
    }
  },
  mounted () {
    const GO = go.GraphObject.make
    this.diagram = GO(go.Diagram, this.$el)
    this.defineFigureGenerator('RoundedTopRectangle', this.RoundedTopRectangle)
    this.defineFigureGenerator('RoundedBottomRectangle', this.RoundedBottomRectangle)
    this.diagram.nodeTemplate =
      GO(go.Part, 'Spot',
        {
          selectionAdorned: false,
          resizable: true,
          resizeObjectName: 'SHAPE',
          rotatable: true,
          rotateObjectName: 'SHAPE'
        },
        GO(go.Shape,
          {
            name: 'SHAPE',
            fill: GO(go.Brush, 'Linear', { 0.0: 'white', 1.0: 'gray' }),
            desiredSize: new go.Size(100, 50)
          },
          new go.Binding('figure', 'fig'),
          new go.Binding('parameter1', 'p1')),
        GO(go.Panel, 'Vertical',
          GO(go.TextBlock,
            new go.Binding('text', 'fig')),
          GO(go.TextBlock, { stroke: 'blue' },
            new go.Binding('text', 'parameter1', function(p1) { return p1; }).ofObject('SHAPE'))
        )
      )
    this.diagram.model = new go.Model([
      { fig: 'RoundedTopRectangle' },
      { fig: 'RoundedTopRectangle', p1: 0 },
      { fig: 'RoundedTopRectangle', p1: 3 },
      { fig: 'RoundedTopRectangle', p1: 10 },
      { fig: 'RoundedTopRectangle', p1: 50 },
      { fig: 'RoundedTopRectangle', p1: 250 },
      { fig: 'RoundedBottomRectangle' },
      { fig: 'RoundedBottomRectangle', p1: 0 },
      { fig: 'RoundedBottomRectangle', p1: 3 },
      { fig: 'RoundedBottomRectangle', p1: 10 },
      { fig: 'RoundedBottomRectangle', p1: 50 },
      { fig: 'RoundedBottomRectangle', p1: 250 }
    ])
  },
  methods: {
    defineFigureGenerator (name, geo) {
      go.Shape.defineFigureGenerator(name, function(shape, w, h) {
        let p1 = 5
        if (shape !== null) {
          let param1 = shape.parameter1
          if (!isNaN(param1) && param1 >= 0) p1 = param1
        }
        p1 = Math.min(p1, w / 2)
        p1 = Math.min(p1, h / 2)
        return geo(w, h, p1)
      })
    },
    RoundedBottomRectangle (w, h, p1) {
      let geo = new go.Geometry()
      geo.add(new go.PathFigure(0, 0)
        .add(new go.PathSegment(go.PathSegment.Line, w, 0))
        .add(new go.PathSegment(go.PathSegment.Line, w, h - p1))
        .add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
        .add(new go.PathSegment(go.PathSegment.Line, p1, h))
        .add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1).close()))
      geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0)
      geo.spot2 = new go.Spot(1, 1, -0.3 * p1, -0.3 * p1)
      return geo
    },
    RoundedTopRectangle (w, h, p1) {
      let geo = new go.Geometry()
      geo.add(new go.PathFigure(0, p1)
        .add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1))
        .add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
        .add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
        .add(new go.PathSegment(go.PathSegment.Line, w, h))
        .add(new go.PathSegment(go.PathSegment.Line, 0, h).close()))
      geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1)
      geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0)
      return geo
    }
  }
}
</script>
<style scoped>
.lean {
  height: 100%;
  width: 100%;
}
</style>

创建图表如下所示：

d42563f93209857c426663eb466ca97a.png

gojs资料来源官网内容翻译与自己实现绘制，将持续更新，敬请关注

weixin_39541844
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bukkit 监听器 自制事件
Jeason_Lan
09-18 1063
Bukkit 监听器 自制事件
GoJS的流程图
12-27
基于GoJS插件的一个流程图插件，且有做过微调整。颜色样式均作了改动。仅做参考，GoJS为收费插件。
gojs常用API-节点定义
热门推荐
qq_29287561的博客
12-27 1万+
节点定义 node中文文档入口 公用属性 所有节点块定义都能通用的属性 属性 描述 属性值(NaN为自适应，其他值为举例) minSize 最小范围 new go.Size(50, NaN)或new go.Size(50, 200) maxSize 最大范围 同上 width 宽 height 高 ma...
vue3使用gojs图表流程图
最新发布
weixin_52830464的博客
06-13 418
【代码】vue3使用gojs图表流程图。
onresize事件会被多次触发_JavaScript从零开始——DOM事件编程（3）
weixin_39707612的博客
12-03 295
前面两个章节都是事件的监听和控制，从这一章节开始，就涉及到具体的事件内容了，比如鼠标、键盘等等，先从鼠标开始。1 鼠标事件的种类鼠标事件指与鼠标相关的事件，继承了MouseEvent接口。具体的事件主要有以下一些：click：按下鼠标（通常是按下主按钮）时触发。dblclick：在同一个元素上双击鼠标时触发。mousedown：按下鼠标键时触发。mouseup：释放按下的鼠标键时触发。mousem...
JS点击事件及模型
m0_73646776的博客
09-27 182
JS点击事件及模型
GoJS事件
weixin_30376509的博客
08-09 1834
1、阻止键盘事件 myDiagram.commandHandler.doKeyDown = function （） { var e = myDiagram.lastInput; // Meta（Command）键代替Mac命令的“控制” var control = e.control || e.meta; var key = e.key; //退...
gojs 事件监听
qq_41152898的博客
04-28 1万+
gojs事件监听gojs的事件监听比较多，比如给元素添加点击事件的话 myDiagram.addDiagramListener("ObjectSingleClicked", function(e,obj) {...}节点文本的修改事件myDiagram.addDiagramListener("textEdited", function(textBlock,previousText,currentT...
gojs 节点右键点击事件_在Excel中禁用右键菜单你会吗？
weixin_36165152的博客
01-15 488
我的目标：让中国的大学生走出校门的那一刻就已经具备这些Office技能，让职场人士能高效使用Office为其服务。支持鹏哥，也为自己加油！有时候，我们接收到一些表，在操作时，别的地方点右键都可以弹出右键菜单，可数据区域点击右键却怎么也弹不出右键菜单呀，这到底怎么回事呀？如下图：数据区域点右键没反应，除了数据区域以外的区域右键都可以弹出菜单。别怀疑，不是你人品的问题，这只是在数据区域禁用了...
gojs常用API-画布操作
pdw2009的专栏
10-09 7395
画布 获取当前画布的json myDiagram.model.toJson(); 加载json刷新画布 myDiagram.model = go.Model.fromJson(model); 删除选中节点或线 myDiagram.commandHandler.deleteSelection(); 获取选中的节点或线 myDiagram.selecti...
gojs 进行覆写复制事件，自定义需要复制和不需要复制的内容
For_Reak的博客
01-29 1968
覆写复制事件不需要进行设置监听，gojs提供了一个函数 Model.copyNodeDataFunction 用来进行覆写复制事件。此事件可以被键盘事件触发，但是也可以被拖拽事件触发。从一个调色板画布拖拽到主画布上时也会触发这个事件。因此慎用。 copyNodeDataFunction函数提供了两个参数：obj和model。第一个参数即是需要复制的对象，第二个参数是画布本身的model。 函
GoJs实现多张数据表互相建立关系，支持拖拽，双击，确立主表
qq_41228055的博客
08-17 941
<template> <div id="wrap"> <el-form :inline="true" class="demo-form-inline"> <el-form-item label="灵活查询名称"> <el-input v-model="dataName" placeholder="名称"></el-input> </el-form-item> <el-for.
gojs在vue中实现画布流程
monthover的博客
09-23 1085
GoJS 是一个用于实现交互式图表的 JavaScript 库，详情可查看根据官网实现以下demo。
go.js的基本使用(主要是vue,react同理)
luofei_create的博客
09-28 6102
go.js的基本使用，在vue中使用go.js完成业务逻辑，解析部分文档内容，代码中有详细注解
记录--VUE使用GOJS（操作数据、消除水印、导出图片等）
weixin_41611635的博客
08-31 2101
因为GOJS属于不能免费商用的插件，后改用antv X6来实现流程图效果，使用方法可查看我另一篇记录 GOJS官网 首先引入GOJSnpm install gojs --save 文件中引入import go from "gojs"; 关于去除左上角水印网上找的方法基本查找那串数字但是我的版本为"gojs": "^2.1.48"，找遍了没有找到，最后发现一篇文章中的方法完美实现去除水印； 方法是在node_modules\gojs\release\go.js文件中找到String.fromCharCod.
在Vue中使用 GoJS 流程图
Mystery2020的博客
10-13 677
在Vue中使用 GoJS 流程图
vue项目里引用 gojs 流程图
weixin_43478305的博客
07-02 4659
gojs 要实现的需求调研了多种可拖拽流程图的技术，如：bpmn.js,gojs等 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 今天先讲一下gojs 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Mar
gojs拓扑图实现节点外围圆环按钮
small_33的博客
08-21 1247
实现效果：（并且鼠标移上去改变背景颜色) 官方案例参考：https://gojs.net/latest/samples/radialAdornment.html 珊妹儿这就给大家献上代码： 一、首先引用文件： <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="./js/gojs/go.js">
在html直接引入unpkg.com_vue3-print-nb@0.1.4_dist_vue3-print-nb.umd.js怎么使用
10-21
在html直接引入unpkg.com_vue3-print-nb@0.1.4_dist_vue3-print-nb.umd.js后，你可以通过以下步骤来使用它： 1. 在html文件中添加一...当用户点击这个按钮时，Vue3PrintNb组件会将print-content属性中的内容打印出来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值