J'ai trouvé une petite fonction qui prend une chaîne de textarea
et la place ensuite dans un élément canvas
et qui enveloppe le texte lorsque la ligne devient trop longue. Mais il ne détecte pas les sauts de ligne. Voici ce qu'il fait et ce qu'il devrait faire:
Contribution:
Hello
This is dummy text that could be inside the text area.
It will then get put into the canvas.
Mauvaise sortie:
Hello this is dummy text
that could be inside the
text area. It will then
get put into the canvas.
Qu'est-ce qu'il devrait produire:
Hello
This is dummy text that
could be inside the text
area. It will then get
put into the canvas.
C'est la fonction que j'utilise:
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
Est-il possible de réaliser ce que j'essaie d'obtenir? Ou existe-t-il un moyen de déplacer simplement la zone de texte telle quelle dans le canevas?
Utilisez le suivant:
var enteredText = document.getElementById("textArea").value;
var numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length;
alert('Number of breaks: ' + numberOfLineBreaks);
Maintenant, ce que j'ai fait était de scinder la chaîne first à l'aide de sauts de ligne, puis de la scinder à nouveau comme avant. Remarque: vous pouvez également utiliser jQuery combiné avec regex pour cela:
var splitted = $('#textArea').val().split("\n"); // will split on line breaks
J'espère que ça vous aide!
(Remarque: cette question a déjà été posée une fois ici ).
Si vous devez fractionner une chaîne de votre JSON, le caractère spécial\n est remplacé par \\ n.
Fractionner la chaîne par une nouvelle ligne:
Result.split('\n');
Chaîne divisée reçue en JSON, où le caractère spécial \ n a été remplacé par \\ n pendant JSON.stringify (en javascript) ou json.json_encode (en PHP). Ainsi, si vous avez votre chaîne dans une réponse AJAX, elle a été traitée pour le transport. et si elle n’est pas décodée, le\n sera remplacé par \\ n ** et vous devrez utiliser:
Result.split('\\n');
Notez que les outils de débogage de votre navigateur peuvent ne pas afficher cet aspect comme prévu, mais vous pouvez voir que le fractionnement par \\ n a généré 2 entrées comme j'en ai besoin dans mon cas:
C'est ce que j'avais l'habitude d'imprimer du texte sur une toile. L'entrée ne provient pas d'une textarea
, mais de input
et je ne divise que par l'espace. Certainement pas parfait, mais fonctionne pour mon cas. Il retourne les lignes d'un tableau:
splitTextToLines: function (text) {
var idealSplit = 7,
maxSplit = 20,
lineCounter = 0,
lineIndex = 0,
lines = [""],
ch, i;
for (i = 0; i < text.length; i++) {
ch = text[i];
if ((lineCounter >= idealSplit && ch === " ") || lineCounter >= maxSplit) {
ch = "";
lineCounter = -1;
lineIndex++;
lines.Push("");
}
lines[lineIndex] += ch;
lineCounter++;
}
return lines;
}
Voici le code final I [OP] utilisé. Probablement pas la meilleure pratique, mais cela a fonctionné.
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var breaks = text.split('\n');
var newLines = "";
for(var i = 0; i < breaks.length; i ++){
newLines = newLines + breaks[i] + ' breakLine ';
}
var words = newLines.split(' ');
var line = '';
console.log(words);
for(var n = 0; n < words.length; n++) {
if(words[n] != 'breakLine'){
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}else{
context.fillText(line, x, y);
line = '';
y += lineHeight;
}
}
context.fillText(line, x, y);
}
Fractionner la chaîne en JavaScript
var array = str.match(/[^\r\n]+/g);
OR
var array = str.split(/\r?\n/);
Vous devriez essayer de détecter la première ligne.
Puis le:
if(n == 0){
line = words[n]+"\n";
}
Je ne suis pas sûr, mais peut-être que ça aide.