跳到主要内容

文本

new Konva.Text(config)

文本构造函数

参数​

名称类型描述
configObject
direction（可选）String默认为 inherit
fontFamily（可选）String默认为 Arial
fontSize（可选）Number单位为像素。默认为 12
fontStyle（可选）String可以是 'normal'、'italic' 或 'bold'、'500'，甚至是 'italic bold'。默认值为 'normal'
fontVariant（可选）String可以是 normal 或 small-caps。默认值为 normal
textDecoration（可选）String可以是 line-through、underline 或空字符串。默认值为空字符串
underlineOffset（可选）String下划线的偏移量。默认根据字体大小计算
textString
align（可选）String可以是 left、center、right 或 justify
verticalAlign（可选）String可以是 top、middle 或 bottom
padding（可选）Number
lineHeight（可选）Number默认为 1
wrap（可选）String可以是 "word"、"char" 或 "none"。默认为 word
ellipsis（可选）Boolean可以是 true 或 false。默认为 false。如果 Konva.Text 配置为 wrap="none" 且 ellipsis=true，则会在末尾添加 "..."
fill（可选）String填充颜色
fillPatternImage（可选）Image填充图案图像
fillPatternX（可选）Number
fillPatternY（可选）Number
fillPatternOffset（可选）Object包含 x 和 y 分量的对象
fillPatternOffsetX（可选）Number
fillPatternOffsetY（可选）Number
fillPatternScale（可选）Object包含 x 和 y 分量的对象
fillPatternScaleX（可选）Number
fillPatternScaleY（可选）Number
fillPatternRotation（可选）Number
fillPatternRepeat（可选）String可以是 "repeat"、"repeat-x"、"repeat-y" 或 "no-repeat"。默认值为 "no-repeat"
fillLinearGradientStartPoint（可选）Object包含 x 和 y 分量的对象
fillLinearGradientStartPointX（可选）Number
fillLinearGradientStartPointY（可选）Number
fillLinearGradientEndPoint（可选）Object包含 x 和 y 分量的对象
fillLinearGradientEndPointX（可选）Number
fillLinearGradientEndPointY（可选）Number
fillLinearGradientColorStops（可选）Array颜色停止点数组
fillRadialGradientStartPoint（可选）Object包含 x 和 y 分量的对象
fillRadialGradientStartPointX（可选）Number
fillRadialGradientStartPointY（可选）Number
fillRadialGradientEndPoint（可选）Object包含 x 和 y 分量的对象
fillRadialGradientEndPointX（可选）Number
fillRadialGradientEndPointY（可选）Number
fillRadialGradientStartRadius（可选）Number
fillRadialGradientEndRadius（可选）Number
fillRadialGradientColorStops（可选）Array颜色停止点数组
fillEnabled（可选）Boolean启用或禁用填充的标志。默认值为 true
fillPriority（可选）String可以是 color、linear-gradient、radial-graident 或 pattern。默认值为 color。fillPriority 属性可以非常方便地在不同填充类型之间切换。例如，如果你想在填充颜色样式和填充图案样式之间切换，只需设置 fill 属性和 fillPattern 属性，然后使用 setFillPriority('color') 以颜色填充渲染图形，或使用 setFillPriority('pattern') 以填充图案配置渲染图形
stroke（可选）String描边颜色
strokeWidth（可选）Number描边宽度
fillAfterStrokeEnabled（可选）Boolean是否在描边之后绘制填充？默认值为 false
hitStrokeWidth（可选）Number命中画布上的描边大小。默认值为 "auto"，等于 strokeWidth
strokeHitEnabled（可选）Boolean启用或禁用描边命中区域的标志。默认值为 true
perfectDrawEnabled（可选）Boolean启用或禁用使用缓冲画布的标志。默认值为 true
shadowForStrokeEnabled（可选）Boolean启用或禁用描边阴影的标志。默认值为 true
strokeScaleEnabled（可选）Boolean启用或禁用描边缩放的标志。默认值为 true
strokeEnabled（可选）Boolean启用或禁用描边的标志。默认值为 true
lineJoin（可选）String可以是 miter、round 或 bevel。默认值为 miter
lineCap（可选）String可以是 butt、round 或 square。默认值为 butt
shadowColor（可选）String
shadowBlur（可选）Number
shadowOffset（可选）Object包含 x 和 y 分量的对象
shadowOffsetX（可选）Number
shadowOffsetY（可选）Number
shadowOpacity（可选）Number阴影不透明度。可以是 0 到 1 之间的任意实数
shadowEnabled（可选）Boolean启用或禁用阴影的标志。默认值为 true
dash（可选）Array
dashEnabled（可选）Boolean启用或禁用 dashArray 的标志。默认值为 true
x（可选）Number
y（可选）Number
width（可选）Number
height（可选）Number
visible（可选）Boolean
listening（可选）Boolean节点是否监听事件
id（可选）String唯一 ID
name（可选）String非唯一名称
opacity（可选）Number确定节点的不透明度。可以是 0 到 1 之间的任意数值
scale（可选）Object设置缩放
scaleX（可选）Number设置 x 轴缩放
scaleY（可选）Number设置 y 轴缩放
rotation（可选）Number以度为单位的旋转角度
offset（可选）Object相对于中心点和旋转点的偏移量
offsetX（可选）Number设置 x 轴偏移量
offsetY（可选）Number设置 y 轴偏移量
draggable（可选）Boolean使节点可拖动。当舞台可拖动时，可以通过拖动舞台的任意部分来拖放整个舞台
dragDistance（可选）Number
dragBoundFunc（可选）function

继承自： Konva.Shape

自有方法​

getTextWidth()​

获取不包含内边距的纯文本宽度

返回值： Number

measureSize(text)​

使用当前文本图形的字体测量字符串。此方法无法处理多行文本

参数：

  • text（String）：要测量的文本

返回值： Object { width , height } of measured text

_shouldHandleEllipsis(currentHeightPx)​

是否处理省略号，有两种情况：1. 当前行是最后一行 2. wrap 为 NONE

参数：

  • currentHeightPx（Number）

返回值： Boolean

width(width)​

获取／设置文本区域的宽度，其中包括内边距

参数：

  • width（Number）

返回值： Number

示例：

// get width
var width = text.width();

// set width
text.width(20);

// set to auto
text.width('auto');
text.width() // will return calculated width, and not "auto"

height(height)​

获取／设置文本区域的高度，该高度会考虑多行文本、行高和内边距

参数：

  • height（Number）

返回值： Number

示例：

// get height
var height = text.height();

// set height
text.height(20);

// set to auto
text.height('auto');
text.height() // will return calculated height, and not "auto"

direction(direction)​

获取／设置方向

参数：

  • direction（String）

返回值： String

示例：

// get direction
var direction = text.direction();

// set direction
text.direction('rtl');

fontFamily(fontFamily)​

获取／设置字体系列

参数：

  • fontFamily（String）

返回值： String

示例：

// get font family
var fontFamily = text.fontFamily();

// set font family
text.fontFamily('Arial');

fontSize(fontSize)​

获取／设置以像素为单位的字体大小

参数：

  • fontSize（Number）

返回值： Number

示例：

// get font size
var fontSize = text.fontSize();

// set font size to 22px
text.fontSize(22);

fontStyle(fontStyle)​

获取／设置字体样式。可以是 'normal'、'italic' 或 'bold'、'500'，甚至是 'italic bold'。默认值为 'normal'

参数：

  • fontStyle（String）

返回值： String

示例：

// get font style
var fontStyle = text.fontStyle();

// set font style
text.fontStyle('bold');

fontVariant(fontVariant)​

获取／设置字体变体。可以是 'normal' 或 'small-caps'。默认值为 'normal'

参数：

  • fontVariant（String）

返回值： String

示例：

// get font variant
var fontVariant = text.fontVariant();

// set font variant
text.fontVariant('small-caps');

padding(padding)​

获取／设置内边距

参数：

  • padding（Number）

返回值： Number

示例：

// get padding
var padding = text.padding();

// set padding to 10 pixels
text.padding(10);

align(align)​

获取／设置文本的水平对齐方式。可以是 'left'、'center'、'right' 或 'justify'

参数：

  • align（String）

返回值： String

示例：

// get text align
var align = text.align();

// center text
text.align('center');

// align text to right
text.align('right');

// justify text

verticalAlign(verticalAlign)​

获取／设置文本的垂直对齐方式。可以是 'top'、'middle'、'bottom'

参数：

  • verticalAlign（String）

返回值： String

示例：

// get text vertical align
var verticalAlign = text.verticalAlign();

// center text
text.verticalAlign('middle');

lineHeight(lineHeight)​

获取／设置行高。默认值为 1

参数：

  • lineHeight（Number）

返回值： Number

示例：

// get line height
var lineHeight = text.lineHeight();

// set the line height
text.lineHeight(2);

wrap(wrap)​

获取／设置换行方式。可以是 "word"、"char" 或 "none"。默认值为 "word"。在 "word" 换行模式下，如果某个单词无法在不换行的情况下放入所需宽度内，该单词仍然可以被换行

参数：

  • wrap（String）

返回值： String

示例：

// get wrap
var wrap = text.wrap();

// set wrap
text.wrap('word');

ellipsis(ellipsis)​

获取／设置省略号。可以是 true 或 false。默认值为 false。如果 ellipses 为 true，当没有足够空间写入字符时，Konva 会在文本末尾添加 "..."。只有在同时限制文本的宽度和高度时才可能实现

参数：

  • ellipsis（Boolean）

返回值： Boolean

示例：

// get ellipsis param, returns true or false
var ellipsis = text.ellipsis();

// set ellipsis
text.ellipsis(true);

letterSpacing(letterSpacing)​

设置字间距属性。默认值为 0

参数：

  • letterSpacing（Number）

text(text)​

获取／设置文本

参数：

  • text（String）

返回值： String

示例：

// get text
var text = text.text();

// set text
text.text('Hello world!');

textDecoration(textDecoration)​

获取／设置文本的装饰。可用值为 'underline'、'line-through'，或以空格分隔的这些值的组合

参数：

  • textDecoration（String）

返回值： String

示例：

// get text decoration
var textDecoration = text.textDecoration();

// underline text
text.textDecoration('underline');

// strike text
text.textDecoration('line-through');

// underline and strike text
text.textDecoration('underline line-through');

underlineOffset(underlineOffset)​

获取／设置文本下划线装饰的偏移量。下划线的偏移量。默认根据字体大小计算

参数：

  • underlineOffset（Number）

返回值： Number

示例：

// get underline offset
var underlineOffset = text.underlineOffset();

// set underline offset
text.underlineOffset(5);

charRenderFunc(charRenderFunc)​

获取／设置逐字符渲染钩子。回调会在绘制前针对每个字素调用。它可以修改所提供的上下文（例如平移、旋转、更改样式），并应返回 void。注意：逐字符渲染可能会禁用原生字距调整／连字

参数：

  • charRenderFunc（function）

返回值： function

示例：

// apply small x-translation to every second character
text.charRenderFunc(function(props) {
  if (props.index % 2 === 1) {
    props.context.translate(2, 0);
  }
});

继承的方法​

Konva.Text 还拥有其父类的所有方法。下面的每个链接都会打开定义该方法的类中的完整方法文档

来自 Konva.Shape​

来自 Konva.Node​