在svg或canvas中将文本换行为圆形
将文本拟合到网站上的圆圈会是一个很好的解决方案,因此它会与圆形曲线一起流动,而不是矩形边界框？
这就是我想要实现的目标:页面上有许多黑色圆圈(固定大小),每个圆圈旁边都有一个textarea.当文本输入到文本区域时,它将显示在黑色圆圈中,它以两个轴为中心.如果输入的文本太多,那么该行变得比圆的半径长,减去指定的边距值,该行将像您期望的那样在常规包装中断开,文本块仍然居中.当然,靠近顶部或底部的线将比靠近中间的线更短.
文本将具有固定大小,当圆圈填充文本时,不应显示额外内容(如溢出隐藏).
带有文字的黑色圆圈实际上是气泡,意图打印并粘贴在海报上.
任何奇妙的SVG/Canvas库都支持这个或者我必须从头开始计算我们的方法吗？
mar*_*rkE 12
有一个建议的CSS功能调用"排除",可以在定义的区域内传输文本:http://www.w3.org/TR/css3-exclusions/
这意味着SVG和Canvas路径可能被定义为容器,文本将在容器内流动/换行.
我确实说过"提议" - 这是在浏览器中实现的一种方式.
然而...
您可以使用html canvas轻松地将文本换行到圆圈内
在向下移动圆圈时,可用于在任何行上显示文本的宽度会发生变化.
以下是如何确定圆上任何水平线的最大可用宽度
// 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));
通过测量文本的宽度(一次添加一个单词,直到您已用完该行的所有可用宽度),使文本适合该行.
以下是使用canvas来使用当前context.font测量任何文本的方法:
var width=ctx.measureText(“This is some test text.”).width;
剩下的就是为每行添加文本,直到最大行宽,然后开始一个新行.
如果您更喜欢SVG,则可以使用element.getComputedTextLength方法在SVG中执行类似的文本度量.
这是代码和小提琴: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>
| 归档时间： |
|
| 查看次数： |
4919 次 |
| 最近记录： |