GOJS入门二 -如何节点添加图片

1、当节点什么的都有了的时候我们就可以特别开心的往下走，如何让节点丰富起来（nodes的样式设置）。
下面我们就要针对GraphObjects对象和它的参数配置组成来做一个研究，目前我们先研究下面几个东西：
Shape : 预定义的或者自定义的几何图形;
TextBlock : 各种字体的文本，也就是前端font性质（可编辑的）;
Picture : 图片;
Panel : 根据不同面板的类型，它可以包含其他位置或是尺寸不同的对象。(列如表格、竖形列表和拉伸容器等).
设置样式原理：通过实现数据绑定，监听Model数据，自动改变Nodes上的GraphObjects外观和行为。默认的Nodes模板非常简单:仅仅是包含一个TextBlock的Nodes。TextBlock的text字段和Model中Nodes数据的key字段绑定在一起。

说这些理论的理解起来累死了，二话不说直接上图撸码。
先上图：

针对中间的设置为方块且背景色为好看色的时候，页面呈现出来的效果如上所示：相关具体的代码如下，主要应用的是shape这个属性。代码如下所示：

如上代码所示我们发现这个new go.Binding(“text”, “key”)
在这里我解释一下，这个主要是用于实现数据的一个绑定，比如之前我们定义了一个这个东西， myModel.nodeDataArray，里面就有一个key值就是和这个对应，优先级大于内部配置的text.自动忽略里面的文字

其他的也是类似设置，好比上面说到的对文字样式设置的属性TextBlock 。

下面再讲一个我们实际应用中用到最普遍的就是图片这个东西。主要Picture 属性的设置，如下所示我们做个代码修改，将图片显示在节点里面。

将图片这个元素也给加进去了，代码如下所示：

其实这个里面的 new go.Binding(“source”,“img”)), 可以直接写new go.Binding(“source”)) 这样的话，对应node的img就只能是source,不然识别不了。

下面就整个正常些的做个结尾；

GOJS入门二 -如何节点添加图片相关推荐

Java实现一行代码生成二维码，可传输到前端展示，可自定义二维码样式，可设置图片格式，可对二维码添加图片，可对二维码添加文字，可以设置二维码大小、字体大小、字体颜色、边框颜色、边框大小等等
Java实现一行代码生成二维码,可传输到前端展示,可自定义二维码样式,可设置图片格式,可对二维码添加图片,可对二维码添加文字,可以设置二维码大小.字体大小.字体颜色.边框颜色.边框大小等等. 0.准备 ...
JS-DOM对象--节点--添加图片的操作
JS-DOM对象 DOM:Document Object Model 文档对象模型要实现页面的动态交互效果,bom 操作远远不够,需要操作 html 才是核心.如何操作htm,就是 DOM.简单的说 ...
java 通过Qrcode生成二维码添加图片logo和文字描述
一个简单的javaweb项目注释比较多直接上代码附上使用的jar包Qrcode package com.fehorizon.erp.pda.utils;import java.awt.Color; ...
freemaker生成word模板的各种坑，包含word打不开、批量添加图片、图片变形等问题总结
最近在使用freemaker做一个word模板,里面包含大量表格.截图.超链接等数据.历时一周多,遇到很多坑,现在想想都后怕,现在简单总结一下,希望给以后的小伙伴提供帮助,少走弯路! 坑一:word打 ...
OkHttp框架从入门到放弃，解析图片使用Picasso裁剪，二次封装OkHttpUtils，Post提交表单数据...
OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的 ...
OkHttp框架从入门到放弃，解析图片使用Picasso裁剪，二次封装OkHttpUtils，Post提交表单数据
OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的 ...
javascript array添加图片_史上最全的web前端面试题汇总及答案JavaScript之二（二）...
作者:樱桃小丸子儿链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
PS CS6视频剪辑基本技巧（二）视频剪接和添加图片
系列讲座导读 PS CS6视频剪辑基本技巧(一)CS6可以实现的视频剪辑功能 PS CS6视频剪辑基本技巧(二)视频剪接和添加图片 PS CS6视频剪辑基本技巧(三)添加声音和字幕 PS CS6视频剪 ...
Pascal游戏开发入门(二):渲染图片
Pascal游戏开发入门(二):渲染图片渲染静态图片新增一个Texture,然后Render出来创建Texture,并获取尺寸 procedure TGame.Init(title: strin ...

GOJS入门二 -如何节点添加图片

GOJS入门二 -如何节点添加图片相关推荐

最新文章

热门文章