=======================
=======================
=======================
출처: https://code.i-harness.com/ko/q/4cb491
어쩌면이 파티에 조금 늦을 지 모르지만 캔버스에 텍스트를 배치하는 데 필요한 다음 자습서를 찾았습니다.
http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
그로부터 여러 줄이 작동한다고 생각할 수있었습니다. (미안 해요. 라미레즈, 네가 나를 위해 일하지 않았다!). 캔버스에 텍스트를 줄 바꿈하는 내 전체 코드는 다음과 같습니다.
<script type="text/javascript"> // http: //www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/ function wrapText(context, text, x, y, maxWidth, lineHeight) { var cars = text.split("\n"); for (var ii = 0; ii < cars.length; ii++) { var line = ""; var words = cars[ii].split(" "); 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) { context.fillText(line, x, y); line = words[n] + " "; y += lineHeight; } else { line = testLine; } } context.fillText(line, x, y); y += lineHeight; } } function DrawText() { var canvas = document.getElementById("c"); var context = canvas.getContext("2d"); context.clearRect(0, 0, 500, 600); var maxWidth = 400; var lineHeight = 60; var x = 20; // (canvas.width - maxWidth) / 2; var y = 58; var text = document.getElementById("text").value.toUpperCase(); context.fillStyle = "rgba(255, 0, 0, 1)"; context.fillRect(0, 0, 600, 500); context.font = "51px 'LeagueGothicRegular'"; context.fillStyle = "#333"; wrapText(context, text, x, y, maxWidth, lineHeight); } $(document).ready(function () { $("#text").keyup(function () { DrawText(); }); }); </script>
여기서 c
는 내 캔버스의 ID이고 text
는 내 텍스트 상자의 ID입니다.
아마도 비표준 글꼴을 사용하고있는 것을 볼 수 있습니다. 일부 텍스트 앞에있는 글꼴을 캔버스 조작에 사용하는 한 @ font-face를 사용할 수 있습니다. 그렇지 않으면 캔버스가 글꼴을 선택하지 않습니다.
희망이 사람을 도움이됩니다.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
여기에 이미 나와있는 wrapText () 함수를 수정하여 내 솔루션입니다. 캔버스 컨텍스트에서 함수를 호출 할 수 있도록 JavaScript의 프로토 타이핑 기능을 사용하고 있습니다.
CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) { var lines = text.split("\n"); for (var i = 0; i < lines.length; i++) { var words = lines[i].split(' '); var line = ''; for (var n = 0; n < words.length; n++) { var testLine = line + words[n] + ' '; var metrics = this.measureText(testLine); var testWidth = metrics.width; if (testWidth > maxWidth && n > 0) { this.fillText(line, x, y); line = words[n] + ' '; y += lineHeight; } else { line = testLine; } } this.fillText(line, x, y); y += lineHeight; } }
기본 사용법 :
var myCanvas = document.getElementById("myCanvas"); var ctx = myCanvas.getContext("2d"); ctx.fillStyle = "black"; ctx.font = "12px sans-serif"; ctx.textBaseline = "top"; ctx.wrapText("Hello\nWorld!",20,20,160,16);
여기에 내가 데모를 함께 넣어 : http://jsfiddle.net/7RdbL/
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@Gaby Petrioli 가 제공하는 단어 줄 바꿈 (공백으로 분리)에 대한 코드는 매우 유용합니다. 줄 바꿈 문자를 지원하도록 코드를 확장했습니다. \n
. 또한 경계 상자의 크기를 갖는 것이 종종 유용하므로 multiMeasureText()
는 너비와 높이를 모두 반환합니다.
http://jsfiddle.net/jeffchan/WHgaY/76/ 에서 코드를 볼 수 있습니다.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
CanvasRenderingContext2D를 확장하여 mlFillText와 mlStrokeText의 두 함수를 추가했습니다.
GitHub 에서 마지막 버전을 찾을 수 있습니다.
이 기능을 사용하면 상자에 밀틴 텍스트를 채우거나 칠할 수 있습니다. 텍스트를 세로 및 가로로 정렬 할 수 있습니다. (계정에 \ n을 넣고 텍스트를 정당화 할 수도 있습니다.)
프로토 타입은 다음과 같습니다.
함수 mlFillText (텍스트, x, y, w, h, vAlign, hAlign, lineheight); 함수 mlStrokeText (텍스트, x, y, w, h, vAlign, hAlign, lineheight);
여기서 vAlign은 "top", "center"또는 "button"일 수 있습니다. hAlign은 "left", "center", "right"또는 "justify"일 수 있습니다.
여기서 lib를 테스트 할 수 있습니다 : http://jsfiddle.net/4WRZj/1/
다음은 라이브러리 코드입니다.
// Library: mltext.js // Desciption: Extends the CanvasRenderingContext2D that adds two functions: mlFillText and mlStrokeText. // // The prototypes are: // // function mlFillText(text,x,y,w,h,vAlign,hAlign,lineheight); // function mlStrokeText(text,x,y,w,h,vAlign,hAlign,lineheight); // // Where vAlign can be: "top", "center" or "button" // And hAlign can be: "left", "center", "right" or "justify" // Author: Jordi Baylina. (baylina at uniclau.com) // License: GPL // Date: 2013-02-21 function mlFunction(text, x, y, w, h, hAlign, vAlign, lineheight, fn) { text = text.replace(/[\n]/g, " \n "); text = text.replace(/\r/g, ""); var words = text.split(/[ ]+/); var sp = this.measureText(' ').width; var lines = []; var actualline = 0; var actualsize = 0; var wo; lines[actualline] = {}; lines[actualline].Words = []; i = 0; while (i < words.length) { var word = words[i]; if (word == "\n") { lines[actualline].EndParagraph = true; actualline++; actualsize = 0; lines[actualline] = {}; lines[actualline].Words = []; i++; } else { wo = {}; wo.l = this.measureText(word).width; if (actualsize === 0) { while (wo.l > w) { word = word.slice(0, word.length - 1); wo.l = this.measureText(word).width; } if (word === "") return; // I can't fill a single character wo.word = word; lines[actualline].Words.push(wo); actualsize = wo.l; if (word != words[i]) { words[i] = words[i].slice(word.length, words[i].length); } else { i++; } } else { if (actualsize + sp + wo.l > w) { lines[actualline].EndParagraph = false; actualline++; actualsize = 0; lines[actualline] = {}; lines[actualline].Words = []; } else { wo.word = word; lines[actualline].Words.push(wo); actualsize += sp + wo.l; i++; } } } } if (actualsize === 0) lines[actualline].pop(); lines[actualline].EndParagraph = true; var totalH = lineheight * lines.length; while (totalH > h) { lines.pop(); totalH = lineheight * lines.length; } var yy; if (vAlign == "bottom") { yy = y + h - totalH + lineheight; } else if (vAlign == "center") { yy = y + h / 2 - totalH / 2 + lineheight; } else { yy = y + lineheight; } var oldTextAlign = this.textAlign; this.textAlign = "left"; for (var li in lines) { var totallen = 0; var xx, usp; for (wo in lines[li].Words) totallen += lines[li].Words[wo].l; if (hAlign == "center") { usp = sp; xx = x + w / 2 - (totallen + sp * (lines[li].Words.length - 1)) / 2; } else if ((hAlign == "justify") && (!lines[li].EndParagraph)) { xx = x; usp = (w - totallen) / (lines[li].Words.length - 1); } else if (hAlign == "right") { xx = x + w - (totallen + sp * (lines[li].Words.length - 1)); usp = sp; } else { // left xx = x; usp = sp; } for (wo in lines[li].Words) { if (fn == "fillText") { this.fillText(lines[li].Words[wo].word, xx, yy); } else if (fn == "strokeText") { this.strokeText(lines[li].Words[wo].word, xx, yy); } xx += lines[li].Words[wo].l + usp; } yy += lineheight; } this.textAlign = oldTextAlign; } (function mlInit() { CanvasRenderingContext2D.prototype.mlFunction = mlFunction; CanvasRenderingContext2D.prototype.mlFillText = function (text, x, y, w, h, vAlign, hAlign, lineheight) { this.mlFunction(text, x, y, w, h, hAlign, vAlign, lineheight, "fillText"); }; CanvasRenderingContext2D.prototype.mlStrokeText = function (text, x, y, w, h, vAlign, hAlign, lineheight) { this.mlFunction(text, x, y, w, h, hAlign, vAlign, lineheight, "strokeText"); }; })();
다음은 사용 예입니다.
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var T = "This is a very long line line with a CR at the end.\n This is the second line.\nAnd this is the last line."; var lh = 12; ctx.lineWidth = 1; ctx.mlFillText(T, 10, 10, 100, 100, 'top', 'left', lh); ctx.strokeRect(10, 10, 100, 100); ctx.mlFillText(T, 110, 10, 100, 100, 'top', 'center', lh); ctx.strokeRect(110, 10, 100, 100); ctx.mlFillText(T, 210, 10, 100, 100, 'top', 'right', lh); ctx.strokeRect(210, 10, 100, 100); ctx.mlFillText(T, 310, 10, 100, 100, 'top', 'justify', lh); ctx.strokeRect(310, 10, 100, 100); ctx.mlFillText(T, 10, 110, 100, 100, 'center', 'left', lh); ctx.strokeRect(10, 110, 100, 100); ctx.mlFillText(T, 110, 110, 100, 100, 'center', 'center', lh); ctx.strokeRect(110, 110, 100, 100); ctx.mlFillText(T, 210, 110, 100, 100, 'center', 'right', lh); ctx.strokeRect(210, 110, 100, 100); ctx.mlFillText(T, 310, 110, 100, 100, 'center', 'justify', lh); ctx.strokeRect(310, 110, 100, 100); ctx.mlFillText(T, 10, 210, 100, 100, 'bottom', 'left', lh); ctx.strokeRect(10, 210, 100, 100); ctx.mlFillText(T, 110, 210, 100, 100, 'bottom', 'center', lh); ctx.strokeRect(110, 210, 100, 100); ctx.mlFillText(T, 210, 210, 100, 100, 'bottom', 'right', lh); ctx.strokeRect(210, 210, 100, 100); ctx.mlFillText(T, 310, 210, 100, 100, 'bottom', 'justify', lh); ctx.strokeRect(310, 210, 100, 100); ctx.mlStrokeText("Yo can also use mlStrokeText!", 0 , 310 , 420, 30, 'center', 'center', lh);
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
다음은 context.textBaseline = 'middle'
하여 세로로 가운데에 정렬 된 텍스트 도 지원하는 Colin의 wrapText()
버전입니다.
var wrapText = function (context, text, x, y, maxWidth, lineHeight) { var paragraphs = text.split("\n"); var textLines = []; // Loop through paragraphs for (var p = 0; p < paragraphs.length; p++) { var line = ""; var words = paragraphs[p].split(" "); // Loop through words for (var w = 0; w < words.length; w++) { var testLine = line + words[w] + " "; var metrics = context.measureText(testLine); var testWidth = metrics.width; // Make a line break if line is too long if (testWidth > maxWidth) { textLines.push(line.trim()); line = words[w] + " "; } else { line = testLine; } } textLines.push(line.trim()); } // Move text up if centered vertically if (context.textBaseline === 'middle') y = y - ((textLines.length-1) * lineHeight) / 2; // Render text on canvas for (var tl = 0; tl < textLines.length; tl++) { context.fillText(textLines[tl], x, y); y += lineHeight; } };
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
나는이 문제가 똑같은 문제로 인해서 일어났다. 가변 글꼴 크기로 작업하고 있으므로이 점을 고려해야합니다.
var texts=($(this).find('.noteContent').html()).split("<br>"); for (var k in texts) { ctx.fillText(texts[k], left, (top+((parseInt(ctx.font)+2)*k))); }
여기서 noteContent는 사용자가 편집 한 contenteditable div이고 (이것은 jQuery의 각 함수에 중첩되어 있음) ctx.font는 "14px Arial"입니다 (픽셀 크기가 먼저 나타남)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
문제에 대한 내 ES5 솔루션 :
var wrap_text = (ctx, text, x, y, lineHeight, maxWidth, textAlign) => { if(!textAlign) textAlign = 'center' ctx.textAlign = textAlign var words = text.split(' ') var lines = [] var sliceFrom = 0 for(var i = 0; i < words.length; i++) { var chunk = words.slice(sliceFrom, i).join(' ') var last = i === words.length - 1 var bigger = ctx.measureText(chunk).width > maxWidth if(bigger) { lines.push(words.slice(sliceFrom, i).join(' ')) sliceFrom = i } if(last) { lines.push(words.slice(sliceFrom, words.length).join(' ')) sliceFrom = i } } var offsetY = 0 var offsetX = 0 if(textAlign === 'center') offsetX = maxWidth / 2 for(var i = 0; i < lines.length; i++) { ctx.fillText(lines[i], x + offsetX, y + offsetY) offsetY = offsetY + lineHeight } }
이 문제에 대한 자세한 내용은 내 블로그에 있습니다.
=======================
=======================
=======================
'WEB > JavaScript' 카테고리의 다른 글
[JavaScript] 자바스크립트 폰트(FontFamily) 로드 확인 관련 (0) | 2018.05.28 |
---|---|
[JavaScript] Html5, Canvas 폰트URL. 외부폰트 로드 관련. (0) | 2018.05.14 |
[JavaScript] 자바스크립트를 동적으로 로딩하기, 자바스크립트로 html에 코드 넣기 관련 (0) | 2018.04.13 |
[JavaScript] js파일에 다른 js파일 include 하기 관련 How to include js file in another js file? [duplicate] Ask (0) | 2018.04.11 |
[JavaScript] 자바스크립트 ur,text 복사 클립보드, 주소복사 버튼 또는 링크 만들기 -익스,파폭,크롬 (0) | 2018.03.27 |
댓글 영역