在Canvas中圍繞圖像環繞文字

是否可以在HTML 5 Canvas中的圖像周圍環繞文字？例如使用一些Javascript框架？我看着KineticJS，但找不到有用的東西。在Canvas中圍繞圖像環繞文字

編輯：

看來我的問題還不清楚。我在尋找的東西艾克這樣的：

http://www.monkeydoit.com/images/panda2.gif

來源

2013-07-04 Alexis Dufrenoy

可以環繞用帆布變換的圖像（矩形）文本（翻譯+旋轉）

enter image description here

例如，這是如何旋轉畫布並在圖像的右側繪製文本：

// 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獲得文本和使用的寬度圍繞圖像纏繞文本。

enter image description here

給定文本的寬度，你可以通過前進到當文本超過您所需的寬度下一行建立一個自動換行。

在環繞圖片的情況下，您將獲得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-04 15:55:12 markE

我正在尋找這樣的事情：http://www.monkeydoit.com/images/panda2.gif –

哎喲......誤會！：p - 但是謝謝澄清。我爲原始答案添加了另一個解決方案，以滿足您的需求。順便說一句，爲什麼不只是使用一個div元素，添加段落和浮動權的熊貓圖像？ – markE

在Canvas中圍繞圖像環繞文字

回答

相關問題