Question

我们说我需要在三角形区域的中间放置一个文本。我可以使用getBBox（）来计算三角形中心的坐标：

var triangle = "M0,0 L100,0 100,50 z";
var BBox = paper.path(triangle).getBBox();
var middle;
middle.x = BBox.x + BBox.width/2;
middle.y = BBox.y + BBox.height/2;

这导致坐标（50,25）始终位于三角形的长边。如何确保计算出的＆＃34;中间＆＃34; 里面三角形？

正确的坐标应大约为：（75,25）。

代码当然应该独立于这个特定的例子，它应该适用于任何形状。

Answer 1

此片段将通过平均顶点来计算任何多边形的中心。

var paper = Raphael(0,0, 320, 200);

var triangle = "M0,0 L100,0 100,50 z";
var tri = paper.path(triangle);
tri.attr('fill', 'blue');

var center = raphaelPathCenter( tri );
var circle = paper.circle( center.x, center.y, 5);
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");


function raphaelPathCenter( path ) {
 
  path.getBBox(); // forces path to be traced so realPath is not null.
  
  var vertices = parseSVGVertices( path.realPath );
  
  var center = vertices.reduce( function(prev,cur) {
      return { x: prev.x + cur.x, y: prev.y + cur.y }
    }, {x:0, y:0} );
  
  center.x /= vertices.length;
  center.y /= vertices.length;

  return center;
}

function parseSVGVertices( svgPath )
{
  var vertices = [];
  for ( var i = 0; i < svgPath.length; i ++ )
  {    
    var vertex = svgPath[i];
    
    if ( "ML".indexOf( vertex[0] ) > -1 ) // check SVG command
        vertices.push( { x: vertex[1], y: vertex[2] } );
  }  
  return vertices;
}

<script src="https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<canvas id='canvas'></canvas>
<pre id='output'></pre>

但是有a few more triangle centers可供选择。

拉斐尔三角中心

1 个答案: