一般将拓扑分为两类： 1) 物理拓扑 描述网络各节点的物理连接情况。 2) 逻辑拓扑 描述网络环境的逻辑结构（本文档主要探讨此种拓扑的绘制）。 在计算机网络领域，网络拓扑是一个非常重要的工具。...同时用红色、蓝色线条及标注文字区分F5上对内及对外的VLAN，拓扑中只标注相关的信息元素，简洁明了。 02 Case2 同样是典型的分层结构，只不过线条更多是直线，层次感较好。...03、拓扑图绘制步骤 以下是在PPT上绘制拓扑的大体步骤，当然，这只是个参考或建议： 1. 首先在纸上画个草稿，熟练之后，做到拓扑在心中 2....05 填充其他节点及元素 填充其他图标及信息元素，主体拓扑出来后，这一步实际上就变得非常轻松了。 06 填充信息标注元素 填充信息标注，例如设备名称，线缆类型等等。...04、拓扑图绘制要点 01 绘制规范摘要 ● 准确呈现网络逻辑结构 ● 网络层次分明易读，设备使用情况及互联情况清晰 ● 网络关键节点信息完善、准确 ● 重点突出，节点元素可适当取舍 ● 图例注释完善
http://www.cnblogs.com/jirigala 例子程序运行效果如何下 当然在节点拖拽时，需要注意几个事情： 1：拖拽时总需要有提示信息比较好，防止误操作后找不到被托摘到哪里去了...2：父亲节点总不能拖拽到自己的子节点上，那不是死循环或者乱了辈份了不是？ 为了让TreeView支持拖拽功能，需要注意以下几个属性设置及相应的事件代码。 ... = ((TreeView)sender).GetNodeAt(point); // 获取被拖动的节点 treeNode = (TreeNode...)e.Data.GetData("System.Windows.Forms.TreeNode"); // 判断拖动的节点与目标节点是否是同一个,同一个不予处理 ...ServiceManager.Instance.OrganizeService.MoveTo(UserInfo, treeNode.Tag.ToString(), targetTreeNode.Tag.ToString()); // 往目标节点中加入被拖动节点的一份克隆
说一下近期的项目Linux下Qt开发，主要功能：TreeView点击不同的节点对应不同的界面，界面分类有 终端,高亮Editor，TextBrower。 ...说一下其中遇到的难点： TreeView： 采用QTreeWidget，利用设计师直接拖动。 1）TrewWidget，头的样式无法设计，最后采用隐藏。...：父节点返回，如果当前节点不存在父节点的话，返回。...在自己UI界面下，实现模拟终端功能。...tar xvzf qtermwidget-0.6.0.tar.gz cd qtermwidget-0.6.0 cmake . make make install 如果你的Qt版本为 : Qt5.0一上，
其实，在解决完后看来，问题主要出在 TreeGrid 的 Template 上，直接贴上来给大家看看： TreeView 是不支持 UIV的。而之后的 TreeView 在默认情况下 UIV 处于关闭状态，需要手动打开。...拖动起来也明显地感觉到流畅了许多。 大功告成！ 相关资源 一篇通俗易懂的 UIV 概念文章：《UI Virtualization》，其中讲到了 WPF 及 SilverLight 中的 UIV。...类似的控件已经有人传到了 CodeProject 上：《Virtualizing Tree View (VTreeView)》，其中还正好谈到了上面的这系列文章，非常凑巧的是，它还谈到了 CodeProject...上被我们系统选择来实现 TreeGrid 控件的资源：《A Versatile TreeView for WPF》。
我将通过解释如何绘制苹果来演示在Scratch中绘制矢量精灵的所有要点，但是您可以将此方法应用于任何要创建的对象。...如果移动节点过多或意外添加节点，可以通过单击屏幕顶部的后退箭头图标来撤消最后一步。也可以通过按Ctrl+Z撤消。 4. 苹果底部通常比顶部小。单击并拖动两个边节点以选择它们。节点被选中时变为蓝色。...绘制茎 1. 选择矩形工具。在画布上创建一个长而薄的矩形，在其中放置茎。 2. 使用“节点”工具来塑造矩形，使其类似于茎。把填充物换成你想要的颜色。 3. 使用箭头工具选择杆。...选择线条工具。在苹果形状上画一个三角形，把每一条新线和前一条线的末端连接起来。这将使线条变成一个完整的形状。 2. 使用箭头工具选择三角形，并使用填充工具将其更改为较浅的颜色，例如白色。 3....在你的Scratch项目中使用它，在Scratch网站上与其他Scratch用户共享它，最重要的是用vectors绘制出更酷的东西。
GPS运动轨迹这个功能，也需要用到js的知识，其实就是封装一个js函数，绘制对应的线条路径，这个轨迹点可能包括的信息有经度、纬度、速度、时间、是否标记、时间等信息，写个结构体封装下，方便后期拓展，是否标记的含义是是否改点同时作为一个设备点添加...支持图片地图，设备按钮可以在图片地图上自由拖动自动保存位置信息。 在百度地图和图片地图上，双击视频可以预览摄像头实时视频。 堆栈窗体，每个窗体都是个单独的qwidget，方便编写自己的代码。...左侧右侧可拖动拉伸，并自动记忆宽高位置，重启后恢复。 双击摄像机节点自动播放视频，双击节点自动依次添加视频，会自动跳到下一个，双击父节点自动添加该节点下的所有视频。...摄像机节点拖曳到对应窗体播放视频，同时支持拖曳本地文件直接播放。 视频画面窗体支持拖曳交换，瞬间响应。 双击节点+拖曳节点+拖曳窗体交换位置，均自动更新url.txt。...默认采用opengl绘制视频，超低的CPU资源占用，支持yuyv和nv12两种格式绘制，很牛逼。 高度可定制化，用户可以很方便的在此基础上衍生自己的功能，支持linux和mac系统。
另外，在使用 TreeGrid 时，其实开发人员还是希望同时拥有 树 及 表格 的两套 API。而老版本的表格却只有 树 节点操作的 API。...TreeGrid 不再依赖 TreeView、GridView，而是直接从 ItemsControl 上继承下来，自定义逻辑树、可视树结构，自定义绘制过程。代码有点多，看下最终的效果： ? ?...元素的逻辑行为与渲染是分离的： 在元素发生诸如点击、拖动、选择等逻辑行为时，其实只变更了它内部的状态数据。...同时，这些行为也可以调用 InvalidateMeasure 来标记该元素的状态为需要重新测量。而查看该方法源码，可以看到本质上也是修改元素的内部状态属性 MeasureDirty。 ...我们经常会重写控件的这个方法，在其中查找指定的可视树元素。其本质，与在 MeasureOverride 方法中以防止重入的方式来编写这些代码是一致的。
前言 上一篇我们绘制了一个 graphView 场景，在场景之上通过 graphView.dm() 获取数据容器，并通过 graphView.dm().add() 函数添加了两个 Node 节点，并通过...setPosition 设置节点位置以及 setImage 给节点添加图片；接着在两个节点之间通过 ht.Edge(sourceNode, targetNode) 添加了两条连线（实际上还可以更多），...并给连线添加了 label 标签显示文字，同时也通过 label.position 设置了文字在连线上的位置。...通过分割组件我们树组件和拓扑组件同时添加进 body 体中，需要的操作只有如下几行： graphView = new ht.graph.GraphView(); //拓扑组件 var treeView...不急，我们继续，给我们的所有节点都设置上“名称”，为了不混淆视听，我将之前的代码也粘出来，也顺便复习一下（这里只显示其中一个节点的代码）： var server = new ht.Node(); //服务器节点
01 矩形网格工具 藏在“直线段工具”下的一键绘制网格神器。 右键点击“直线段工具”选择“矩形网格工具”，在画板上按住鼠标左键拖动，绘制矩形网格。...拖动的同时（鼠标别松），控制键盘方向键可以改变网格的属性：上键增加网格行数，右键增加网络列数。 再也不用一根线一根线去绘制了！！ 02 形状生成器 记住它的脸，你一定会有机会用到的！...在一些情况下，它比你使用布尔运算更快更有效。 比如，绘制标准化图标或logo的时候： 上图的两个图标，由几个正圆组成，全选它们，再使用形状生成器减去不要的部分，生成要连接的部分。...Tip：绘制线性图标的时候，形状生成器也非常实用哦！有了它，当你想连接无数条断开的线条时，不至于再一个个去选择锚点，然后Ctrl+J连接到天荒地老了吧！...宽度工具是针对路径线条上的锚点来使用的，玩法很多，我举一个简单的例子：一根线条，宽度工具可以把它变成棍子，也可以变成狗骨头，还可以变成一片叶子~你没看错！它们都还只是一根线条而已。
前言 机柜 U 位管理是一项突破性创新技术--继承了 RFID 标签（电子标签）的优点的同时，完全解决了 RFID 技术（非接触式的自动识别技术）在机房 U 位资产监控场应用景中的四大缺陷，采用工业互联网云平台监控机房...，当然，初始化设置的选中树上的第一个节点就触发了选中变化事件： cms.treeView.sm().ss(cms.treeView.dm().getDatas().get(0));// 设置选中树上的第一个节点...实现了添加和编辑机柜的两个功能，删除机柜的功能实现上非常容易，只要将节点从拓扑图和树上移除即可： handleRemoveRack: function(){// 在拓扑图上删除机柜，并删除树上此机柜对应的节点...既然有了从列表组件上拖拽下来的交互动作，接下来应该是做设备在机柜上的拖拽改变位置的功能了，我们通过监听拓扑组件 gv 的交互事件来对节点移动进行事件处理： gv.mi(this.handleInteractor.bind..._oldPosition); } } } 代码中的 showDragHelper 就是在设备拖动的过程中，显示在机柜上，设备下的作为占位的绿色的矩形，为了方面看到当前移动的位置在机柜上显示的位置
介绍 如果想绘制流程图，我推荐yEd 软件。因为它功能强而且免费。yEd 是采用java语言开发的专门为流程图绘制的工具软件。 同时可以将绘制完毕的流程图，导出成各种格式：pdf，jpg，svg等。...那么它能绘制什么样的效果呢？ 各种流程图的绘制，可以说一网打尽。而且操作相当简单。 通过鼠标就可以拖拽，创建各种流程节点。...在右侧面板中单击鼠标左键，然后直接拖动到中间的操作区就可以了。 我们如果想添加模块之间的连线，操作方式很简单：鼠标点击模块，然后拖动就会出现箭头了。 然后拖动到其他模块后，松手就可以创建线段了。...在操作区域空白地方，鼠标右击就可以拖动整个画板了。这样我们可以任意拖动。 3.4 添加标签 我们拖动的各种模块，双击都可以给模块添加标签。 也可以鼠标右击选择Edit Label。...我们还可以修改线条颜色，修改标签的颜色，字体等等 3.8 存储 我们可以通过菜单中的File-save 将当前编辑的文件存储为graphml文件。
SVG 矢量图形大家都不会陌生了，尤其是在工控电信等领域，但是这篇文章并不是要制作一个新的绘制 SVG 图的编辑器，而是一个可绘制矢量图形并且对这个图形进行数据绑定的更高阶。 效果图 ?...虽然说最重要的因素是拖拽，但是不可否认，这个组件在分类上也是非常直观： ? 如上图，我在 Palette 中做了三个分组：电力、食品加工厂以及污水处理。并在这些分组下面填充了很多属于该组类型的节点。...当然，在获取对象的信息的时候，我们需要创建 ht.Group 类的对象，以及分组内部的 ht.Node 类的元素（这些元素都为组的孩子），然后将这些获取来的数据赋值到这两种类型的节点上，并且将这些节点添加到...drop", function(e) { handleDrop(e); }); } } function handleDrop(e){//被拖拽的元素在目标元素上同时鼠标放开触发的事件...，会给绘图人员带来很大的困扰，所以我在 treeView 的 label 和 icon 的显示上做了一些处理： // 初始化树组件 function initTreeView() { // 重载树组件上的文本显示
工控上运用到机柜 U 位的非常普遍，但是经常在创建 2D/3D 模型的时候，我们向内添加设备，每个设备占的 U 位不同，如果只是单纯地向机柜内部添加节点，在节点还未添加的时候我们没法直观地看到具体的效果...，当然，初始化设置的选中树上的第一个节点就触发了选中变化事件： cms.treeView.sm().ss(cms.treeView.dm().getDatas().get(0));// 设置选中树上的第一个节点...实现了添加和编辑机柜的两个功能，删除机柜的功能实现上非常容易，只要将节点从拓扑图和树上移除即可： handleRemoveRack: function(){// 在拓扑图上删除机柜，并删除树上此机柜对应的节点...既然有了从列表组件上拖拽下来的交互动作，接下来应该是做设备在机柜上的拖拽改变位置的功能了，我们通过监听拓扑组件 gv 的交互事件来对节点移动进行事件处理： gv.mi(this.handleInteractor.bind..._oldPosition); } } } 代码中的 showDragHelper 就是在设备拖动的过程中，显示在机柜上，设备下的作为占位的绿色的矩形，为了方面看到当前移动的位置在机柜上显示的位置
意思是：在画布上绘制 150×75 的矩形，从左上角开始 (0,0)。...Canvas – 路径 在Canvas上画线，我们将使用以下两种方法： moveTo(x,y) 定义线条开始坐标 lineTo(x,y) 定义线条结束坐标 绘制线条我们必须使用到 “ink” 的方法...在 canvas 上绘制实心的文本 strokeText(text,x,y) – 在 canvas 上绘制空心的文本 使用 fillText(): 1 2 3 4 var c=document.getElementById...var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); 使用 “Arial” 字体在画布上绘制一个高...对象； 在拖动源对象事件中使用e.dataTransfer属性保存数据： e.dataTransfer.setData( k, v ) 在拖动目标对象事件中使用e.dataTransfer属性读取数据
（星形工具也可以） 光晕工具：单击拖动确定光晕大小，“上下”调整光线数量，松开鼠标，在另一位置拖动确定光晕长度及数量，“上下”更改光晕的数量，松开鼠标绘制完成。...ctrl+g 图形编组 ctrl+shift+g 取消编组 shift+` 曲率工具 1）在画面单击确定弧长，移动鼠标确定弧度，再单击继续绘制，按ESC键取消绘制，用此工具可直接拖动节点编辑； 2...斑点画笔（shift+B），用于绘制描边颜色 铅笔（N）用于绘制描边 Shaper工具（shift+N）：这货是什么原理我也想知道。随意勾画线条可以自动生成图形，也可以进行图形的合并删除。...3）先拖动缩放后，再按住alt，显示“双三角”即可复制。 整形工具：可以直接在图形上添加节点，拖动图形节点或路径线可更改形状（需要调出方向手柄才能变形） 以下工具：按住alt可水平垂直更改。...变形工具（shift+r）:在图形上任意拖动即可变形。 旋转扭曲工具：在图形上拖动或按住自动旋转图形 。 收拢和膨胀工具：是图形收缩或膨胀。 扇贝、晶格化、褶皱：形成不同效果的锯齿。
的步骤（begin、close），使用 clearRect() 会导致意想之外的结果（线条乱窜），在调用 clearRect()之后绘制新内容前调用beginPath() 。...设备像素比，它的计算方式是 物理像素 / 屏幕宽度的像素； 首先设置canvas的宽度和高度是原来的2倍 使用ctx.scale(2,2)设置绘制的东西也放大2倍 在canvas的父元素上使用缩放，使用...当设备像素比为 1 时，一个 1px 的线条实际上占据了两个物理像素（每个像素实际上只占一半），由于不存在 0.5 个像素，所以这两个像素本来不应该被绘制的部分也被绘制了，于是 1 物理像素的线条变成了...可以在导出之前将canvas的长宽放大指定倍数，同时将图形放大，之后再通过toDataURL导出，分辨率相对来说就高了。...每个图形在离屏画布上绘制一个大小状态一样的图片，并使用唯一的颜色值填充，这个颜色值就代表这个图形的索引。
在顶端较粗的线代表了从波兰到莫斯科的行军规模变化。下方的细深色线则代表了撤退时的军队规模。线条的宽度代表了军队的规模，从400000大军缩减到了10000。...拖动鼠标会看到数据。D3.js带来这种交互性。也可单击并拖动缩放。 ? ◆ ◆ ◆ 2....线条代表街道。黑色的长条代表了所在街区死亡的人数。圆点代表抽水泵。特别注意在宽街 (Broad Street)上的抽水泵周围的死亡人数相对集中。...Plotly的创建人切尔西（Chelsea Lyn）用MATLAB的3Dglobe绘制地图，展示了国家、水域、经纬度和飞行轨迹。如果你点击、长按或拖动图像，图像可被翻动和旋转。...他通过绘制以下轨迹图展示英国从进口量大于出口量到出口量大于进口量的时间点。 ? 以下是利用plotly绘制的，其中y轴是对数值。 ?
一、图的绘制 在本篇博客的第一部分我们要按照要求先把图给绘制出来，我们会随机的生成几个坐标点，然后在这些坐标点上添加上View，然后再将这些坐标点使用Bezier进行连接。...在拖动节点View时，我们还需要将拖动的事件回调到节点View的父视图上，让父视图知道当前用户拖动的是哪个View。接下来我们就来看一下节点View的核心代码。...在该闭包回调中，我们会调用drawLine()方法。当然在创建节点View时，我们也创建了相应的BezierPath的对象。每个节点对应一个BezierPath对象，用来绘制该节点所连节点的线。...在往BezierPath对象上添加点时，我们要将节点的关系在邻接矩阵中进行记录。如果两个点之间已经画完线了，那么邻接矩阵上的内容我们设置为true，未画线的节点之间则是false。具体代码如下所示。...在上述方法调用setNeedsDisplay()方法后，就会执行View的draw()方法，我们就在此方法中进行线条的绘制。当然下方的代码比较简单，在此就不做过多赘述了。 ?
在画板区域单击鼠标右键可以调出标尺和网格线背景。 ? 从标尺向下或向右拖拽，可以调出参考线，右键锁定参考线。参考线可用于设置页边距，也可以用于排版等。...相关Tips： 按住Alt+鼠标滚轮可以直接放大或缩小界面 按住Ctrl+鼠标滚轮可以左右移动画板 双击抓手工具可以直接恢复到原始界面大小 双击画板工具出现画板选项界面 放大镜工具使用的同时按住空格键可以切换抓手工具...这时就要用到菜单栏中的窗口选项，调用路径查找器，如图所示，可以通过形状相加或相减，绘制各种图形。 ? 线条和效果 工具箱的钢笔工具和铅笔工具是画线条的两个选择。...对象-扩展外观-进一步修改颜色和线条粗细等 ? 画笔 控制面板中的画笔工具可以将已编辑好的单独对象添加到其中，将其自定义为一个图案画笔，这样就可以批量绘制该图案。...需要注意的是，虽然表面上看到的是一圈磷脂双分子层，但是，实际上还是一个圆角矩形框，如果想得到真正的图案，则需要扩展外观。步骤同上。
HTML5绘画 在html5中出现了许多新的特性，绘画功能就是其中之一。由于html5新增的这些新特性，所以也在逐渐取代Flash，毕竟Flash比较占用内存，也经常性奔溃。...接下来使用fillStyle属性和fillRect函数在画布上绘制一个红色的矩形，fillStyle是用于设置颜色的，fillRect则定义了形状、位置和尺寸，代码示例： ? 运行结果： ?...意思是：在画布上绘制 100x100 的矩形，从左上角开始 (10,10)。 如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。 ?...绘制线条： 通过指定从何处开始，在何处结束，来绘制一条线： 代码示例： ? 运行结果： ? 绘制圆形： 通过规定尺寸、颜色和位置，来绘制一个圆： 代码示例： ? 运行结果： ?...地图可以自己在二维数组上绘制，1表示显示墙的图片，2表示显示钢板的图片，3则是显示草地的图片。 拖放事件 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
