Question

我正在寻找一个简单的解决方案，能够在画布中的固定矩形内进行自动换行....

我认为这可能有效，但除非我使换行点长于文本，否则会导致我的画布完全空白。

<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, "\n", FALSE);?>",80 ,80);

通过PHP手册，我没有看到任何可以排除这种情况的内容，但我知道混合PHP和javascript充满了危险。

我从我的数据库中获取画布中使用的数据并回显它以绘制矩形。然后我想回复文本（通过javascript轻松）和wordwrap它（在javascript中不太容易）。 PHP有一种简单的方法可以做到这一点，但是它并没有在javascript中正确地自动换行。这不是服务器端与客户端问题，并且一切正常....这是格式问题，主要与javascript处理如何在canvas标签的范围内显示文本有关。

有人试过这个和/或找到更好的方法吗？

Answer 1

我找到了解决问题的方法。 Difster让我走向正确的道路，带着他的示例链接...我正在寻找的东西是CSS调用的功能和＃34;单词突破＆＃34;。

所以我需要另外检查来自Difster的示例链接，在单词包装内实际打破单词，如果它太长而无法放入矩形中。所以现在我需要从测量单词长度切换到测量文本。 W3Schools让我开始测量文本。然后我尝试构建一个while循环。我有点挣扎，然后我在代码笔上找到了一个例子......

codepen.io/peterhry/pen/AGIEa

这包括自动换行和单词分词....在将鞋子变为上一个示例之后，从difster并稍微调整一下，这里是我正在寻找的jsfiddle。< / p>

＆＃13;

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);

＆＃13;

<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>

＆＃13;

感谢大家的投入!!!

Answer 2

我认为作为php部分的分隔符你可以使用

<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 />\n", FALSE);?>",80 ,80);

我可以在HTML画布javascript

2 个答案: