vue中go.js的使用教学(三:创建零部件)

news2025/7/15 9:07:11

目录

1.介绍

2.创建零部件

一.复杂版

 二.简洁版

a.(小复杂版)重写上方复杂版代码:

b.(优化版)重写上方小复杂版

 c.这边在加一个扩展(GraphObject.make 构建一个 Brush)


1.介绍

这边的零部件,指的是每一个节点,例如文本块、形状、图片和面板,可能包含更多图形对象

2.创建零部件

一.复杂版

(通过一个一个的塞配置到shape,到textblock里生成一个方框,在通过node.add添加进图例,并把node通过add添加进渲染的图标)

 var node = new go.Node(go.Panel.Auto);//创建node
  var shape = new go.Shape();//创建shape自定义图
  shape.figure = "RoundedRectangle";//配置figure的边框圆弧
  shape.fill = "lightblue";//配置边框颜色
  node.add(shape);//把自定义shape添加进node
  var textblock = new go.TextBlock();//创建文本自定义
  textblock.text = "Hello!";//文本的显示内容
  textblock.margin = 5;//文本的margin宽度
  node.add(textblock);//把自定义textblock添加进node
  diagram.add(node);//把node添加进图表

 生成图像:

 

 二.简洁版

通过GraphObject.make创建:支持以嵌套方式构建对象,其中缩进为您提供有关可视化树中深度的线索。

a.(小复杂版)重写上方复杂版代码:

var $ = go.GraphObject.make;//创建make
//添加入diagram,这边是创建画板后的id那个对象,可以看第一章
  diagram.add(
//添加node
    $(go.Node, go.Panel.Auto,
      //添加shape
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "lightblue" }),
      //添加TextBlock
      $(go.TextBlock,
        { text: "Hello!",
          margin: 5 })
    ));

b.(优化版)重写上方小复杂版

var $ = go.GraphObject.make;
  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
      $(go.TextBlock, "Hello!", { margin: 5 })
    ));

生成:a,b生成的图像与复杂版一样 

 c.这边在加一个扩展(GraphObject.make 构建一个 Brush)

eg:原本fill是蓝色,这边的go.Brush,使他变成了渐变色 

diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: $(go.Brush, "Linear",
                  { 0.0: "Violet", 1.0: "Lavender" }) }),
      $(go.TextBlock, "Hello!",
        { margin: 5 })
    ));

生成:

后面还有更简洁方法!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/362351.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

破解遗留系统快速重构的5步心法(附实例)

前两天和一个架构师朋友闲聊,说到了 「重构」 这个话题,他们公司早年间上线的项目系统,因一直没专人在演进过程中为代码质量负责,导致现在代码越来越混乱,逐渐堆积成“屎山”,目前的维护成本已远高于重新开…

#贴改色膜前,你必须要知道的事情

关于汽车改色,大多数人都会觉得简单的改个颜色,只是上一层膜而已。但是事实不是这样,改色膜真的不只是看价格和颜色这么简单。最近也有车主来吐槽自己踩过的坑,这篇给大家科普一下,怎么才能避坑!一&#xf…

Python os和sys模块

一、os模块 os 模块是 Python中的一个内置模块,也是 Python中整理文件和目录最为常用的模块。 该模块提供了非常丰富的方法用来处理文件和目录。比如:显示当前目录下所有文件/删除某个文件/获取文件大小 1、获取当前的工作路径 在 Python 中&#xff0…

传统巨头生“变”,中国毫米波雷达市场战火再升级

进入2023年,中国车载毫米波雷达市场战火明显升级。 一方面,愈演愈烈的份额抢夺战不仅仅存在于几大传统巨头之间,也快速转移到与国产供应商之间;随着部分外资巨头的本土化战略深入落地,同时对国产供应商造成了压力。 …

多层感知机的区间随机初始化方法

摘要: 训练是构建神经网络模型的一个关键环节,该过程对网络中的参数不断进行微调,优化模型在训练数据集上的损失函数。参数初始化是训练之前的一个重要步骤,决定了训练过程的起点,对模型训练的收敛速度和收敛结果有重要…

mysql -学习总结

mysql 详解1、mysql特点2、事务2.1 事务的四大特性 – ACID2.2 并发事务问题2.3 事务的四大隔离级别2.4 事务隔离级别操作sql2.5 事务原理 – LBCC MVCC2.4.1 行的隐藏列2.4.2 ReadView2.4.3 MVCC在四种隔离级别下的区别2.5 undo log、binlog、redo log2.5.1 Undo log2.5.2 bin…

【BCT_RFC 3927】IPv4 链路本地地址的动态配置

本文件规定了一个因特网标准跟踪协议互联网社区,并请求讨论和建议改进。请参考当前版本的“互联网标准化国家的官方协议标准”(STD1)和该协议的状态。 抽象的 要参与广域 IP 网络,主机需要为其接口配置 IP 地址,可以通…

10分钟学会使用 Loki 日志聚合系统

Loki 是一个由Grafana Labs 开发的开源日志聚合系统,旨在为云原生架构提供高效的日志处理解决方案。 Loki 通过使用类似 Prometheus 的标签索引机制来存储和查询日志数据,这使得它能够快速地进行分布式查询和聚合,而不需要将所有数据都从存储…

五星好文·射频功率放大器(RF PA)概述

基本概念 射频功率放大器(RF PA)是发射系统中的主要部分,其重要性不言而喻。在发射机的前级电路中,调制振荡电路所产生的射频信号功率很小,需要经过一系列的放大(缓冲级、中间放大级、末级功率放大级)获得足够的射频功…

面试官:说说你对react生命周期的理解

hello,这里是潇晨,今天我们来看下react生命周期在各个阶段是怎样执行的,在面试的过程中有没有遇到这个问题呢,大家也可以学习往期react源码体系文章哦,往期文章目录在文章结尾。 在之前的react源码介绍中,…

小程序(十)签到业务流程分析

文章目录一、如何获取地理信息?二、如何判定某地区新冠疫情的风险等级?系统的人脸签到模块包含的功能非常丰富,不仅仅只有人脸识别的签到功能,而且还可以根据用户签到时候的地理定位,计算出该地区是 新冠疫情 的 高风险…

ChIP-seq 分析:评估片段长度与处理(6)

1. 片段长度评估 片段长度的预测是 ChIPseq 的重要组成部分,它会影响峰识别、峰识别和覆盖概况。 使用互相关或交叉覆盖可以评估按链进行的读取聚类,从而衡量质量。 fragment在 ChIPseq 中,通常是 dsDNA 的短单端读取。片段的 5 将在“”链上…

C语言入门教程||C语言 函数||C语言 数组

C语言 函数 函数是一组一起执行一个任务的语句。每个 C 程序都至少有一个函数,即主函数 main() ,所有简单的程序都可以定义其他额外的函数。 您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的,但在逻辑上&#x…

【YOLOv5】 02-标注图片,训练并使用自己的模型

在上一篇文章中,我们完成了YOLOv5的安装和测试。如果想检测自定义目标,就需要用到LabelImg来对图片打标签,本篇文章介绍了LabelImg安装与使用,以及如何训练并使用自己的模型。一、安装LabelImg输入如下命令进行安装:pi…

文献综述怎么写?有哪些准备工作和内容要求

文献综述的撰写是提高研究生论文写作能力的重要途径,是研究生在撰写学术论文和学位论文中必须要涉及的内容,是不可或缺的,写好一篇好的文献综述是存在诸多困难和挑战的,需要掌握一定的技巧和方法。 一、文献综述的写作目的 文献综…

卷起来了,2023金三银四自动化测试面试题精选【字节二面】

面试一般分为技术面和hr面,形式的话很少有群面,少部分企业可能会有一个交叉面,不过总的来说,技术面基本就是考察你的专业技术水平的,hr面的话主要是看这个人的综合素质以及家庭情况符不符合公司要求,一般来…

linux input子系统,gpio-keys,gpio中断使用

GPIO控制 嵌入式linux下应用编程会经常使用到gpio,GPIO 可以通过 sysfs 方式进行操控,进入到/sys/class/gpio 目录下,如下所示: 可以看到该目录下包含两个文件 export、 unexport 以及 5 个 gpiochipX(X 等于 0、 32、…

三种循环结构的使用及区别

循环结构for循环while循环do-while循环三种循环的区别for循环 控制一段代码反复执行很多次 // 输出3次HelloWorldfor (int i 0; i < 3; i) {System.out.println("Hello World"); }while循环 // 输出3次HelloWorldint i 0; while(i < 3){System.out.println(…

图解LeetCode——剑指 Offer 22. 链表中倒数第k个节点

一、题目 输入一个单向链表&#xff0c;输出该链表中倒数第k个节点。为了符合大多数人的习惯&#xff0c;本题从1开始计数&#xff0c;即&#xff1a;链表的尾节点是倒数第1个节点。 例如&#xff0c;一个链表有 6 个节点&#xff0c;从头节点开始&#xff0c;它们的值依次是…

【软件测试】自动化测试该如何做?项目?技术团队?你真的会自动化吗......

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 对于自动化测试&…