Question

我想把

一个圆圈或
一个破碎的圆圈（就像我在不完全关闭的情况下手绘圆圈一样）或
一个正方形，或
括号

即

       non-bracketed text. non-bracketed 
       text. non-bracketed text. non-
    +- bracketed text. Bracketed text    -+
    |  that can span several lines and    |
    +- more.  non-bracketed text.  non-  -+
       bracketed text. non-bracketed
       text.

我看到了这个：Easier way to create circle div than using an image?但如果我要在它周围画一个圆圈，文字就在左上角，这不是我想要的。

我看到了这个：css: how to draw circle with text in middle?但文字居中，我希望圆圈围绕文字移动，而不是将文字移动到圆圈内。

澄清

文字已经对齐，我不希望它重新对齐，以便圆圈围绕它。圈子必须移动以补偿文字， NOT 反过来。

另外，我需要能够相当容易地在4个不同的圈子之间切换。只需更改标签的类别即可。

以下是我正在寻找的样本：

sample

问题：

我能不能让人们对此公开投票，这样可以让这个帖子暂停？这是非常具体的，我会挑战任何人说出它为什么不是。

答案：

在dcclassics的帮助下，提出更多问题并进行更多搜索，我找到了解决方案。

http://jsfiddle.net/adrianh/4SVHH/7/

function getCanvas(i, left, top, width, height)
{
    var canvas;
    var circles = document.getElementById("circles");
    if (typeof circles.childNodes[i] != 'undefined')
    {
        canvas = circles.childNodes[i];
        canvas.width=width;
        canvas.height=height;
        canvas.style.left=left+"px";
        canvas.style.top=top+"px";
    }
    else
    {
        canvas = "<canvas "+
        "width='"+width+"' "+
        "height='"+height+"' "+
        "style='"+
            "position:absolute;"+
            "z-index:0;"+
            "left:"+left+"px;"+
            "top:"+top+"px;"+
            "pointer-events:none;"+
            //"border:1px solid;"+
        "' />";
        circles.insertAdjacentHTML('beforeend', canvas);
    }
    return circles.childNodes[i];
}

function circleRect(i, rect)
{
    var diameter = Math.sqrt(rect.width*rect.width+rect.height*rect.height);
    var cx = (rect.right + rect.left)/2;
    var cy = (rect.top + rect.bottom)/2;
    var left = Math.floor(cx - diameter/2);
    var top  = Math.floor(cy - diameter/2);
    diameter = Math.floor(diameter);
    var canvas = getCanvas(i, left-1, top-1, diameter+2, diameter+2);
    var ctx=canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(diameter/2+1,diameter/2+1,diameter/2,0,2*Math.PI);
    ctx.lineWidth=2;
    ctx.strokeStyle = "red";
    ctx.stroke();
}

function rectRect(i, rect)
{
    var canvas = getCanvas(i, rect.left-1, rect.top-1, rect.width+2, rect.height+2);
    var ctx=canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(1, 1);
    ctx.lineTo(rect.width+1, 1);
    ctx.lineTo(rect.width+1, rect.height+1);
    ctx.lineTo(1, rect.height+1);
    ctx.lineTo(1, 1);
    ctx.strokeStyle = "red";
    ctx.lineWidth=2;
    ctx.stroke();
}

function drawCircles()
{
    $(".circled").each(function(i, obj) {
        var rect = obj.getBoundingClientRect();
        if (/\brect\b/.test(obj.className))
        {
            rectRect(i, rect);
        }
        else
        {
            circleRect(i, rect);
        }
    });
}
document.body.insertAdjacentHTML('afterbegin', '<div id="circles"></div>');
drawCircles();

window.onresize=drawCircles;

所提供的解决方案仅显示一个圆形和一个矩形，但可以修改它以用于我要求的任何类型的循环方法。这不使用svg文件，而是使用画布。这可能会将其限制在更新的浏览器中，但对我来说这不是问题。

Answer 1

Here是围绕文字的圈子的jsFiddle。

<div class="circle">Circle</div>

.circle {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

http://jsfiddle.net/V9Gn5/在某些文字周围显示了一个椭圆，而不是圆圈，但没有移动文字。

编辑：如果其他人想要玩它，我现在就能尽可能接近。 http://jsfiddle.net/V9Gn5/19/

如何围绕HTML文档中的文本？

澄清

问题：

答案：

1 个答案: