Блог

Главная - Вопросы по программированию - Перекрытие меток в jsplumb

Перекрытие меток в jsplumb

#javascript #jquery #jsplumb

#javascript #jquery ( jquery ) #jsplumb

Вопрос:

Есть ли способ избежать перекрытия меток с помощью jsplumb? Иногда у меня довольно много линий водопровода, и текст надписи ужасно близок друг к другу. Я хочу внедрить некоторый стиль в элементы, чтобы сделать их более удобочитаемыми, но от этого становится еще хуже.

Есть ли способ распределить их или как-то добавить поля, чтобы они не конфликтовали таким образом?

введите описание изображения здесь

Ответ №1:

Да, вы можете добавлять поля

 overlays: [
                                        ["Label", {
                                            location: [0,0],
                                            cssClass: "foo",
                                            label: 'Drop',                                                
                                        }],
                                        ["Label", {
                                            location: [0.5, 1.5],
                                            label: "Drag",
                                            cssClass: "endpointSourceLabel"
                                        }]
                                    ]

CSS

 .foo{
 margin : 10px;
}
.endpointSourceLabel{
 padding : 5px 10px;
 margin : 5px 3px;
}

Комментарии:

1. Это просто перемещение метки вдоль линии, не так ли? Часто это проблема, когда у меня 5 или более соединений, а метки слишком длинные, чтобы все они помещались рядом друг с другом таким образом. Единственный способ, которым они могли бы поместиться, — это наложение друг на друга.

2. да, это просто перемещение по строке. Наличие меток рядом с источником или целью (в соответствии с вашими требованиями) должно уменьшить вероятность перекрытия меток. Мой ответ касался, в частности, того, как их расположить и добавить поля. Вы можете использовать любые значения, подходящие для вашего приложения и обеспечивающие меньшую вероятность перекрытия.

Метки: