Всем привет, надеюсь на ваше понимание и хорошие ответы)
Суть: Отрисовал несколько точек на холсте, хочу их подписать (чтобы текст был либо рядом с точкой, либо самому задать положение), но как бы я не старался текст не хочет вообще появляться на экране. Прикладываю исходный код, без моих попыток вывести текст на экран. Заранее большое спасибо!
$(document).ready(function () {
var regionPaths = {
circl1_region: {
name: 'Текст 1',
path: "m 520.57297,73.884235 a 4.1148387,3.9776782 0 0 1 -4.11483,3.977679 4.1148387,3.9776782 0 0 1 -4.11485,-3.977679 4.1148387,3.9776782 0 0 1 4.11485,-3.977678 4.1148387,3.9776782 0 0 1 4.11483,3.977678 z",
},
circl2_region: {
name: 'Текст 2',
path: " m 597.38331,138.25862 a 4.1148387,3.9776782 0 0 1 -4.11483,3.97768 4.1148387,3.9776782 0 0 1 -4.11485,-3.97768 4.1148387,3.9776782 0 0 1 4.11485,-3.97768 4.1148387,3.9776782 0 0 1 4.11483,3.97768 z",
},
circl3_region: {
name: 'Текст 3',
path: " m 527.15671,125.82266 a 4.1148387,3.9776782 0 0 1 -4.11483,3.97768 4.1148387,3.9776782 0 0 1 -4.11485,-3.97768 4.1148387,3.9776782 0 0 1 4.11485,-3.97768 4.1148387,3.9776782 0 0 1 4.11483,3.97768 z",
},
circl4_region: {
name: 'Текст 4',
path: "m 434.98429,104.60838 a 4.1148387,3.9776782 0 0 1 -4.11483,3.97768 4.1148387,3.9776782 0 0 1 -4.11485,-3.97768 4.1148387,3.9776782 0 0 1 4.11485,-3.97768 4.1148387,3.9776782 0 0 1 4.11483,3.97768 z",
},
circl5_region: {
name: 'Текст 5',
path: "m 470.82913,180.6872 a 4.1148387,3.9776782 0 0 1 -4.11483,3.97768 4.1148387,3.9776782 0 0 1 -4.11485,-3.97768 4.1148387,3.9776782 0 0 1 4.11485,-3.97769 4.1148387,3.9776782 0 0 1 4.11483,3.97769 z",
}
}
function labelPath(pathObj, text, textattr, className = '', small = false) {
if (textattr == undefined) {
textattr = {title: text, fill: '#fff', stroke: '#d1154d', "stroke-width": 3, class: 'path_' + className + ' town_dot'};
}
var bbox = pathObj.getBBox();
small = (small) ? 8 : 12;
var textObj = pathObj.paper.circle(bbox.x + (bbox.width / 2 - small / 2), bbox.y + (bbox.height / 2 - small / 2), small).attr(textattr);
return textObj;
}
var w = 696;
var h = 567;
var r = Raphael('test_map');
r.setViewBox(0,0,w,h,true);
r.setSize('100%', '100%');
attributes = {
fill: '#F0F7FC',
stroke: '#568426',
'stroke-width': 0.5,
'stroke-linejoin': 'round',
id: 'path_',
},
arr = new Array();
for (var region in regionPaths) {
var obj = r.path(regionPaths[region].path);
arr[obj.id] = region;
attributes.class = 'path_' + region;
attributes.title = regionPaths[region].name;
obj.attr(attributes);
}
});