HTML 5 Canvas 内の画像の周りにテキストをラップすることは可能ですか? たとえば、Javascript フレームワークを使用していますか? KineticJS を調べましたが、役に立つものが見つかりませんでした。
編集：
私の質問が不明確なようです。私はこのようなものを探しています:
質問する
2198 次
1 に答える
4
キャンバス変換 (移動 + 回転) を使用して、画像 (四角形) の周りにテキストをラップできます。
たとえば、これはキャンバスを回転させ、画像の右側にテキストを描画する方法です。
// save the untransformed state of the context
ctx.save();
// translate to the top-right corner of the image
// ( x/y properties have been added to the standard img element )
ctx.translate(image.x+image.width,image.y);
// rotate the canvas 90 degrees (PI/2 radians)
ctx.rotate(Math.PI/2);
// the canvas is now properly moved and rotated
// so we can just draw the text at [0,0]
ctx.fillText(subtext,0,0);
// restore the context to its untransformed state
ctx.restore();
これは、context.measureText を使用して辺に収まる単語数を計算します。
var end=0;
var subtext="";
while(ctx.measureText(text.split(" ",end+1).join(" ")).width<=length)
{
subtext=text.split(" ",end+1).join(" ");
end++;
}
興味深い拡張機能は、角の丸い長方形の周りにテキストを描画することです。
ここにコードとフィドルがあります： http://jsfiddle.net/m1erickson/U2hE3/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var rect={x:40,y:40,width:150,height:120};
var text="This is some text that wraps on the outside of a rectangle.";
var font="14px Verdana";
drawTextAroundRect(rect,text,7,font);
function drawTextAtAngle(text,length,x,y,radians){
// if text is empty then return
if(text.length==0){return;}
var end=0;
var subtext="";
if(ctx.measureText(text).width<=length){
// all the text fits
subtext=text;
}else{
// calc how many words will fit on this length
while(ctx.measureText(text.split(" ",end+1).join(" ")).width<=length)
{
subtext=text.split(" ",end+1).join(" ");
end++;
}
}
// draw the text at the appropriate angle
ctx.save();
ctx.translate(x,y);
ctx.rotate(radians);
ctx.fillText(subtext,0,0);
ctx.restore();
// return any text that didn't fit for further processing
if(end==text.length){
return("");
}else{
return(text.substr(subtext.length));
}
}
function drawTextAroundRect(rect,text,textPadding,font){
// set the font
ctx.font=font;
// top
text=drawTextAtAngle(text,rect.width,rect.x,rect.y-textPadding,0);
// right
text=drawTextAtAngle(text,rect.height,rect.x+rect.width+textPadding,rect.y,Math.PI/2);
// bottom
text=drawTextAtAngle(text,rect.width,rect.x+rect.width,rect.y+rect.height+textPadding,Math.PI);
// left
text=drawTextAtAngle(text,rect.height,rect.x-textPadding,rect.y+rect.height,Math.PI*1.5);
// draw the rect (just for illustration)
ctx.beginPath();
ctx.rect(rect.x,rect.y,rect.width,rect.height);
ctx.stroke();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=250></canvas>
</body>
</html>
[質問者の説明を受けてワードラップコードを追加]
context.measureText を使用してテキストの幅を取得し、それを使用してテキストを画像の周りに折り返すことができます。
テキスト幅を指定すると、テキストが目的の幅を超えたときに次の行に進むことでワードラップを作成できます。
画像を折り返す場合、2 つの希望する幅があります。テキストが画像にぶつかる可能性がある間は短く、その後は長くなります。
ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/XM5Yp/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var maxWidth = 350;
var lineHeight = 25;
var x = (canvas.width - maxWidth) / 2;
var y = 60;
var text = "'Twas the night before Christmas, when all through the house. Not a creature was stirring, not even a mouse. The stockings were hung by the chimney with care in hopes that St. Nicholas soon would be there.";
ctx.font = '16pt Calibri';
ctx.fillStyle = '#333';
var imgWidth;
var imgHeight;
var img=new Image();
img.onload=function(){
imgWidth=img.width;
imgHeight=img.height;
ctx.drawImage(img,canvas.width-img.width,0)
wrapText(text, x, y, maxWidth, lineHeight);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg";
function wrapText(text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
var maxLineWidth=y>imgHeight+10?maxWidth:maxWidth-imgWidth;
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = ctx.measureText(testLine);
var testWidth = metrics.width;
if(testWidth > maxLineWidth) {
ctx.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
maxLineWidth= y>imgHeight+10?maxWidth:maxWidth-imgWidth;
}
else {
line = testLine;
}
}
ctx.fillText(line, x, y);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=400 height=325></canvas>
</body>
</html>
于 2013-07-04T15:55:12.173 に答える