快速的开发

 找回密码
 加入我们

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 357|回复: 1

jsPlumb的简单实用

[复制链接]

26

主题

26

帖子

82

积分

版主

Rank: 7Rank: 7Rank: 7

积分
82

热心会员

发表于 2017-3-16 20:36:43 | 显示全部楼层 |阅读模式
jsPlumb概述
jsPlumb是一个在dom元素之间绘制连接线的javascript框架,它使用svg技术绘制连接线。
基本概念
很明显,一个连线主要要解决的问题包括谁和谁连,在哪里连(连接点在哪里),连接点长啥样,如何画线等问题
1:Anchor,锚点,它是一个逻辑概念,解决连线的连接点位置问题。
2:Endpoint,端点,它是一个可视化的点,解决 连接点长啥样的问题
3:Connector,连线,解决如何画线的问题
4:Overlay,覆盖物,它主要为连接添加一些装饰物,不如标签文本,连接点的箭头。Anchor:
锚点的定义方式主要有下面几种
1:用数组来定义
[x位置,y位置,x方向,y方向]
[x位置,y位置,x方向,y方向,x像素偏移,y像素偏移]
位置的值在0~1之间
方向的值为0,1,-1
9个静态的值为:
Top TopRight
Right BottomRight
Bottom BottomLeft
Left TopLeft
Center
AutoDefault 包括Top, Right, Bottom, Left
需要注意的是,坐标使用第四象限的坐标
一个常用的组合是:
var defaultAnchors = ["Top", "Right", "Bottom", "Left", [0.25, 0, 0, -1], [0.75, 0, 0, -1], [0.25, 1, 0, 1], [0.75, 1, 0, 1]
, [0, 0.25, 0, -1], [0, 0.75, 0, -1], [1, 0.25, 0, 1], [1, 0.75, 0, 1]];
2:几何图形的周边
Circle Ellipse Triangle Diamond Rectangle Square
anchor:[{ shape:"Triangle", anchorCount:150, rotation:25 } ]
3:连续
anchor:["Continuous", { faces:[ "top", "left" ] } ]
Endpoint:
jsPlumb提供了四种类型的端点,
Dot,Rectangle,
Blank,使用失败了。
Image,使用失败了。

Connectors
jsPlumb提供了四种类型的连线,
Bezier,StateMachine,Flowchart,Straight

Overlay
jsPlumb提供了3种类型的覆盖物,
Arrow:箭头
Label:标签
Custom:自定义的html元素
ConnectionOverlays: [
["Arrow", {
location: 1,
//foldback: 1,
foldback: 0.618, ///0.618: 普通箭头,1:平底箭头,2:钻石箭头
visible: true,
id: "arrow"
}],
["Label", { location: 0.5,
cssClass: "endpointTargetLabel",
visible: true,
id: "label" }]
]

几个需要注意的地方:
1:所有的子元素在一个父容器中,并且子元素都要使用绝对布局
position: absolute;
2:端点可以通过样式隐藏,直接使用"Blank"报错了。
3:性能,在多个连接的时候,需要使用批处理模式来绘制。
sintoonUx.jsPlumbInstance.setSuspendDrawing(true)
sintoonUx.jsPlumbInstance.setSuspendDrawing(false, true);
4:设置可拖拽
sintoonUx.jsPlumbInstance.draggable(btnDoms);
使用范例

    drawConnectLine: function () {
        var sintoonUx = this;
        /// 定义锚点的位置
        var defaultAnchors = ["Top", "Right", "Bottom", "Left", [0.25, 0, 0, -1], [0.75, 0, 0, -1], [0.25, 1, 0, 1], [0.75, 1, 0, 1]
        , [0, 0.25, 0, -1], [0, 0.75, 0, -1], [1, 0.25, 0, 1], [1, 0.75, 0, 1]];
        /// 创建实例,配置默认的绘制属性,建立通用绘图方式等
        sintoonUx.jsPlumbInstance = jsPlumb.getInstance({
            PaintStyle: {
                lineWidth: 2,
                strokeStyle: "blue",
                outlineColor: "blue",
                dashstyle: "4 2",
                outlineWidth: 1
            },
            // Connector: ["Bezier", { curviness: 30 }],
            // Connector: ["StateMachine"],
            // Connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],
            Connector: ["Straight", { stub: [20, 50], gap: 0 }],

            Endpoint: ["Dot", { radius: 5, cssClass: "displaynone" }],/// 通过样式来隐藏锚点
            //Endpoint: ["Image ", { src: "http://rmadyq.sintoon.cn/Content/16Icons/arrow_right.png" }],/// 通过样式来隐藏锚点
            // Endpoint: ["Blank", "Blank"], 失败报错了,
            EndpointStyle: { fillStyle: "#567567" },
            Anchor: [defaultAnchors],
            // Anchor: ["Perimeter", { shape: "Triangle" }],
            Container: sintoonUx.flowchartContainerId,
            DragOptions: { cursor: 'pointer', zIndex: 2000 },
            ConnectionOverlays: [
                ["Arrow", {
                    location: 1,
                    //foldback: 1,
                    foldback: 0.618,
                    visible: true,
                    id: "arrow"
                }],
                ["Label", { location: 0.5, label: "zhu", cssClass: "endpointTargetLabel", visible: true, id: "label" }]
            ]
        });

        /// 绘制标签
        sintoonUx.jsPlumbInstance.bind("connection",
            function (connInfo, originalEvent) {
                var connection = connInfo.connection;
                var labelText = connection.sourceId.substring(0, 15) + "-" + connection.targetId.substring(0, 15);
                labelText = Ext.String.format("{0}---{1}", Ext.getCmp(connection.sourceId).flowStage,
                    Ext.getCmp(connection.targetId).flowStage);
                connection.getOverlay("label").setLabel(labelText);
            });

        /// 批处理绘制
        sintoonUx.jsPlumbInstance.setSuspendDrawing(true);
        var searchPat = Ext.String.format("#{0} .btnDraggable", sintoonUx.flowchartContainerId);
        var btnDoms = sintoonUx.jsPlumbInstance.getSelector(searchPat);

        /// 设置dom元素的可拖拽性
        sintoonUx.jsPlumbInstance.draggable(btnDoms);

        /// 建立dom元素之间的连接,绘制连接线,锚点,覆盖物等
        for (var i = 0; i < sintoonUx.btnConfigs.length - 1; i++) {
            sintoonUx.jsPlumbInstance.connect({ reattach: true, source: sintoonUx.btnConfigs.btnId, target: sintoonUx.btnConfigs[i + 1].btnId });
        }

        /// 强制绘制整个界面
        sintoonUx.jsPlumbInstance.setSuspendDrawing(false, true);
    }



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?加入我们

x
回复

使用道具 举报

92

主题

190

帖子

760

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
760

热心会员

发表于 2017-3-26 14:33:43 | 显示全部楼层
看一下,你写的不怎么样啊
能用鼠标,不用键盘
回复

使用道具 举报

QQ|Archiver|手机版|小黑屋|业务快速构建平台 ( 鄂ICP备15010001号

鄂公网安备 42011502000533号

GMT+8, 2019-8-20 11:53 , Processed in 0.089733 second(s), 26 queries .

Powered by Discuz! X3.3

© 2016-2036 Comsenz Inc.

快速回复 返回顶部 返回列表