在 svg 或画布中将文本换成圆形 [英] Wrap text to a circle shape in svg or canvas
问题描述
将文本拟合到网站上的圆圈的一个好的解决方案是什么，所以它会随着圆圈的曲线而不是矩形边界框流动?
这是我想要实现的目标:页面上有许多黑色圆圈(大小固定)，每个圆圈旁边都有一个文本区域.当文本输入到文本区域时，它会出现在黑色圆圈中，它位于两个轴的中心.如果输入的文本过多，则该行变得比圆的半径长，减去指定的边距值，则该行将像您期望的常规换行一样中断，而文本块仍然居中.当然，靠近顶部或底部的线会比靠近中间的线短.
文本将具有固定大小，当圆圈被文本填充时，不应显示额外内容(如溢出隐藏).
带有文字的黑色圆圈实际上是气泡，用于打印并粘在海报上.
是否有任何出色的 SVG/Canvas 库支持这一点，还是我必须从头开始寻找我们的方法?
有一个提议的 CSS 功能称为排除"，可以在定义的区域内流动文本:
<!doctype html><html lang="zh"><头><风格>身体{背景颜色:象牙色；填充:20px；}画布{边框:1px纯红色；}</风格><script src="http://code.jquery.com/jquery-1.9.1.js"></script><脚本>$(函数(){var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");var text = "'那是圣诞节前一天晚上，整个房子里，没有一个生物在动，甚至没有一只老鼠.圣诞节那天的故事就这样开始了";var font="12pt verdana";变种文字高度=15；var lineHeight=textHeight+5;变种线=[];变量 cx=150;变量 cy=150;变量 r=100;初始化线()；wrapText();ctx.beginPath();ctx.arc(cx,cy,r,0,Math.PI*2,false);ctx.closePath();ctx.strokeStyle="天蓝";ctx.lineWidth=2;ctx.stroke();//预先计算圆的每个水平弦的宽度//这是文本允许的最大宽度函数初始化线(){for(var y=r*.90; y>-r; y-=lineHeight){var h=Math.abs(r-y);if(y-lineHeight<0){ h+=20;}var 长度=2*Math.sqrt(h*(2*r-h));if(长度&&长度>10){lines.push({ y:y, maxLength:length });}}}//在圆的每一行上绘制文本函数 wrapText(){变量 i=0;var words=text.split(" ");while(i<lines.length && words.length>0){线=线[i++];var lineData=calcAllowableWords(line.maxLength,words);ctx.fillText(lineData.text, cx-lineData.width/2, cy-line.y+textHeight);words.splice(0,lineData.count);};}//计算一行可以容纳多少个单词函数 calcAllowableWords(maxWidth,words){变量字数=0；var testLine="";变量间隔="；变装宽度=0；变装文本="";ctx.font=字体；for(var i=0;i最大宽度){返回({计数:我，宽度:适合宽度，文本:fittedText});}安装宽度=宽度；拟合文本=测试线；}}});//结束 $(function(){});</脚本></头><身体><p>文本被包裹和剪裁在一个圆圈内</p><canvas id="canvas" width=300 height=300></canvas></身体></html> What would be a good solution for fitting text to a circle on a website, so it flows with the curves of the circle, instead of a rectangular bounding box?
Here's what I'm trying to achieve: There are a number of black circles (of a fixed size) on a page, with a textarea next to each of them. When text is entered into the textarea, it appears in the black circle, where it is centered on both axes. If so much text is entered that line becomes longer than the radius of the circle, minus a specified value for margin, the line will break like you would expect from regular wrapping, with the block of text still being centered. Lines nearer the top or bottom will, of course, be shorter than the ones near the middle.
The text will have a fixed size and when the circle is filled with text, the extra content should not be shown (like overflow hidden).
The black circles with the text are really speech bubbles, which are meant to be printed and glued onto a poster.
Do any of the fantastic SVG/Canvas libraries support this or will I have to figure our a method from scratch?
There is a proposed CSS feature call "exclusions" that would make it possible to flow text inside defined areas: http://www.w3.org/TR/css3-exclusions/
This means that SVG and Canvas paths would likely be defined as containers and text would flow/wrap inside the containers.
I did say "proposed" -- it's a ways off from being a reality in browsers.
However...
You can fairly easily wrap text inside a circle using html canvas
The width available to display text on any line changes as you move down the circle.
Here’s how to determine the maximum available width of any horizontal line on a circle
// var r is the radius of the circle
// var h is the distance from the top of the circle to the horizontal line you’ll put text on
var maxWidth=2*Math.sqrt(h*(2*r-h));
You fit text to the line by measuring the width of text—adding one word at a time, until you’ve used up all the available width of that line.
Here’s how to use canvas to measure any text using the current context.font:
var width=ctx.measureText("This is some test text.").width;
The rest is just adding text to each line up to the maximum line width and then starting a new line.
If you prefer SVG, you can do similar in SVG using the element.getComputedTextLength method for text metrics.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/upq6L/
<!doctype html>
<html lang="en">
<head>
<style>
body{ background-color: ivory; padding:20px; }
canvas{ border:1px solid red;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var text = "'Twas the night before Christmas, when all through the house, Not a creature was stirring, not even a mouse. And so begins the story of the day of Christmas";
var font="12pt verdana";
var textHeight=15;
var lineHeight=textHeight+5;
var lines=[];
var cx=150;
var cy=150;
var r=100;
initLines();
wrapText();
ctx.beginPath();
ctx.arc(cx,cy,r,0,Math.PI*2,false);
ctx.closePath();
ctx.strokeStyle="skyblue";
ctx.lineWidth=2;
ctx.stroke();
// pre-calculate width of each horizontal chord of the circle
// This is the max width allowed for text
function initLines(){
for(var y=r*.90; y>-r; y-=lineHeight){
var h=Math.abs(r-y);
if(y-lineHeight<0){ h+=20; }
var length=2*Math.sqrt(h*(2*r-h));
if(length && length>10){
lines.push({ y:y, maxLength:length });
}
}
}
// draw text on each line of the circle
function wrapText(){
var i=0;
var words=text.split(" ");
while(i<lines.length && words.length>0){
line=lines[i++];
var lineData=calcAllowableWords(line.maxLength,words);
ctx.fillText(lineData.text, cx-lineData.width/2, cy-line.y+textHeight);
words.splice(0,lineData.count);
};
}
// calculate how many words will fit on a line
function calcAllowableWords(maxWidth,words){
var wordCount=0;
var testLine="";
var spacer="";
var fittedWidth=0;
var fittedText="";
ctx.font=font;
for(var i=0;i<words.length; i++){
testLine+=spacer+words[i];
spacer=" ";
var width=ctx.measureText(testLine).width;
if(width>maxWidth){
return({
count:i,
width:fittedWidth,
text:fittedText
});
}
fittedWidth=width;
fittedText=testLine;
}
}
}); // end $(function(){});
</script>
</head>
<body>
<p>Text wrapped and clipped inside a circle</p>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
这篇关于在 svg 或画布中将文本换成圆形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
