douzhuiqing1151 2017-07-15 02:23
浏览 58
已采纳

我可以在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 2017-07-17 00:05
    关注

    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题