Est-il possible d'enrouler un texte autour d'une image à l'intérieur d'un canevas HTML 5? Par exemple en utilisant un framework Javascript? J'ai regardé KineticJS, mais je n'ai pas trouvé quelque chose d'utile.Habillage d'un texte autour d'une image dans un canevas
Edit:
Il semble ma question est claire. Je cherche quelque chose lke ceci:
http://www.monkeydoit.com/images/panda2.gif
Vous pouvez envelopper le texte autour d'une image (rectangle) en utilisant des transformations de toile (Traduisez + pivoter)
Par exemple, Voici comment vous faites pivoter la toile et dessinez le texte sur le côté droit de votre image:
// 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();
Ce calcule combien de mots tenir sur un côté à l'aide context.measureText:
var end=0;
var subtext="";
while(ctx.measureText(text.split(" ",end+1).join(" ")).width<=length)
{
subtext=text.split(" ",end+1).join(" ");
end++;
}
Une amélioration intéressante serait de dessiner le texte autour d'un rectangle avec des coins arrondis.
Voici le code et un Fiddle: 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>
[Ajouter plus de code word-wrap interrogateurs clarification donnée]
Vous pouvez utiliser context.measureText pour obtenir la largeur du texte et de l'utilisation que pour enrouler le texte autour d'une image.
largeur du texte affiché, vous pouvez construire un mot-wrap en avançant à la ligne suivante lorsque le texte dépasse votre largeur désirée.
Dans le cas de l'enroulement autour d'une image, vous aurez 2 largeurs souhaitées - plus courtes lorsque le texte risque de se retrouver dans l'image et plus tard après.
Voici le code et Fiddle: 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>
Je suis à la recherche de quelque chose comme ceci: Aïe ... http://www.monkeydoit.com/images/panda2.gif –
malentendu! : p - Mais merci pour la clarification. J'ai ajouté une autre solution à ma réponse originale qui correspond à vos besoins. BTW, pourquoi ne pas simplement utiliser un élément div, ajouter un paragraphe et flotter à droite l'image panda? – markE