html - 在 SVG 或 Raphael.js 中的路径或多边形内写入文本

Question

我正在使用 Raphael.js 在图像上创建多边形(或实际上闭合的路径)。我想将文本放在多边形内。有什么方法可以创建一个文本元素，然后调整它的大小和位置，使整个元素都在多边形的范围内吗？

是否至少有任何算法可以提供我可以手动调整的良好猜测？

Answer 1

好的，我考虑了一整天，终于有机会拼凑一些演示代码。它在很多方面明显不完美，但可能是一个很好的起点，而且似乎确实适用于我随机生成的大多数多边形。

第 1 部分:将多边形上的文本居中。使用边界框被证明非常不令人满意，所以我设计了一种技术来平均给定路径 container 中的所有点:

            //  Determine the *weighted* center of this figure
            var segments = Raphael.parsePathString( container.attr( 'path' ) );
            var count = 0, sum_x = 0, sum_y = 0;
            for ( var i = 0; i < segments.length; i++ )
            {
                if ( segments[i][0] == 'L' || segments[i][0] == 'M' )
                {
                    count++;
                    sum_x += segments[i][1];
                    sum_y += segments[i][2];
                }
            }

            var cx = sum_x / count, cy = sum_y / count;

第 2 部分:碰撞检测。我需要一种机制来检查给定对象是否在当前形状内。由于懒惰，我只是在创建 Canvas 之前扩展了 Raphael 元素对象。

        Raphael.el.isObjectInside = function( obj )
        {
            var box = obj.getBBox();
            return this.isPointInside( box.x, box.y ) 
                        &&
                    this.isPointInside( box.x2, box.y )
                        &&
                    this.isPointInside( box.x, box.y2 )
                        &&
                    this.isPointInside( box.x2, box.y2 );
        }

第 3 部分:迭代调整大小。基本上，我们使用上面生成的坐标并将它们应用于生成的标签文本。我们每次迭代都会减少一次规模，直到我们低于某个阈值，此时我的代码会简单地放弃(您的代码可能不应该):

            var s = 1.0;
            if ( ibox.width >= cbox.width * 0.7 )
            {
                s = ( cbox.width * 0.7 ) / ibox.width;
            }

            while ( s > 0.1 )
            {
                insert.attr( { transform: [ "S", s, s, ibox.x + ibox.width / 2, ibox.y + ibox.height / 2, "T", 
                if ( container.isObjectInside( insert ) )
                    return;
                s *= 0.65;
            }

            console.log("Warning: NOT a clean fit" );

对于我扔给它的大多数纯随机多边形，结果看起来都不错。我敢肯定，它的计算量比需要的要多得多。我的代码暂存here -- 只需单击多边形即可生成一个新多边形。

快乐编码。