douzhuiqing1151
douzhuiqing1151
2017-07-15 02:23

我可以在HTML canvas javascript中使用PHP wordwrap吗?

I'm looking for a simple solution to be able to word wrap within a fixed rectangle in my canvas....

I thought this might work, but unless I make the wrap point longer than the text, it causes my canvas to go completely blank.

<canvas id="planner1" width="300" height="300" style="z-index:0;position:absolute;left:10px;top:10px;border:1px solid #000000;background-color:white;"></canvas>

var c1 = document.getElementById("planner1");
var ctx = c1.getContext("2d");

ctx.font = "16px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "left";
ctx.fillText("<?php echo wordwrap("Sample Text", 10, "
", FALSE);?>",80 ,80);

Looking through the PHP manual, I don't see anything that would preclude this, but I know mixing PHP and javascript is fraught with peril.

I get the data used in the canvas from my db and echo it to draw the rectangle. I then would like echo text (easy via javascript) and wordwrap it (less easy in javascript). PHP has an easy way to do this which I tried, however it doesn't word wrap correctly within the javascript. This isn't a server side versus client side issue and that all works properly....this is formatting issue mainly tied to how javascript handles displaying text within the confines of the canvas tags.

Anybody ever try this and/or found a better way?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • dongling5411 dongling5411 4年前

    I've found a solution to my problem. Difster got me headed down the right path with his link to an example...the thing I was looking for was javascript functionality for what CSS calls "word break".

    So what I needed what another check in the example link from Difster, within the word wraps to actually break the word if it is too long to fit in the rectangle. So now I needed to switch from measuring the word length to measuring text. W3Schools got me started measuring the text. Then I tried building a while loop. I struggled a bit with that and then I found an example at code pen...

    codepen.io/peterhry/pen/AGIEa

    This includes both word wrap and word break....after shoe horning this into the previous example from difster and tweaking it a bit, here's the jsfiddle that does what I'm looking for.

    function wrapText (context, text, x, y, maxWidth, lineHeight) {
        
        var words = text.split(' ');
        var line = '';
        var lineCount = 0;
        var test;
        var metrics;
    
        for (var i = 0; i < words.length; i++) {
            test = words[i];
        // add test for length of text
            metrics = context.measureText(test);
            while (metrics.width > maxWidth) {
                test = test.substring(0, test.length - 1);
                metrics = context.measureText(test);
            }
            if (words[i] != test) {
                words.splice(i + 1, 0,  words[i].substr(test.length))
                words[i] = test;
            }  
    
            test = line + words[i] + ' ';  
            metrics = context.measureText(test);
            
            if (metrics.width > maxWidth && i > 0) {
                context.fillText(line, x, y);
                line = words[i] + ' ';
                y += lineHeight;
                lineCount++;
            }
            else {
                line = test;
            }
        }
         context.fillText(line, x, y);
    }
    
    var c1 = document.getElementById("planner1");
    var ctx = c1.getContext("2d");
    
    ctx.font = "16px Arial";
    ctx.fillStyle = "red";
    ctx.textAlign = "left";
    text = 'This is a bunch of really looooooong text';
    
    wrapText (ctx, text, 10, 20, 50, 20);
    <canvas id="planner1" width="300" height="300" style="z-index:0;position:absolute;left:10px;top:10px;border:1px solid #000000;background-color:white;"></canvas>

    Thanks to everyone for your input!!!

    </div>
    
    点赞 评论 复制链接分享
  • dpjr86761 dpjr86761 4年前

    I think as a separator in the php section you sould use

    <canvas id="planner1" width="300" height="300" style="z-index:0;position:absolute;left:10px;top:10px;border:1px solid #000000;background-color:white;"></canvas>
    
    var c1 = document.getElementById("planner1");
    var ctx = c1.getContext("2d");
    
    ctx.font = "16px Arial";
    ctx.fillStyle = "red";
    ctx.textAlign = "left";
    ctx.fillText("<?php echo wordwrap("Sample Text", 10, "<br />
    ", FALSE);?>",80 ,80);
    
    点赞 评论 复制链接分享

相关推荐