圆圈中的文本块答案

【问题标题】：The textblock in a circle圆圈中的文本块
【发布时间】：2023-03-10 08:07:02
【问题描述】：

请提示如何解决问题。

我有一个包含文本的div。

文本必须是一个圆圈。

alt text http://img153.imageshack.us/img153/4861/56160971.gif

我从什么开始解决给定的问题？可以是javascript方法（在一个网站上连接jQuery）吗？

附：该决定应该是跨浏览器的。

【问题讨论】：

кроссбраузерное > 跨浏览器兼容.. 你真正想要做什么？这很不清楚..您能否发布一些代码或链接到您想要帮助的内容？谢谢。
说实话，你写的东西我一个字都听不懂。请尝试更清楚和/或提供它应该是什么样子/做什么的示例草图
我已经非常糟糕地解释了这对我来说是必要的。我纠正了一个问题。感谢您的发言。

标签： javascript jquery css cross-browser markup

【解决方案1】：

也许你正在寻找这个插件：

http://nicodmf.github.com/TextMorph/en.html

这里有一些演示：

http://nicodmf.github.com/TextMorph/demos/jquery.html

【讨论】：

很好地破译了他想要的东西！
我第一次读到它的时候也明白了... ;) ... 尽管如此.. 一个有趣的问题.... 和 +1 链接...！
是的，引用很有趣。但这不是必需的。我不能很好地提出问题是我的错。我已经更正了一个问题。

【解决方案2】：

我能猜出翻译吗？

你有一个包含文本的 div
你不知道大小，可能是因为div大小与浏览器宽度/屏幕分辨率/父div有关
您想要一个圆圈“围绕块旋转”（有动画运动？）即您想要一个圆圈围绕包含文本的 div 移动
无论文本容器 div 的大小如何，您都希望这种情况始终发生
效果有点像 10,000 米的跑步者绕着轨道跑，只是轨道的大小是动态生成的

不是一个解决方案，但我认为翻译可能是一个更好的开始...这与您要描述的内容是否接近？

【讨论】：

@odavy，对不起。我已经非常糟糕地解释说这对我来说是必要的。我纠正了一个问题。感谢您的发言。

【解决方案3】：

我可以想到几种方法：

用更大的元素包裹文本块，调整它的大小使圆圈适合（你需要一些严肃的数学技能！）并使用跨浏览器Raphael库在上面画一个圆圈。
根据文本块的宽度和高度，调整顶部/底部填充，直到框为方形，并从不同尺寸的预绘制图像中选择最匹配的背景。

获得第二个想法的示例代码（使用 jQuery），完全未经测试：

var images = [300, 200, 100];  // image dimensions from biggest to smallest
var textbox = $('#my-textbox');
var padding = 20;  // base padding, choose your own
var w = textbox.width();
var h = textnox.height();
var filler = (w > h ? (w - h) : (h - w)) / 2;  // how much extra padding needed?
var pver = w > h ? filler : padding;  // padding vertical
var phor = w > h ? padding : filler;  // padding horizontal
textbox.css({ paddingTop: pver, paddingBottom: pver,
              paddingLeft: phor, paddingRight phor });
$.each(images, function(i, dimension) {
    if (dimension < textbox.width())
        textbox.css('backgroundImage', 'url(/img/circle_' + dimension + '.png)');
});

【讨论】：

@Yaggo，Raphael 的库太重了，它只能连接一个这个东西。是否有纯javascript的决定？
添加了第二个想法，不需要外部库。
初步绘制的图片不适合。文字可以是任意大小（每次大小测试都不可能画图）。
只画一张足够大的图片并将其用作缩小的元素而不是背景？使用绝对定位/z-index 将其置于文本框后面。