제목의 단어 수는 동적이며 최대 2줄까지 표시할 수 있는 초대장 페이지를 생성해야 합니다. 2줄을 초과하는 경우 내용의 두 번째 줄 끝에 줄임표가 추가됩니다. 제품 소녀의 성격에 따라 앞으로 4줄의 설정이 변경될 가능성이 높기 때문에 여기에 하드 코딩하면 안 됩니다. 그래서 실제로 며칠 전에 요청을 드린 적이 있습니다. 최대 4줄까지 표시되도록 변경하고 나머지는 동일하게 유지합니다. 제품 소녀가 너무 어립니다 :)!
더 이상 고민할 필요 없이 여기에 자랑할 코드가 있습니다! 코드를 로드하기 전에 전달해야 하는 매개변수를 살펴보세요! !
그림과 텍스트가 포함된 매개변수 설명, 참을성 없는 PS 기술과 디자인을 용서해주세요
// 텍스트 자동 줄 바꿈 기능 textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) { var drawTxt = ''; // 현재 그려진 내용 var drawLine = 1 // 그리기를 시작할 줄 var drawIndex; = 0; // 현재 그리기 내용의 인덱스 // 내용을 한 줄에 그릴 수 있는지 여부를 결정합니다. if(ctx.measureText(content).width <= lineMaxWidth) { ctx.fillText(content.substring(drawIndex, i), drawX, drawY) } else { for (var i = 0; i <= content.length; i++) { drawTxt += content[i]; (ctx.measureText(drawTxt).width > lineMaxWidth) { if (drawLine === lineNum) { // 마지막 라인에 줄임표 추가 ctx.fillText(content.substring(drawIndex, i) + '...', drawX, drawY) } else { // 마지막 라인이 아닌 경우 ctx.fillText( content.substring(drawIndex, i + 1), drawX, drawY); drawIndex = i + 1; // 다음 줄의 첫 번째 단어를 그리는 데 사용되는 현재 줄의 마지막 문자열의 다음 idnex를 기록합니다. += 1; // 줄 수 + 1 drawY += lineHeight; // 그려진 내용의 y 좌표에 따라 줄 높이가 늘어납니다. drawTxt = '' // 그려진 내용을 재설정합니다. 뜻밖의 발견텍스트를 그리는 과정에서 텍스트 그리기의 y 좌표는 텍스트의 상단을 기준으로 해야 한다는 것을 알았습니다. 그림은 말보다 더 가치가 있습니다. 위의 그림!
브라우저 환경: chrome 71.0.3578.98(공식 버전)(64비트)
글꼴 크기는 40px입니다.
그려진 y 좌표가 0일 때 텍스트가 왼쪽 상단에서 약간만 새어 나오는 것을 볼 수 있습니다.y좌표를 40으로 그리면 텍스트가 완전히 표시되는 것을 볼 수 있습니다.
추신이것은 상대적으로 인기가 없는 코드 효과이지만 도움이 필요한 친구들에게 도움이 되기를 바랍니다. 또한 모든 사람들이 VeVb Wulin Network를 지원하기를 바랍니다.