您所在的位置:下载吧 > 软件下载 > 其他软件 > 编程开发 > Nodes(编程作图软件)下载

Nodes(编程作图软件) v1.0.0beta2 官方版

  • 软件大小:182 MB
  • 软件语言:英文
  • 更新时间:2021-03-26
  • 授   权:免费软件
  • 适用平台:WinAll
  • 推荐度: 6
  • 开发商:未知
无病毒官方版绿色版
点击查看大图
软件介绍

  Nodes是一款功能强大、简单专业的编程作图软件,是在Variable中创建和开发,拥有强大安全的网络技术和npm生态系统提供支持,使用这款软件用户可以进行简单便捷、专业高效的编程开发,该软件拥有可视化的图像编辑器与编程开发场景,拥有专业的节点检测器,可用于代码参数节点便捷和连接,可将可视界面和文本代码更紧密地结合在一起,简化开发者的编程开发难度;Nodes拥有丰富齐全的编程开发功能和简洁整齐的开发操作界面,内置有节点操作日志和强大的操作菜单栏,可用于查看和各种编程开发。

Nodes(编程作图软件)

软件功能

  创建实时3D图形

  使用任何WebGL框架并从3D场景中导出视频。

  建立互动式网路应用程式

  结合使用DOM和HTML,CSS和JavaScript来创建桌面或移动应用程序。

  生成程序几何

  从头开始创建模型,然后将其导出以在其他工具(例如Blender)中重复使用。

  创建定制工具

  导出一部分参数,供精通技术的客户或其他设计师使用。

  解析,分析,探索和可视化数据

  使用您喜欢的工具链(Ramda,D3…),连接点并以任何格式(csv,json)保存转换后的数据文件。

软件特色

  传入触发器-来自父节点的连接

  传出触发器-连接到子节点

  传入参数-类型color导致检查器中出现颜色选择器小部件

  从npm导入软件包(必须先添加到项目中)

  触发回调-通常称为每帧

  读取父节点提供的属性

  读取输入参数值

  主节点代码-绘制具有给定颜色的矩形

  将数据进一步向下传递到子节点

官方教程

  让我们从设置新项目开始:

  Nodes如果您正在浏览器中阅读本教程,请打开该应用程序。

  转到“仪表板”窗口。如果已关闭,则始终可以通过单击菜单文件>打开仪表板(Cmd/Ctrl+T)将其重新打开。

  点击New Empty Project按钮。

  选择一个要保存的文件夹,并为项目命名,例如my-first-project。

  点击Create按钮。

Nodes(编程作图软件)

  一个新的项目窗口应该打开,您应该看到一个空的画布:

Nodes(编程作图软件)

  创建一个图形画布

  让我们将第一个节点添加到图中。节点是您组合在一起以创建应用程序的代码段。甲格拉夫是这些节点和它们之间的连接的可视化表示。

  双击图形编辑器(窗口左侧的空白区域),然后选择Custom节点模板:

Nodes(编程作图软件)

  出现一个代表新创建的节点的块:

Nodes(编程作图软件)

  双击该节点以打开代码编辑器。

  复制并粘贴下面的代码。

  按Shift + Enter进行编译。

  按Esc(菜单中的“代码”>“关闭编辑器”)以关闭“代码编辑器”并返回到“图形编辑器”。

Nodes(编程作图软件)
Nodes(编程作图软件)

  白色矩形应出现在“场景”中。这是我们的画布:我们将用它来绘制生成海报。

  提示:想更多地了解HTML Canvas?访问有关MDN的Canvas API教程。

Nodes(编程作图软件)

  恭喜你!您已经创建了第一个节点:)

  现在可能是通过按Cmd/Ctrl+S(菜单中的Graph> Save)保存项目的好时机。您应该会看到一个弹出窗口,要求输入图形名称:输入my-first-graph或输入想要的名称。

Nodes(编程作图软件)

  注意:每个Nodes项目都由一个或几个图形组成,这些图形共享一些代码,资产和第三者程序包。

  我们的Canvas节点仍命名为Custom。让我们改变它。在“图形编辑器”中单击节点,然后在右侧的“检查器”中更改其名称,然后按确认Enter。

Nodes(编程作图软件)

  注意:这似乎是很多代码,但是您只需要做一次!现在,您已经创建了一个自包含Canvas节点,您可以简单地Cmd/Ctrl+C + Cmd/Ctrl+V在“图形编辑器”上使用该节点将其复制粘贴到其他图形和项目。

  添加网格

  下一步,我们将通过创建两个嵌套循环来绘制矩形网格。一个用于X轴,一个用于Y轴,step在每个步骤中沿给定方向按像素移动。

  创建另一个Custom节点并将其重命名为Draw Grid。

  向其添加以下代码:

Nodes(编程作图软件)

  按下Shift+Enter以编译该节点。

  屏幕上没有任何变化。

Nodes(编程作图软件)

  返回到“图形编辑器”(Esc),单击Canvas节点的第一个正方形(代表节点的out端口),并按住鼠标左键,将连接拖动到画布的in端口Draw Grid。

Nodes(编程作图软件)

  连接后,将出现一个蓝色网格。

Nodes(编程作图软件)

  让我们通过使用HTML Canvas剪贴蒙版功能添加页边距,使其看起来有些喘息。

  您可以通过以下注释查看哪些行是新的,但是可以随时复制和替换Draw Grid节点中的整个代码:

Nodes(编程作图软件)

  这就是效果。好多了!

Nodes(编程作图软件)

  添加网格项

  现在,我们准备在网格上绘制形状。

  for在我们已经拥有的嵌套循环之后以及ctx.restore()调用之前添加另一组嵌套循环。将使用与从父Canvas节点接收到的相同的属性来渲染每个子节点,例如canvas和,ctx但添加了额外的index和size(要绘制的形状的大小)。

Nodes(编程作图软件)
Nodes(编程作图软件)

  暂时什么都不会发生。我们仍然需要绘制实际形状。让我们从一个圆圈开始:

  创建一个新Custom节点。

  将其重命名为Circle。

  复制下面的代码,然后重新编译。

Nodes(编程作图软件)
Nodes(编程作图软件)

  将新节点连接到Draw Grid节点out端口后,将显示圆圈。

Nodes(编程作图软件)

  添加更多形状

  以与创建节点相同的方式再创建两个Circle节点。

  开始于Rectangle:

Nodes(编程作图软件)

  要从鼠标重新连接Circle到RectangleCirclein端口,并在按住的同时Shift,单击并将其拖到Rectanglein端口。

Nodes(编程作图软件)
Nodes(编程作图软件)
Nodes(编程作图软件)

  以相同的方式添加Triangle:

Nodes(编程作图软件)

  创建形状随机化器

  在所有网格单元中都具有相同的形状有点无聊,所以让我们对事物进行一些随机化。可以使用来自JavaScript软件包管理器NPM的第三方软件包来扩展节点。为了生成随机数,我们将使用pex-random包(在此处Variable处开发):

  转到菜单节点>包。

  点击Add按钮。

  输入pex-random显示字段的位置package-name。

  点击Save按钮。

Nodes(编程作图软件)

  片刻之后,窗口顶部应显示一条消息,表明安装已完成,并要求您重新加载该窗口。

  按Cmd/Ctrl+R(或菜单中的“节点”>“重新加载”)。

Nodes(编程作图软件)
Nodes(编程作图软件)

  创建一个新Custom节点并将其重命名为Random Shape。

  向其添加以下代码:

Nodes(编程作图软件)
Nodes(编程作图软件)

  如下连接所有内容:

  Draw Grid应该连接到Random Shape in端口。

  所有形状节点(Circle,Rectangle和Triangle)应连接到Random Shape触发输出端口(每个端口一个)。

  如果一切顺利,您应该在屏幕上看到一个随机形状的网格:

Nodes(编程作图软件)

  添加鼠标互动

  让我们动起来。

  创建一个新Custom节点并将其重命名为Mouse:

  向其添加以下代码:

Nodes(编程作图软件)

  Canvas通过其out端口将其连接(Draw Grid连接方式相同)。

Nodes(编程作图软件)

  现在,让我们Draw Grid通过一些鼠标交互来升级节点。

  Draw Grid在triggerOut端口声明之后打开并添加以下行以创建端口。

  const mouseIn = node.in("mouse", null);

Nodes(编程作图软件)

  关闭编辑器,然后将新mouse in端口连接Draw Grid到节点的mouse out端口Mouse。

Nodes(编程作图软件)

  连接后,Draw Grid再次打开该节点并添加以下行以在triggerIn.onTrigger回调中检索鼠标位置。

  const mouseState = mouseIn.value;

  在第二个for循环中(一个绘制形状),在平移后立即添加上下文旋转,并相对于triggerOut.trigger对象中鼠标的位置传递size属性。

Nodes(编程作图软件)
Nodes(编程作图软件)
Nodes(编程作图软件)

  现在,网格应响应鼠标在“场景”上的移动。形状将改变大小并根据鼠标移动而旋转。

  额外:添加更多形状

  为了获得与本页顶部交互式演示相同的外观,让我们添加更多形状。

  创建一个新Custom节点并将其重命名为Small Circle:

  向其添加以下代码:

Nodes(编程作图软件)

  现在,您可以通过按住键,在节点的输入端口上单击鼠标左键,将连接拖出并释放鼠标左键来断开Triangle节点与Random Shape节点的连接。现在,您可以将节点连接到刚删除的节点的最终端口。ShiftSmall CircleSmall CircleRandom Shape

Nodes(编程作图软件)

  额外:自定义颜色

  现在是时候向我们的图形中添加一些参数以自定义外观了。

  我们将从安装一个新模块开始,该模块pex-color用于解析颜色并将其转换为不同的格式。

  转到菜单节点>包。

  点击Add按钮

  键入pex-color,然后保存。

  安装软件包后,将您的项目保存到Cmd/Ctrl+S并通过来重新加载图形Cmd/Ctrl+R(或菜单中的Nodes> Reload)。

Nodes(编程作图软件)

  让我们向Rectangle节点添加一个参数。节点中的颜色参数使用[r, g, b, a]所有值均为0…1的格式。HTML Canvas使用十六进制数字表示颜色,因此我们需要在两者之间进行转换。这是软件包getHex功能pex-color起作用的地方。

Nodes(编程作图软件)
Nodes(编程作图软件)

  重新编译代码后,您应该在“检查器”中看到颜色输入。单击彩色正方形以调出颜色选择器,或使用名称旁边的箭头扩展端口以显示hsl滑块和rgba值。

Nodes(编程作图软件)

  ¶附加:导出为图像

  要将画布保存为png图像,我们将使用以下canvas-screenshot包:

Nodes(编程作图软件)

  Save Screenshot使用以下代码创建一个节点:

Nodes(编程作图软件)
Nodes(编程作图软件)

  将Save Screenshot节点放在Canvas和Draw Grid节点之间:

  触发器连接out的的Canvas节点到触发器in的Save Screenshot节点

  触发器连接out的Save Screenshot节点到触发器in的Draw Grid节点

Nodes(编程作图软件)

  选择后Save Screenshot,单击检查器中Save Screenshot按钮旁边的小眼睛图标。

Nodes(编程作图软件)

  通过按窗口右上角的图标或按键进入全屏模式f。

Nodes(编程作图软件)

  您会注意到Save Screenshot它的存在:单击它以下载您的创作。

Nodes(编程作图软件)

Nodes(编程作图软件)下载地址

你可能感兴趣的软件
  • ControlStar 2.38 中文版

    19.72 MB/2017-07-17

    ControlStar是一款用于艾默生PLC的专业编程软件。艾默生plc编程软件介绍了可编程控制器原理、基本控制原理、编程语言、文档介绍了如何启动编程环境、建立工程系统、建立通讯连

  • StroyCode 1.86 中文版

    3.75 MB/2017-05-22

    StroyCode是一款可视化编程软件,只需要在电脑点击几下即可创建程序! StroyCode可以编译使用的程序(EXE),图书馆(DLL),Web应用程序(CGI)。此外,您可以

  • 三菱触摸屏编程软件 2.7 官方版

    2.92 MB/2016-04-18

    1、三菱触摸屏编程调试软件,可编缉FX-10DU、FX-25DU、FX-30DU、FX-40DU、FX-40DU-TK、FX-50D

  • STEP 7 MicroWIN 4.0.6.35 官方版

    316.49 MB/2016-03-09

    西门子PLC S7-200编程软件新版本(2012.3) STEP7 MicroWIN_V4 SP9 完整版, 全面支持Windows7。

  • AVR单片机编程软件(AVR_fighter) 1.0 官方版

    5.23 MB/2016-02-25

    AVR单片机ISP下载编程软件,目前只支持:USBASP (接口类型:USB)

  • GX Works2 1.77 官方版

    432.43 MB/2016-02-24

    GX WORKS2是三菱电机推出的三菱综合PLC编程软件,是专用于PLC设计、调试、维护的编程工具。与传统的GX Developer 软件相比,提高了功能及操作性能,变得更加容易使

  • 台达PLC编程软件 2.38 中文版

    74.82 MB/2015-12-16

    台达PLC编程软件(Delta WPLSoft)是一款仿真plc编程软件,在没有真实PLC的情况下,在电脑上模拟运行PLC程序的执行情况。先点仿真,在点那个梯形图监控。就可以右击控

  • PLCEdit 2.2.3 绿色版

    4.23 MB/2015-08-05

    现在开始流行plc编程了,这个plc编程软件也就是PLCEdit是用来源代码编辑器的PLC编程。 plc编程软件PLCEdit可以阅读和编辑文件,兼容SucoSoft和easySoftCoDeSys,CoDeSys v2.3.x等文件

  • Keil C51单片机编程软件 9.52 官方版

    63.25 MB/2015-08-05

    Keil C51是一款单片机编程软件,Keil C51是目前世界上较好的51单片机的汇编和c语言的开发工具。Keil C51单片机编程软件提供丰富的库函数和功能强大的集成开发调试工具,全Windows界面。

  • CIMCO Edit 7.5 简体中文版

    276.25 MB/2015-07-24

    CIMCO Edit V5 是CIMCO软件公司专为数控编程而设计的专业软件,该软件以其强大的功能、低廉的价格而风靡欧美,它有强大而实用的数控编辑功能、文件的智能比较、刀位轨迹的三维模拟、DNC传输等功能。其完全的Windows 界面

  • Keil uVision 4 4.74.0.22 官方版

    544.5 MB/2015-03-30

    Keil uVision4是美国Keil Software公司出品的51系列兼容单片机C语言软件开发系统,使用接近于传统c语言的语法来开发。keil uvision4单片机编程软件可以帮助嵌入式开发者更好地去开发ARM。

  • 统达线切割软件 3.2.006 官方版

    193.18 MB/2015-02-04

    统达线切割软件是台湾统达电脑股份有限公司出品的线切割编程软件。软件介绍:1. 专业的绘图功能a.) 提供特有的89种画圆方法,可动态拖曳有效取得结果(demo dwg) b.) 提供快速且弹性的矩形绘图 (BOX) c) 提供结合圆角及

每日更新软件推荐
  • 一周最热
  • 总排行榜

您可能感兴趣的专题

  • 男生必备

    男生必备

    男生们看过来!

  • 安卓装机必备

    安卓装机必备

  • 女生必备

    女生必备

      女生必备app是拥有众多女性用户的手机软件,作为一个女生,生活中像淘宝、京东这类线上购物软件可以说是少不了的,小红书这种穿搭、化妆分享平台也很受欢迎,类似于西柚大姨妈、美柚这种专为女生打造的生理期app更是手机必备,还有大家用的最多拍照美颜app是绝对不能忘记的,除此之外对于一些追星女孩来说,微博也是一个必不可少的软件。超多女生必备软件尽在下载吧!

  • 迅雷看看使用教程

    迅雷看看使用教程

    迅雷看看播放器是一款多功能在线高清多媒体视频播放器,支持本地播放与在线视频点播,采用P2P点对点传输技术,可以在线流畅观看高清晰电影。不仅如此,迅雷看看不断完善用户交互和在线产品体验,让您的工作与生活充满乐趣。

  • 驱动精灵

    驱动精灵

    驱动精灵是一款集驱动管理和硬件检测于一体的、专业级的驱动管理和维护工具。驱动精灵为用户提供驱动备份、恢复、安装、删除、在线更新等实用功能,也是大家日常生活中经常用到的实用型软件之一了。

  • 拼音输入法

    拼音输入法

    对于电脑文字输入,拼音输入法是一种非常受欢迎的输入法,搜狗拼音输入法、百度拼音输入法、QQ拼音输入法、谷歌拼音输入法、紫光拼音输入法、智能拼音输入法等,你在用哪款呢?一款好用适合自己的拼音输入法一定对您平时帮助很大!下载吧收集了最热门国人最喜欢用的拼音输入法给大家。

  • b站哔哩哔哩怎么使用

    b站哔哩哔哩怎么使用

    很多人都喜欢在b站哔哩哔哩上观看视频,不单是因为可以提前看到一些视频资源,B站的一些弹幕、评论的玩法也是被网友们玩坏了!下面下载吧小编带来了b站哔哩哔哩怎么使用的教程合集!希望能帮到你啦!

  • 抖音短视频app

    抖音短视频app

    抖音短视频app,这里汇聚全球潮流音乐,搭配舞蹈、表演等内容形式,还有超多原创特效、滤镜、场景切换帮你一秒变大片,为你打造刷爆朋友圈的魔性短视频。脑洞有多大,舞台就有多大!好玩的人都在这儿!