Draw2D 教程(三)

Draw2d js图形库 Draw2d js图形库,画各种流程图,非常强大的javascript类图库。 立即下载
 

3、使用LayoutManagers 和 Panes
    Layoutmanagers,就像SWT中的Layout类,用来描述子组件在容器中的位置和大小。这一节将介绍LayoutManager
的子类,以及怎样使用它们。
    另外,我们还会涉及Draw2d的panes。ScrollPanes,LayerPanes,以及它们的子类。Draw2d没有Composite类,
而这些pane一般就用来作为GUI的背景容器。这些容器使得开发图形编辑器更加容易。在这一节的最后,我们会继承
FreeformLayerdePane,创建flowchart工程的第一个Figure。
3.1、理解LayoutManager的子类
    在SWT中,容器以来一个默认的布局策略来安排位于其上的组件;而在Draw2d中你需要选择一个LayoutManager的
子类,这些子类中,FlowFigureLayout和ScrollbarLayout只针对特定的Figure,我们将关注其他三个(表C.4)

表C.4

    当一个父图形调用带有constraint参数的add()方法时给子图形指定位置时,由LayoutManager负责来“解释”这
个constraint并实际设置该子图形的位置。
    我们将为我们的编辑器选择XYLayout。现在我们需要一个合适的容器类:我们选择LayeredPane。
3.2、LayeredPanes
    由于Draw2d应用可能会很复杂,LayeredPane提供了很多“层”用来显示Figuer,使用透明的层(Layer),你可
以将GUI分离成很多个面,不同的Layer有不同的特性,例如不同的LayoutManager。这对我们的flowchart编辑器来
说很重要,因为我们的图上不仅有Figure,还有Connection和feedback。
    理解LayeredPane如何工作的第一步,是学习Layer。Layer是透明的Figure,并包含两个属于它自己的方法:
containsPoint(),和findFigureAt()。这些Layer都有固定的边界,但FreeformLayer可以向任意方向延伸,这对
于那些有很大的图(大于窗口)的应用来说是必需的。
    LayeredPane使用add()方法来加入新的Layer,方法参数指定Layer对象,一个用来识别它的key,以及一个index
来表明其位置。当然你也可以从LayeredPane上删除一个Layer,或者改变它的index。
    通过选用LayeredPane的子类,你还可获得更多的功能。比如说,你想给你的pane添加缩放的功能,那么有Scalabl
eLayeredPane,如果你想使得窗口向任意方向延伸,那么可以使用FreeformLayeredPane,如果两者都需要的话,可
用ScalableFreeformLayeredPane。在我们的flowchart中,我们只需要延伸功能;列表C.2的代码是用来作为我们
最基本的编辑器的FreeformLayeredPane。
列表C.2:ChartFigure.java
package com.swtjface.AppC;
import org.eclipse.draw2d.*;
public class ChartFigure extends FreeformLayeredPane
{
public ChartFigure()
{
    setLayoutManager(new FreeformLayout());
    setBorder(new MarginBorder(5));
    setBackgroundColor(ColorConstants.white);
    setOpaque(true);
}
}
    在以上代码中,我们为FreeformLayeredPane设置了外观属性,但到目前为止尚未加入任何Layer,后续章节将完成
这个任务。
3.3、ScrollPanes与Viewports
    ScrollPane可以加在任何的Figuer上,为其提供滚动条的功能。并且可以设置滚动条为始终可见、始终不可见,或
者在需要的时候才出现。
    在任何一个给定时刻,只有ScrollPane的一部分可以被看见,这个可见的区域称为Viewport。他们类似于Layers但
提供了更多方法来控制大小和形状。
    现在,我们已经有了flowchart最底层的容器,我们需要创建各种图形加到这个容器上面来。为此,我们得研究一下
Draw2d的Graphics类,以及它的绘图功能。

Draw2d,一个非常强大的javascript类库,可以画各种各样的流程图,希望对大家有帮助! 立即下载

相关推荐

draw2d.js v2.9.1最新版本附带完整demo

一般用来画工作流图啥的。 大伙懂的,最新版本,我做了一个demo,我用的浏览器是火狐,good luck^_&

jsDraw2d

jsDraw2d 是由jsFiction基于LGPL协议发布的一javascript2D绘图库。源代码及实例在挂官方网站中可见。     从这段代码中,我学到很多。

潘多拉猫 1829

javascript图形API库jsDraw2D

强大的javascript图形开发资源,适合做基于网页的图形系统。有英文说明,没有中文文档。

Draw2D 开源项目教程

Draw2D 开源项目教程 1. 项目介绍 Draw2D 是一个现代的 HTML5 JavaScript 库,用于可视化和交互式地创建类似于 Visio 的图表、流程图或工作流。Draw2D 提供了丰富的功能,使得开发者能够轻松地创建各种视觉语言和工具。该项目最初是基于 draw2d.org 项目开发的,后来迁移到 GitHub 并采用了 MIT 许可证。 Draw2D 的主要特点包括: 支持创...

gitblog_00001的博客 949

draw2d:使用JavaScript和HTML5创建类似绘图,图表或工作流的Visio

Draw2D 使用JavaScript和HTML5创建Visio,例如绘图,图表或工作流。 Draw2D是一个现代HTML 5 JavaScript库,用于可视化以及与图和图的交互。 Draw2D touch可以轻松创建各种可视语言和工具。 我的项目的新源代码主页。 新家,因为我将许可证切换为MIT。 文献资料 当地发展 npm install DIR=/examples yarn dev 建造 ./build.sh 发布新版本 npm version patch npm publish 使用Draw2D的项目 脑箱 连接您的Raspi,Arduino或启用WebUSB的设备。 使用可视化编程语言来连接,控制和玩所有传感器和工具。 您的专案 如果您想在这里列出您的项目,请随时与我联系

draw2d 绘制图形教程

draw2d 绘制图形教程 draw2d 绘制图形教程draw2d 绘制图形教程 draw2d 绘制图形教程

draw2d实战教程:从零开始构建你的第一个Web流程图应用

draw2d是一个功能强大的JavaScript库,让你能够轻松创建类似Visio的绘图、图表或工作流。本教程将带你快速入门,从零开始构建一个完整的Web流程图应用,即使你没有丰富的前端开发经验也能轻松上手。 ## 为什么选择draw2d? draw2d基于HTML5技术,无需任何插件即可在现代浏览器中运行。它提供了丰富的API和组件,让你能够快速构建各种流程图应用,从简单的流程图到复杂的业务

gitblog_00937的博客 1153

知识图谱与人工智能本体论:构建机器认知的语义基石

本文探讨了知识图谱与人工智能本体论如何作为机器认知的语义基石,让AI从‘知道数据’迈向‘理解知识’。文章详细拆解了本体论的核心构件与构建方法,并阐述了从本体到知识图谱的实践路径,包括知识获取、融合、存储及推理应用,最终分析了其在智能搜索与专家系统等场景中带来的根本性重塑。

nginx7reverse的博客 910

Draw2d 教程(一)

  本文主要译自《SWT/JFace in action》附录C,并结合译者实践经验整理。译者认为讨论一点纯粹Draw2D的东西是有必要的,因为第一,并不是所有的应用都必须(或者适合)使用GEF;第二,Draw2D是GEF的基础,对Draw2D知之甚少的情况下学习GEF,往往学习曲线比较陡,因为其中哪些是Draw2D的概念,哪些是GEF的概念往往难以厘清。本文假设读者有SWT基础。

CS_Mercy的专栏 1362

基于STM32与OV7670的嵌入式视频监控系统设计与实现

本文详细介绍了基于STM32单片机与OV7670摄像头的嵌入式视频监控系统设计与实现。从硬件选型、电路设计到软件开发,涵盖了摄像头驱动、TFT显示优化及图像处理等关键技术,提供了实用的调试技巧和性能优化方案,为低成本、高效率的视频监控系统开发提供完整解决方案。

desk3的博客 802

AOSP Android14 Launcher3——动画核心类QuickstepTransitionManager详解

是一个复杂但核心的动画管理器。它利用 Android 的远程动画机制,拦截系统默认的窗口切换,并替换为高度定制、与 Launcher UI 深度集成的平滑过渡动画。当用户从一个应用程序通过手势或按键返回到 Launcher (桌面) 时,它负责创建和运行动画,使得应用程序窗口能够平滑地过渡(通常是缩小)到 Launcher 上的对应目标(图标、小部件或屏幕中心),同时 Launcher 界面元素(工作区、背景等)恢复显示。计算动画所需的各种参数,如窗口的起始/结束位置、缩放比例、透明度、圆角、裁剪区域等。

Micheal_Yang's Blog 2668

Draw2D 教程(四)

  4、使用Graphics来创建图形     在SWT中,graphic context(GC)可以单独创建为一个对象,也可以通过PaintEvent获得。但是在Draw2d中,Figure可以从2.1节中讲述的那些paint方法中获得Graphics(方法参数)。Graphics的绝大多数方法都和CG中的相同,最大的不同是Draw2d允许Graphics对象利用tran

CS_Mercy的专栏 808

保姆级教程:在树莓派5B上用AI Kit跑YOLOv8,实测134fps的完整配置流程

本文提供了一份详细的树莓派5B搭配AI Kit部署YOLOv8的教程,从硬件组装到模型转换、优化和部署,最终实现134FPS的高帧率推理性能。通过Hailo-8L AI加速模块和HEF模型转换,这套方案为边缘AI计算提供了强大支持,适用于智能监控、无人机视觉导航等应用场景。

weixin_28725407的博客 448

Draw2D教程(六)

  6、集成    现在,我们几乎可以动手来写flowchart的主类代码了。但在此之前,我们先来了解一下在Draw2d中如何实现对Figure的拖拽。另外,我们还会加入一个FigureFactory类,专门用来创建Figure。6.1、Draw2d的拖拽    我们前面提到过一些Draw2d中比较重要的listener和event,但里面没有像SWT中的DragSource、DropTa

CS_Mercy的专栏 928

LaTeX参考文献格式apsrev4-1,增加文献标题

APS的LaTeX参考文献格式apsrev4-1是隐藏标题的,如果想要出现标题,需要更改apsrev4-1.bst文件内容 在apsrev4-1.bst文件靠后部分,定义不同类型文献格式的地方,将article类型的内容替换为, FUNCTION {article} { output.bibitem format.authors booktitle empty$ { "author" output.check }{ output } if$ author format.

loading1234567的博客 5031

Draw2d Label

<br />在Draw2d中,IFigure对象代表图形,IFigure对象还能包含其他的IFigure对象,所有的IFigure对象组合成用户指定的图形 <br />通常用户可以继承Figure类实现自己的图形。Figure实现了IFigure接口 <br />我下面写了个实例,实现了一个Figure,并设置边框为 LineBorder(边框类似为连线),而且还给它加了颜色,好像是淡绿色,对颜色没啥研究,另外还添加了以个Label作为显示的Figure,并设置为Label的现实文字和文字对齐方式,以及Fi

ssusriqpl_java的专栏 2071

泛微E9统一待办接口说明

需要第三方表单,在提交自己的流程后,通过【window.location.href=‘oa地址/workflow/request/ViewRequestOS.jsp?需要第三方表单,在提交自己的流程后,通过【window.location.href=‘oa地址/workflow/workflow/WfRefreshList.jsp’】通过中转页面与第三方系统对接,按照第三系统的验证方式开发中转页面中的程序。C)第三方根据相同的数据加密,结果一致就认证成功,打开流程。优点:可以灵活的对接各个系统。

泛微二次开发后端知识总结 6396

Draw2D教程(二)

  原文:http://dev.youkuaiyun.com/author/ioriogami/b06d02e470ff483ba02c2fefe804072d.html 2、Draw2d Figures     构建一个Draw2d GUI需要写很多代码。但是,区别于 SWT/JFace的GUI元素,Draw2d的组件支持移动以及其他 各种操作,这些组件都是Figure的子类实例...

老付 1297

基于SAHI算法优化YOLOv8的小目标检测性能研究

SAHI(SliceAwareHyperInference)是一种推理优化算法,通过将大图切片为小块并分别推理的方式,实现更精细的小目标检测。提升小目标检测精度:切片后的小目标在每个小块中占比更大,模型能够更好地聚焦。兼容性强:可直接集成到现有目标检测框架中(如YOLO系列、Detectron2等)。支持大分辨率图片和视频推理:减少硬件对大图推理的限制。本文详细探讨了如何通过SAHI(切片辅助超推理算法)结合YOLOv8模型,有效提升小目标检测性能,尤其是在高分辨率图片和视频场景中表现优异。

博客 2371

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

GEF入门系列(一、Draw2D)

关于Java2D相信大家都不会陌生,它是基于AWT/Swing的二维图形处理包, JDK附带的示例程序向我们展示了Java2D十分强大的图形处理能力。在Draw2D出现以前,SWT应用程序在这方面一直处于下风,而Draw2D这个SWT世界里的Java2D改变了这种形势。可能很多人还不十分了解GEF和Draw2D的关系:一些应用程序是只使用Draw2D,看起来却和GEF应用程序具有相似的外观。原因是

鲨鱼的专栏 4359

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

Draw2D 教程(五)

  5、理解Connection    在前面的代码里,我们不止一次地看到了FixedAnchor这个类,它继承了AbstractConnectionAnchor,使得你可以可以给两个Figure之间添加连线。由于Connection创建组件之间的联系,所以它们在系统模型和图表中担任重要角色。管理Connection以及它们的ConnectionAnchor比较复杂

CS_Mercy的专栏 920

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

上一篇: Draw2D教程(二)
下一篇: Draw2D 教程(四)
CS_Mercy
博客等级 码龄18年 12粉丝 45原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值