• jointjs笔记4- 设置线的label,


     var Link = joint.dia.Link.define('self.Link',
                        {
                            attrs: {
                                line: {
                                    connection: true,
                                    stroke: 'gray',
                                    strokeWidth: 2,
    
                                    pointerEvents: 'none',
                                    targetMarker: {
                                        type: 'path',
                                        fill: 'gray',
                                        stroke: 'none',
                                        d: 'M 10 -10 0 0 10 10 z'
                                    }
                                }
                            },
                            connector: {
                                name: 'rounded'
                            },
                            z: 1,
                            weight: 1,
                            minLen: 1,
                            labelPosition: 'c',
                            labelOffset: 10,
                            labelSize: {
                                //  50,
                                height: 30
                            },
                            labels: [{
                                markup: [{
                                    tagName: 'rect',
                                    selector: 'labelBody'
                                }, {
                                    tagName: 'text',
                                    selector: 'labelText'
                                }],
                                attrs: {
                                    labelText: {
                                        text:"包括",
                                        fill: 'black',
                                        textAnchor: 'middle',
                                        refY: '30%',
                                        refY2: '-50%',
                                        fontSize: 20,
                                        cursor: 'pointer'
                                    },
                                    labelBody: {
                                        fill: 'grey',
                                        stroke: 'grey',
                                        strokeWidth: 2,
                                        refWidth: '100%',
                                        refHeight: '100%',
                                        refX: '-50%',
                                        refY: '-50%',
                                        rx: 5,
                                        ry: 5
                                    }
                                },
                                size: {
                                     80, 
                                    height: 30
                                }
                            }]
    
                        }, 
                        {
    
                            markup: [{
                                tagName: 'path',
                                selector: 'line',
                                attributes: {
                                    'fill': 'none'
                                }
                            }],
    
                            connect: function(sourceId, targetId) {
                                return this.set({
                                    source: { id: sourceId },
                                    target: { id: targetId }
                                });
                            },
    
                            setLabelText: function(text) {
                                return this.prop('labels/0/attrs/labelText/text', text || '');
                            }
                        }
                    );
                    data.forEach((item,index)=>{
                        if(index+1<data.length){
                            new Link().connect(data[index].id,data[index+1].id).setLabelText("测试").addTo(this.graph);
                        };
                        
    });

     设置特殊的label - 替换上面的labels中

    提示:label上的rect以及text,全是通过位移移到需要的位置,svg中没有父标签和子标签,全是同级,通过位移来调整位置;(refX,refY),这两个属性

    markup: [
         {
            tagName: 'rect',
            selector: 'labelBody'

    }, { tagName:
    'rect', selector: 'labelCenter' }, { tagName: 'rect', selector: 'labelRight' }, { tagName: 'text', selector: 'labelText' }, { tagName: 'text', selector: 'labelCenterText' }, { tagName: 'text', selector: 'labelRightText' } ], attrs: { labelBody: { fill: 'grey', stroke: 'grey', strokeWidth: 2, refWidth: '100%', refHeight: '100%', refX: '-50%', refY: '-50%', // rx: 5, //圆角 // ry: 5 }, labelCenter: { fill: 'grey', stroke: 'grey', strokeWidth: 2, refWidth: "50%", refHeight: 60, refX: '50%', refY: '-175%', rx: 5, ry: 5, title:"包含包含包含", //相当于标签上的title属性,相对于text中进行省略之后,看不全的情况,该属性只用于元素上element }, labelRight: { fill: 'grey', stroke: 'grey', strokeWidth: 2, refWidth: '100%', refHeight: '100%', refX: '100%', refY: '-85%', // rx: 5, // ry: 5, text:"目标IP", }, // 左边label text labelText: { text:"包括", fill: 'black', textAnchor: 'top', refX: '-40%', refY: '30%', refY2: '-50%', fontSize: 20, cursor: 'pointer' }, // 关系label text labelCenterText: { text:"包含包含包含", fill: 'white', textAnchor: 'middle', refX: '75%', refY: '30%', refY2: '-50%', fontSize: 20, cursor: 'pointer', textWrap: { //给label设置一个box,设定好box的宽高,就可以实现文本的换行 height: 40, 30, ellipsis: true, }, "y-alignment":"middle" //设置这个文本的对齐方式 }, //右边label text labelRightText: { text:"目标IP", fill: 'black', textAnchor: 'middle', refX: '150%', refY: '30%', refY2: '-50%', fontSize: 20, cursor: 'pointer' }, },

    用到的新属性

    textWrap : dia.attributes.textWrap
    textWrap: {
      text: 'lorem ipsum dolor sit amet consectetur adipiscing elit',
       -10, // reference width minus 10
      height: '50%', // half of the reference height
      ellipsis: true // could also be a custom string, e.g. '...!?'
    }

    仅对<text>有效。

     类似于text属性,只是所提供的字符串会自动包装以适应引用边界框。

     期望一个具有text属性和可选宽度和高度的对象,它可以调整换行后文本的最终大小。负值会减小尺寸(例如,在换行后的文本周围添加padding);正值增加维度。百分比值也可以接受。

     如果文本不能按照指定的边界框放入,则溢出的单词将被切断。如果提供了省略号选项,则在切断之前插入一个省略号字符串。如果边界框中根本没有文字,则不会插入文本。见实效。breakText更多信息。


    y-alignment : dia.attributes.yAlignment
    如果设置为“middle”,则子元素将以新的y坐标为中心。

    title :dia.attributes.title
    标题不作为图形的一部分呈现,而是作为工具提示显示
     
  • 相关阅读:
    java降序排列
    冒泡排序-java
    redis-并发竞争问题
    超卖问题
    算法-题目汇总-6
    算法-题目汇总-4
    算法-题目汇总-1
    算法-二分查找-1
    算法-bst-平衡搜索二叉树-1
    算法-位运算-1
  • 原文地址:https://www.cnblogs.com/fyjz/p/14271794.html
Copyright © 2020-2023  润新知