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

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很容易(和自动换行(在javascript中不太容易(。 PHP有一个简单的方法来做到这一点，我尝试过，但是它在javascript中没有正确换行。 这不是服务器端与客户端的问题，并且一切正常......这是格式问题，主要与 JavaScript 如何处理在 canvas 标签范围内显示文本有关。

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

Answer 1

我已经找到了解决问题的方法。 Difster 通过他与一个例子的链接让我走上了正确的道路......我一直在寻找的是CSS所谓的"分词"的JavaScript功能。

所以我需要的是 Difster 示例链接中的另一项检查，在单词换行中，如果它太长而无法放入矩形，则实际上会破坏单词。 所以现在我需要从测量单词长度切换到测量文本。 W3Schools让我开始测量文本。 然后我尝试构建一个while循环。 我为此挣扎了一下，然后我在代码笔上找到了一个例子......

codepen.io/peterhry/pen/AGIEa

这包括自动换行和分词符。在将它塞进 Difster 的上一个示例中并对其进行了一些调整之后，这里是 JSFIDDLE 可以完成我正在寻找的功能。

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>

感谢大家的投入!!

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