文本 Text

      Text 组件为 gameObject 提供了展示文字的能力，使用了 Text 组件后，gameObject 的宽度会在下一帧设置文字所占区域的宽度给 Transform。

      Demo

      安装

      使用 NPM

      1. npm i @eva/plugin-renderer @eva/plugin-renderer-text

      在浏览器中

      1. <script src=“https://unpkg.com/@eva/plugin-renderer-text@1.2.x/dist/EVA.plugin.renderer.text.min.js“></script>

      使用

      1. import { Game, GameObject } from ‘@eva/eva.js’
      2. import { RendererSystem } from ‘@eva/plugin-renderer’
      3. import { Text, TextSystem } from ‘@eva/plugin-renderer-text’
      5. const game = new Game({
      6.   systems: [
      7.     new RendererSystem({
      8.       canvas: document.querySelector(‘#canvas’),
      9.       width: 750,
      10.       height: 1000
      11.     }),
      12.     new TextSystem()
      13.   ]
      14. })
      16. // 此处还在考虑如何设置默认场景的宽高
      17. game.scene.transform.size = {
      18.   width: 750,
      19.   height: 1000
      20. }
      22. const text = new GameObject(‘text’, {
      23.   position: {
      24.     x: 0,
      25.     y: 0
      26.   },
      27.   origin: {
      28.     x: 0.5,
      29.     y: 0.5
      30.   },
      31.   anchor: {
      32.     x: 0.5,
      33.     y: 0.5
      34.   }
      35. })
      37. text.addComponent(
      38.   new Text({
      39.     text: ‘欢迎使用EVA互动游戏开发体系！’,
      40.     style: {
      41.       fontFamily: ‘Arial’,
      42.       fontSize: 36,
      43.       fontStyle: ‘italic’,
      44.       fontWeight: ‘bold’,
      45.       fill: [‘#b35d9e’, ‘#84c35f’, ‘#ebe44f’], // gradient
      46.       fillGradientType: 1,
      47.       fillGradientStops: [0.1, 0.4],
      48.       stroke: ‘#4a1850’,
      49.       strokeThickness: 5,
      50.       dropShadow: true,
      51.       dropShadowColor: ‘#000000’,
      52.       dropShadowBlur: 4,
      53.       dropShadowAngle: Math.PI / 6,
      54.       dropShadowDistance: 6,
      55.       wordWrap: true,
      56.       wordWrapWidth: 400,
      57.       breakWords: true
      58.     }
      59.   })
      60. )
      62. game.scene.addChild(text)

      参数

      text: string

      显示的文本

      style

      NameTypeDefaultDescription
      alignstring‘left’optional 作用于多行文本(‘left’, ‘center’ or ‘right’), 单行文本不生效
      breakWordsbooleanfalseoptional 是否在词语中间换行
      dropShadowbooleanfalseoptional 设置文字阴影
      dropShadowAlphanumber1optional 文字阴影的透明度
      dropShadowAnglenumberMath.PI/6optional 文字阴影角度
      dropShadowBlurnumber0optional 文字阴影模糊度
      dropShadowColorstring | number‘black’optional 文字阴影颜色   例如 ‘red’, ‘#00FF00’
      dropShadowDistancenumber5optional 文字阴影距离
      fillstring‘black’optional 文字颜色，可以是渐变 ‘red’, ‘#00FF00’。传入一个颜色数组则会展示渐变色 [‘#000000’,’#FFFFFF’]
      fillGradientTypenumber‘LINEAR_VERTICAL’optional 如果文字颜色为渐变，可以设置水平或者垂直渐变, 水平渐变：LINEAR_VERTICAL 垂直渐变：LINEAR_HORIZONTAL
      fillGradientStopsnumber[]optional 如果文字颜色为渐变，可以设置各个颜色的定位点，如果不设置是均分的
      fontFamilystring | string[]‘Arial’optional 字体
      fontSizenumber | string26optional 字号(如果是数字的话会被转成像素，可以用字符串：’26px’,’20pt’,’160%’ or ‘1.6em’)
      fontStylestring‘normal’optional 字体样式 (‘normal’, ‘italic’ or ‘oblique’)
      fontVariantstring‘normal’optional 字体变化 (‘normal’ or ‘small-caps’)
      fontWeightstring‘normal’optional 字体加粗 (‘normal’, ‘bold’, ‘bolder’, ‘lighter’ and ‘100’, ‘200’, ‘300’, ‘400’, ‘500’, ‘600’, ‘700’, 800’ or ‘900’)
      leadingnumber0optional 行间距
      letterSpacingnumber0optional 段落前空的距离
      lineHeightnumberoptional 行高
      lineJoinstring‘miter’optional 边角样式类型 values “miter” (creates a sharp corner), “round” (creates a round corner) or “bevel” (creates a squared corner).
      miterLimitnumber10optionallineJoin 为 miter 的时候，使用此属性，可以减少渲染文字的尖锐性
      paddingnumber0optional 有些字体会被裁剪，添加 padding 解决此问题
      strokestring | number‘black’optional 描边 ‘blue’, ‘#FCFF00’
      strokeThicknessnumber0optional 描边厚度
      trimbooleanfalseoptional 去除透明边框
      textBaselinestring‘alphabetic’optional 文字基线
      whiteSpacestring‘pre’optional 设置换行的逻辑, “normal” 正常逻辑换行,”pre”   保留空白符序列，但是正常地进行换行,”pre-line” 合并空白符序列，但是保留换行符. 需要 wordWrap 为 true
      wordWrapbooleanfalseoptional 是否需要换行
      wordWrapWidthnumber100optional 超出改宽度换行

      ,