• 基础操作:拓扑连线以及矩形文字位置


    1. 拓扑图连线

    效果参见图纸demo示例:

    Bash
    displays/demo/Demos/basic/edgetype.json

    实现步骤如下:

    • 点击工具栏连线,依次在图纸中选中两个图元,即可完成基本连线

     

    • 选中线条配置连线类型,比如"ortho"

     

     

    • 配置连线的两端箭头样式,在“图标集”属性中

     

    JSON
    {
      "symbols/demo/basic/fromArrow.json": {
        "position": 15,
        "keepOrien": true,
        "width": 30,
        "height": 15,
        "names": [
          "symbols/demo/basic/fromArrow.json"
        ]
      },
      "symbols/demo/basic/toArrow.json": {
        "position": 19,
        "keepOrien": true,
        "width": 30,
        "height": 15,
        "names": [
          "symbols/demo/basic/toArrow.json"
        ]
      }
    }

    2. 矩形框及文字

    效果参见图纸demo示例:

    Bash
    displays/demo/Demos/basic/edgebundle.json

     

    实现步骤如下:

    • 图纸中任意拖放一个矩形,找到“文本”属性,输入文字默认显示在下方

     

    • 修改“位置”对应的整数值,会调整文字的相对位置,典型数值和文字显示位置

    注意,文本位置属性中数值是固定的,跟矩形区域的大小、尺寸、位置无关,比如17固定是内部居中,不论怎么移动、修改矩形尺寸都会保持

    17:内部居中

    20:右侧垂直居中

    31:正下方居中

    更多数值对应的对其方式: 

     

     

     

     

     

     

     

     

     

     

     

    wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

     

    wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

     

    wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

     

     

     

     

     

     

     

    利用矩形文字的位置属性,可以实现如右下角图片的效果,即左侧色块、右侧文字,中间间距可调的显示风格,用于作为界面中的关键字标题,避免矩形、文字两个组件拖放且对其等一系列繁琐操作!

    以上是以矩形为例,实际上图纸上的所有矢量图元节点,都有文本属性,都可以这样设置!

    最简单、常见的图标+文字形式需求,是不需要拖放多个图元并进行组合、布局、对齐等复杂操作的!

    3. 连线文字位置

    如下图所示,连线从起始点到目的点,当对文字属性设置内容时,显示区域默认是起止方向的线条下方,默认属性“位置”为17、“纵偏移”为2。

    要想达到如图红色框选的那样,设置位置为3,纵偏移为-5即可!

     4. 交错避开文字

    如下图所示,连线会穿插在文字中:

    只需要在类型为boundary的情况下(其他某些类型下,锚点修改不起作用!),修改锚点值即可,注意锚点值跟文字属性的便宜像素是不一样的,锚点是相对位置,0.5、1、1.5等这样对应的位置变化就会倍数方式定位:

     

    当然,还有方式,就是把其实位置17改成25,这样就在右下角显示文字了!

  • 相关阅读:
    基于jeecgboot的flowable增加流程节点抄送功能
    无线射频芯片CC2540F256RHAR 中文资料介绍
    华为机试 - 勾股数元组
    四元数和旋转矩阵两种方式对旋转向量进行更新结果对比
    Oracle/PLSQL: Atan Function
    全国世界城市列表API接口,免费好用
    go语言并发
    office2019在保存的时候报错
    python3 学习记录 字符串处理
    设计模式——《软件工程与计算》上课笔记
  • 原文地址:https://blog.csdn.net/IOTOS/article/details/127117615