Text 组件

事件

Invalidate: 当文本改变时

默认情况下,文本的样式为 "10px sans-serif".

注意:一个具有文本组件的实体只能是文本！如果要在图像中写入文本，则需要文本的一个实体和图像的另一个实体。写文字在图像的技巧：（1）使用z-index（来自2D组件）确保文本在图像的顶部，而不是其他的方式；（2）使用 .attach()（来自2D组件）附着文本到图像使他们将一起移动或转动。

注意: 对于 DOM (不包括 canvas) 文本实体, 各种字体的设置（例如 text-decoration）可以使用 .css() (见 DOM 组件)设置. 但不能设置被.textFont(), .textColor(), 或 .textAlign() 控制的属性 -- 设置将会被忽略。

注意:如果你使用高于标准字符的canvas文本，一部分符号可能会被裁剪。

Back to top

.dynamicTextGeneration()

public this .dynamicTextGeneration(bool dynamicTextOn[, string textUpdateEvent])

dynamicTextOn: 一个标志，指示是否应打开或关闭动态文本。

textUpdateEvent: 文本更新时触发的事件名称。默认为“EnterFrame”。（如果dynamicTextOn为false，这个参数没作用）

打开 (或关闭) 实体的动态文本生成。动态文本生成将会打开，如果你调用.text() 方法时传递了文本生成函数，文本将会在每一帧都更新。

如果提供了 textUpdateEvent 文本生成将绑定到该事件，替换掉 "EnterFrame".

注意:当实体附着在Canvas层时，动态生成文本可能导致性能问题。

例子

Crafty.e("2D, DOM, Text, Motion").attr({ x: 100, y: 100, vx: 10 })
    .text(function () { return "My position is " + this._x })
    .dynamicTextGeneration(true)

The above example will update the text with the entities position as it changes.

Back to top

.text()

public this .text(String text)

text: 要插入到DOM或Canvas元素的文本

public this .text(Function textGenerator)

textGenerator: 返回字符串的函数。它将在实体的上下文中立即调用，其结果为用作显示的文本。

这个方法将会更新实体内部的文本。

如果需要引用实体本身的属性，你应该传递函数而不是字符串。

如果动态文本是打开的，那么函数将会在需要的时候从新执行。

参见

.dynamicTextGeneration

例子

Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 }).text("Look at me!!");

Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 })
    .text(function () { return "My position is " + this._x });

Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text("Look at me!!");

Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 })
    .text(function () { return "My position is " + this._x });

Back to top

.textAlign()

public this .textAlign(String alignment)

alignment: 文本的对齐方式

改变文本的对其方式。可用的值有 'start', 'end, 'left', 'center', 或 'right'.

Back to top

.textColor()

public this .textColor(String color)

color: 颜色的名字, hex, rgb 或 rgba

修改文本的颜色。你可以使用 HEX, rgb and rgba 颜色值。

如果你想要文字透明，你应该使用rgba,它可以定义alpha通道。

例子

Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 }).text("Look at me!!")
  .textColor('#FF0000');

Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text('Look at me!!')
  .textColor('rgba(0, 255, 0, 0.5)');

Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text('Look at me!!')
  .textColor('white');

参见

Crafty.assignColor

Back to top

.textFont()

事件

Invalidate

public this .textFont(String key, * value)

key: 实体要修改的属性

value: 要设置的属性值

public this .textFont(Object map)

map: 一个键是要修改的属性，值是要修改的属性值的对象。

此方法用来设置文本实体的字体属性。传递的值可以是: type, weight, size, family, lineHeight, 及其变量。

当使用canvas绘制时，lineHeight及其变量将会被忽略。

例子

Crafty.e("2D, DOM, Text").textFont({ type: 'italic', family: 'Arial' });
Crafty.e("2D, Canvas, Text").textFont({ size: '20px', weight: 'bold' });

Crafty.e("2D, Canvas, Text").textFont("type", "italic");
Crafty.e("2D, Canvas, Text").textFont("type"); // italic

Back to top

.unselectable()

事件

Invalidate

public this .unselectable()

此方法设置文本不能被拖动选择（高亮显示）。（Canvas 文本永远不能高亮显示，所以这只使用于DOM文本）通过修改css属性“user-select”及其变量来工作。

同样,这将设置鼠标的悬停形状为"default"(箭头),不是"text"(I字型)。

例子

Crafty.e("2D, DOM, Text").text('This text cannot be highlighted!').unselectable();