jsPlumb（2）-配置

tracy 发布于2019-08-14 12:43 / 3604人阅读

摘要：感受最容易最直观是重写的默认配置。有效健，初始值如下注意的是。每条默认设置的解释对于那些没有声明的，对的和也适用。所有的和的给默认使用是否可通过鼠标分离当被请求却不存在时是否报错默认的遮罩可通过配置配置是否可以连接的定义的和默认所有的通过

感受jsPlumb最容易最直观是重写jsPlumb的默认配置。如果你没这么做，你不得不每次调用都得重写这些值。connect和addEndpoint的每个参数都和jsPlumb的默认值有关。

默认设置存储在jsPlumb.Defaults，是个javascript对象。有效健，初始值如下：

Anchor : "BottomCenter",
Anchors : [ null, null ],
ConnectionsDetachable   : true,
ConnectionOverlays  : [],
Connector : "Bezier",
Container : null,
DoNotThrowErrors  : false,
DragOptions : { },
DropOptions : { },
Endpoint : "Dot",
Endpoints : [ null, null ],
EndpointOverlays : [ ],
EndpointStyle : { fillStyle : "#456" },
EndpointStyles : [ null, null ],
EndpointHoverStyle : null,
EndpointHoverStyles : [ null, null ],
HoverPaintStyle : null,
LabelStyle : { color : "black" },
LogEnabled : false,
Overlays : [ ],
MaxConnections : 1,
PaintStyle : { lineWidth : 8, strokeStyle : "#456" },
ReattachConnections : false,
RenderMode : "svg",
Scope : "jsPlumb_DefaultScope"

注意：EndpointHoverStyle 的fillStyle是null
。也就是说jsPlumb使用来自Connector的hover style的strokeStyle来填充Endpoint。

EndpointStyle和EndpointStyles你都可以定制，你可以让每个连接的Endpoint都不一样。Endpoint和Endpoints也一样。jsPlumb会先检查用户的Endpoint和EndpointStyle数组，然后再检查默认的。

你可以通过importDefaults方法覆盖默认值：

jsPlumb.importDefaults({
  PaintStyle : {
    lineWidth:13,
    strokeStyle: "rgba(200,0,0,0.5)"
  },
  DragOptions : { cursor: "crosshair" },
  Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
  EndpointStyles : [{ fillStyle:"#225588" }, { fillStyle:"#558822" }]
});

加载并执行这段代码后，就会得到效果。

每条默认设置的解释

Anchor 对于那些没有声明Anchor的Endpoint，对Connection的source和target也适用。

Anchors 所有Connection的source和target的Anchors

Connector 给默认Connector使用

ConnectionsDetachable Connections是否可通过鼠标分离

Container

DoNotThrowErrors 当Anchor, Endpoint or Connector被请求却不存在时是否报错

ConnectionOverlays 默认Connection的遮罩

DragOptions 可通过jsPlumb.draggable配置

DropOptions 配置Endpoint是否可以drop连接

Endpoint Endpoint的定义

Endpoints jsPlumb.connect的source 和 target

EndpointOverlays 默认所有的Overlays

EndpointStyle

EndpointStyles

EndpointHoverStyle

EndpointHoverStyles

HoverPaintStyle

LabelStyle

LogEnabled

Overlays

MaxConnections

PaintStyle

ReattachConnections

RenderMode

Scope

jsPlumb.getInstance

通过 jsPlumb.getInstance

jsPlumb.getInstance({
  PaintStyle : {
    lineWidth:13,
    strokeStyle: "rgba(200,0,0,100)"
  },
  DragOptions : { cursor: "crosshair" },
  Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
  EndpointStyles : [
    { fillStyle:"#225588" }, 
    { fillStyle:"#558822" }
  ]
});

云服务器 GPU云服务器 jsplumb jsplumb库使用服务器配置2个ip 200万左右机房hp服务器配置清单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/64665.html

jsPlumb（1） - 开始使用

摘要：社区版本为开发者在他们的网页上提供可视化的元素连接。在现代的浏览器使用，在和以下版本使用。建议用户自己设置。到目前为止，一个在每个终点都有，在中间有一个标签，添加四个元素，实际添加的元素取决于渲染器使用的是还是。 jsPlumb jsPlumb社区版本为开发者在他们的网页上提供可视化的元素连接。在现代的浏览器使用SVG，在IE8和以下版本使用VML。 jsPlumb没有额外的依赖。 ...

LoftySoul 2019-08-21 10:42 评论0 收藏0
jsPlumb（3）-基本概念

摘要：介绍是用来连接元素的，所以核心是，其中又分为以下四个概念一个和某个相关元素的位置。有四种类型贝塞尔曲线直线流程图状态机。一个由两个一个，可有可无。每个有一个关联的。的公共只有和，创建和配置。但是你需要熟悉其内部的的概念。介绍 jsPlumb是用来连接元素的，所以核心是Connection，其中又分为以下四个概念： Anchor 一个和某个相关元素的位置。你不能创建它们，非可视化，只...

tulayang 2019-08-21 10:42 评论0 收藏0
在vue项目中jsPlumb制作流程图，拖拽复制使用 jquery 和 jquery UI

摘要：用做流程图的项目，有一项功能是要从左侧的菜单栏拖动项目到右侧的面板上。参考了一些博客和，决定使用中的和功能。这是早期用jsPlumb做流程图走的一个坑，使用jquery来制作流程图，最近换成了用go.js来制作流程图后，可以使用go.js中自带的方法来制作拖拽效果，就不再使用jquery了。用jsPlumb做流程图的项目，有一项功能是要从左侧的菜单栏拖动项目到右侧的面板上。参考了一...

marser 2019-08-23 13:53 评论0 收藏0
记一次绘图框架技术选型: jsPlumb VS mxGraph

摘要：公司项目需要用到绘图框架，绘图部分以前是另一位同事负责，用的是框架。基于以上提及到的种种原因，上年年末我做起了技术调研，希望能找到一个合适我们项目的绘图框架。兼容性问题项目对浏览器兼容性比较宽松，浏览器兼容性问题不在考虑范围之内。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

longmon 2019-08-23 15:36 评论0 收藏0
记一次绘图框架技术选型: jsPlumb VS mxGraph

摘要：公司项目需要用到绘图框架，绘图部分以前是另一位同事负责，用的是框架。基于以上提及到的种种原因，上年年末我做起了技术调研，希望能找到一个合适我们项目的绘图框架。兼容性问题项目对浏览器兼容性比较宽松，浏览器兼容性问题不在考虑范围之内。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...

channg 2019-08-02 14:23 评论0 收藏0