Handle properly text area & scrolling text(제대로 텍스트 영역 및 스크롤 텍스트를 처리)

Handle properly text area & scrolling text
(제대로 텍스트 영역 및 스크롤 텍스트를 처리)

When text content is added, and exceed the text area dimension, wordwrap may not be enough to handle your entire content.
(텍스트 콘텐츠가 추가되고 텍스트 영역 차원을 초과하면 단어 랩으로 전체 콘텐츠를 처리하기에 충분하지 않을 수 있습니다.)
The API parameter used in Laya.display.text:
(Laya.display.text에 사용 된 API 매개 변수 :)
1
hidden: Do not show characters beyond the text field.
visible: do not make any cuts.
scroll: does not display character pixels outside the text field, and supports the scroll interface.
(scroll : 텍스트 필드 외부의 문자 픽셀을 표시하지 않고 스크롤 인터페이스를 지원합니다.)
  1. //初始化引擎,不支持WebGL时自动切换到Canvas(WebGL이 지원되지 않는 경우 엔진을 초기화하고 Canvas로 자동 전환합니다.)
  2. Laya.init(500,400,Laya.WebGL);
  3. setup();
  4. function setup(){
  5. var t1 = createText();
  6. //设置不进行任何裁剪(클리핑없이 설정)
  7. t1.overflow = Laya.Text.VISIBLE;
  8. t1.pos(10,10);
  9. var t2 = this.createText();
  10. //设置不显示文本区域外的字符像素(텍스트 영역 밖의 문자 픽셀을 표시하지 않도록 설정)
  11. t2.overflow = Laya.Text.SCROLL;
  12. t2.pos(10,110);
  13. var t3 = this.createText();
  14. //设置不显示超出文本域的字符(텍스트 필드 이외의 문자를 표시하지 않도록 설정)
  15. t3.overflow = Laya.Text.HIDDEN;
  16. t3.pos(10,210);
  17. }
  18. function createText(){
  19. var txt = new Laya.Text();
  20. txt.text = "Layabox는 AS / JS / TS 개발자를위한 HTML5 개발 기술 솔루션을 제공하는 HTML5 엔진 기술 제공 업체이자 탁월한 게임 퍼블리셔입니다.\n" +
  21. "Layabox는 AS / JS / TS 개발자를위한 HTML5 개발 기술 솔루션을 제공하는 HTML5 엔진 기술 제공 업체이자 탁월한 게임 퍼블리셔입니다.\n" +
  22. "Layabox는 AS / JS / TS 개발자를위한 HTML5 개발 기술 솔루션을 제공하는 HTML5 엔진 기술 제공 업체이자 탁월한 게임 퍼블리셔입니다.";
  23. txt.borderColor = "#ffff00";
  24. //设置宽高以后的自动裁剪会按照这个区域裁剪(너비와 높이를 설정 한 후 자동 자르기가이 영역에 따라 잘립니다.)
  25. txt.size(300,50);
  26. txt.fontSize = 20;
  27. txt.color = "#ffffff";
  28. Laya.stage.addChild(txt);
  29. return txt;
  30. }
2
You can see the three methods of different text processing, each treatment has its own advantages and disadvantages, highest performance is hidden.
(당신은 다른 텍스트 처리의 세 가지 방법을 볼 수 있습니다, 각 치료는 자신의 장점과 단점을 가지고, 최고의 성능은 숨겨져 있습니다.)
In addition to the text by setting the overflow area, also can use scrollX and scrollY to scroll text viewport.
(오버플로 영역을 설정하여 텍스트 외에도 scrollX 및 scrollY를 사용하여 텍스트 뷰포트를 스크롤 할 수 있습니다.)
If you want to implement scrolling text, you need to use overflow = Text.SCROLL
(스크롤 텍스트를 구현하려면 overflow = Text.SCROLL을 사용해야합니다.)
  1. //初始化引擎,不支持WebGL时自动切换到Canvas(WebGL이 지원되지 않는 경우 엔진을 초기화하고 Canvas로 자동 전환합니다.)
  2. Laya.init(500,400,Laya.WebGL);
  3. createText();
  4. function createText(){
  5. this.txt = new Laya.Text();
  6. this.txt.overflow = Laya.Text.SCROLL;
  7. this.txt.text = "Layabox는 AS / JS / TS 개발자를위한 HTML5 개발 기술 솔루션을 제공하는 HTML5 엔진 기술 제공 업체이자 탁월한 게임 퍼블리셔입니다.\n" +
  8. "Layabox는 AS / JS / TS 개발자를위한 HTML5 개발 기술 솔루션을 제공하는 HTML5 엔진 기술 제공 업체이자 탁월한 게임 퍼블리셔입니다.\n" +
  9. "Layabox는 AS / JS / TS 개발자를위한 HTML5 개발 기술 솔루션을 제공하는 HTML5 엔진 기술 제공 업체이자 탁월한 게임 퍼블리셔입니다.\n" +
  10. "Layabox는 AS / JS / TS 개발자를위한 HTML5 개발 기술 솔루션을 제공하는 HTML5 엔진 기술 제공 업체이자 탁월한 게임 퍼블리셔입니다.\n" +
  11. "Layabox는 AS / JS / TS 개발자를위한 HTML5 개발 기술 솔루션을 제공하는 HTML5 엔진 기술 제공 업체이자 탁월한 게임 퍼블리셔입니다.\n" +
  12. "Layabox는 AS / JS / TS 개발자를위한 HTML5 개발 기술 솔루션을 제공하는 HTML5 엔진 기술 제공 업체이자 탁월한 게임 퍼블리셔입니다.";
  13. this.txt.size(200,100);
  14. this.txt.x = Laya.stage.width - this.txt.width>>1;
  15. this.txt.y = Laya.stage.height - this.txt.height>>1;
  16. this.txt.borderColor = "#ffff00";
  17. this.txt.fontSize = 20;
  18. this.txt.color = "#ffffff";
  19. Laya.stage.addChild(this.txt);
  20. this.txt.on(Laya.Event.MOUSE_DOWN,this,startScrollText);
  21. }
  22. /*开始滚动文本(스크롤 텍스트 시작)*/
  23. function startScrollText(){
  24. this.prevX = this.txt.mouseX;
  25. this.prevY = this.txt.mouseY;
  26. Laya.stage.on(Laya.Event.MOUSE_MOVE,this,scrollText);
  27. Laya.stage.on(Laya.Event.MOUSE_UP,this,finishScrollText);
  28. }
  29. /* 停止滚动文本(스크롤 텍스트 중지) */
  30. function finishScrollText()
  31. {
  32. Laya.stage.off(Laya.Event.MOUSE_MOVE, this, this.scrollText);
  33. Laya.stage.off(Laya.Event.MOUSE_UP, this, this.finishScrollText);
  34. }
  35. /* 鼠标滚动文本(마우스 스크롤 텍스트) */
  36. function scrollText()
  37. {
  38. var nowX = this.txt.mouseX;
  39. var nowY = this.txt.mouseY;
  40. this.txt.scrollX += this.prevX - nowX;
  41. this.txt.scrollY += this.prevY - nowY;
  42. this.prevX = nowX;
  43. this.prevY = nowY;
  44. }
3
4
In current code sample, Here we display more text content with scrolling text and word wrap.
(현재 코드 샘플에서는 스크롤 텍스트 및 줄 바꿈과 함께 더 많은 텍스트 내용을 표시합니다.)

댓글 없음:

댓글 쓰기