勤快学

jsPlumb的简单使用

  标签:jsPlumb    发布于:2016年11月24日

                           

  1. jsPlumb概述
    jsPlumb是一个在dom元素之间绘制连接线的javascript框架,它使用svg技术绘制连接线。
  2. 基本概念
    很明显,一个连线主要要解决的问题包括谁和谁连,在哪里连(连接点在哪里),连接点长啥样,如何画线等问题
    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" }]
    ]

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

      

    技术分享

                           

上一篇:一个Azure VM RDP连接问题

下一篇:AngularJS的除date外的其它 过滤器