B
B
bor4uk2021-12-06 09:35:51
Raphael
bor4uk, 2021-12-06 09:35:51

How to output text correctly in Raphael JS?

Hello everyone, I hope for your understanding and good answers)
Bottom line: I drew several points on the canvas, I want to sign them (so that the text is either next to the point, or set the position myself), but no matter how hard I try, the text does not want to appear on the screen at all . I am attaching the source code, without my attempts to display the text on the screen. Thank you very much in advance!

$(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);
    }
});

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question