javascript - 如何通过 javascript(svg.js) 将文本附加到 svg 路径

Question

嘿，我有一些 svg 元素，它们是开放路径，我想向它们添加一些标签。现在我的原始代码在 canvas 中，我正在寻找类似于 canvas(fillText) 的技术，您可以在其中向 svg 元素添加文本标签。

我正在添加代码，我正在使用库 svg.js 来实现 svg 功能。请仔细看看 ticklines 方法，这是一种在 Canvas 中编写的方法，现在我正在尝试将其转换为 svg。这是我想要达到的最终结果:

更新:

我对代码进行了一些更改，现在我的标 checkout 现了，但其中一些是上下颠倒的。我该如何修复它？我希望它像图片中那样。

$(function(){
   var draw = SVG('drawing').size(1024, 1020);
    
    // Define all your triangle points
    var v0={x:58,y:845};
    var v1={x:984,y:845};
    var v2={x:521,y:41};
    var triangle=[v0,v1,v2];

    // Define all your segments here
    var segments=[
      { 
        points:[{x:58,y:845},{x:272,y:845},{x:567,y:333},{x:461,y:150}],
        fill:'rgb(172,236,222)',
        label:{text:'D1',cx:300,cy:645,withLine:false,endX:null,endY:null},
      },
      { 
        points:[{x:272,y:845},{x:567,y:333},{x:646,y:468},{x:572,y:597},{x:716,y:845}],
        fill:'deepskyblue',
        label:{text:'D2',cx:490,cy:645,withLine:false,endX:null,endY:null},
      },
      { 
        points:[{x:716,y:845},{x:845,y:845},{x:683,y:565},{x:734,y:476},{x:503,y:76},{x:461,y:150},{x:646,y:468},{x:572,y:595}],
        fill:'lightCyan',
        label:{text:'DT',cx:656,cy:645,withLine:false,endX:366,endY:120},
      },
      {  //here - I am in hell.-s5
        points:[{x:530,y:59},{x:512,y:59},{x:521,y:41}],
        fill:'black',
        label:{text:'PD',cx:600,cy:52,withLine:true,endX:520,endY:70},
      },
      {
        points:[{x:595,y:235},{x:614,y:203},{x:530,y:59},{x:512,y:59},{x:503,y:76}],
        fill:'navajoWhite',
        label:{text:'T1',cx:670,cy:140,withLine:true,endX:574,endY:105},
      },
      { 
        points:[{x:753,y:446},{x:735,y:476},{x:595,y:235},{x:614,y:203}],
        fill:'tan',
        label:{text:'T2',cx:800,cy:290,withLine:true,endX:662,endY:120},
      },
      { 
        points:[{x:845,y:845},{x:683,y:565},{x:753,y:446},{x:984,y:845}],
        fill:'peru',
        label:{text:'T3',cx:800,cy:645,withLine:false,endX:null,endY:null},
      },
    ];

      // label styles
      var labelfontsize=12;
      var labelfontface='verdana';
      var labelpadding=3;
    
      var arrowheadLength=10;
      var arrowheadWidth=8;
      //var arrowhead=document.createElement('canvas');
     //  premakeArrowhead();
    
    for(var i=0;i<segments.length;i++){
        drawSegment(segments[i]);
    }
    // draw ticklines
    ticklines(v0,v1,9,Math.PI*1.2,20,true);
    ticklines(v1,v2,9,Math.PI*3/4,20,true);
    ticklines(v2,v0,9,Math.PI*2,20,false);
    // draw molecules
    //moleculeLabel(v0,v1,100,Math.PI/2,'% CH4');
    //moleculeLabel(v1,v2,100,0,'% C2H4');
    //moleculeLabel(v2,v0,100,Math.PI,'% C2H2');
    // draw outer triangle
    drawTriangle(triangle);
    // draw legend
    //drawLegend(legendTexts,10,10,12.86);
    
    function drawTriangle(t){
         var triangle = draw.path('M '+ t[0].x +' '+ t[0].y+ ' L '+ t[1].x +' '+ t[1].y+ ' '+ t[2].x +' '+ t[2].y+' Z')
         .attr({ fill: "transparent" ,stroke: "black" , "stroke-width": "2"});
    }
    
function drawSegment(s){
  // draw and fill the segment path
    var str =  'M '+ s.points[0].x +' '+ s.points[0].y; 
    for(var i=1;i<s.points.length;i++){
        str = str.concat(' L '+ s.points[i].x +' '+ s.points[i].y);
    }
    str = str.concat(' Z');
    draw.path(str).attr({ fill: s.fill ,stroke: "black" , "stroke-width": "2"});
    // draw segment's box label
//    if(s.label.withLine){
//        lineBoxedLabel(s,labelfontsize,labelfontface,labelpadding);
//    }else{
//        boxedLabel(s,labelfontsize,labelfontface,labelpadding);
//    }
}
function ticklines(start,end,count,angle,length,isReversed){
  var dx=end.x-start.x;
  var dy=end.y-start.y;
//  ctx.lineWidth=1;
  for(var i=1;i<count;i++){
    var x0=parseInt(start.x+dx*i/count);
    var y0=parseInt(start.y+dy*i/count);
    var x1=parseInt(x0+length*Math.cos(angle));
    var y1=parseInt(y0+length*Math.sin(angle));
    draw.path('M '+ x0 +' '+ y0+' L '+ x1 +' '+ y1).attr({stroke: "black" , "stroke-width": "1"});
    if(i==2 || i==4 || i==6 || i==8){
      var labelOffset=length;
      var x1=parseInt(x0-labelOffset*Math.cos(angle));
      var y1=parseInt(y0-labelOffset*Math.sin(angle));
        
         var text = draw.text(function(add) {
            add.tspan(parseInt(i*10))
          }).path(' M '+ x1 +' '+ y1 +' L '+ x0 +' '+ y0 );
        
/*        if(!isReversed){
         var text = draw.text(function(add) {
            add.tspan(parseInt(i*10))
          }).path(' M '+ x1 +' '+ y1 +' L '+ x0 +' '+ y0 );   
        }else{
           var text = draw.text(function(add) {
            add.tspan(parseInt(i*10))
          }).path(' M '+ x1 +' '+ y1 +' L '+ x01 +' '+ y01 );
        }*/
    }
  }

}
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.0/svg.js"></script>
<div id="drawing">
</div>

Answer 1

与op聊天后发现此问题的以下答案:

要在 svg.js 中创建文本并将其移动到您使用的特定位置:

draw.text(myText).move(100, 200)

当 myText 不是字符串时，请确保在将其传递给函数之前对其进行转换，例如myText + ""

所以对于上面的代码，下面的代码可以做到这一点:

draw.text(parseInt(i*10) + "").move(x1, y1)

另请注意，不可能像在“笔”当时所在的位置写入文本那样将文本附加到路径。然而，在路径上对齐文本是可能的。