Skip to main content

TextPath

new Konva.TextPath(config)

路径构造函数。

参数​

名称类型描述
configObject
fontFamily (可选)String默认为 Arial
fontSize (可选)Number默认为 12
fontStyle (可选)String可以是 'normal'、'italic'、'bold'、'500'，甚至是 'italic bold'。'normal' 是默认值。
fontVariant (可选)String可以是 normal 或 small-caps。默认值为 normal
textBaseline (可选)String可以是 'top'、'bottom'、'middle'、'alphabetic'、'hanging'。默认值为 middle
textString
dataStringSVG 数据字符串
kerningFuncfunction获取指定字符字距值的 getter
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()​

获取以像素为单位的文本宽度

data(data)​

获取/设置 SVG 路径数据字符串。此方法还会自动将数据字符串解析为数据数组。目前支持的 SVG 数据：M、m、L、l、H、h、V、v、Q、q、T、t、C、c、S、s、A、a、Z、z

参数：

  • data (String)：svg 路径字符串

返回值： String

示例：

// get data
var data = shape.data();

// set data
shape.data('M200,100h100v50z');

fontFamily(fontFamily)​

获取/设置字体系列

参数：

  • fontFamily (String)

返回值： String

示例：

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

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

fontSize(fontSize)​

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

参数：

  • fontSize (Number)

返回值： Number

示例：

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

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

fontStyle(fontStyle)​

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

参数：

  • fontStyle (String)

返回值： String

示例：

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

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

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');

letterSpacing(letterSpacing)​

获取/设置字母间距。默认值为 0。

参数：

  • letterSpacing (Number)

返回值： Number

示例：

// get letter spacing value
var letterSpacing = shape.letterSpacing();

// set the letter spacing value
shape.letterSpacing(2);

textBaseline(textBaseline)​

获取/设置文本基线。默认值为 'middle'。可以是 'top'、'bottom'、'middle'、'alphabetic'、'hanging'

参数：

  • textBaseline (String)

返回值： String

示例：

// get current text baseline
var textBaseline = shape.textBaseline();

// set new text baseline
shape.textBaseline('top');

fontVariant(fontVariant)​

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

参数：

  • fontVariant (String)

返回值： String

示例：

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

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

getText(text)​

获取/设置文本

参数：

  • text (String)

返回值： String

示例：

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

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

textDecoration(textDecoration)​

获取/设置文本装饰。可以是 ''、'underline'、'line-through'，或类似 'underline line-through' 的组合。

参数：

  • textDecoration (String)

返回值： String

示例：

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

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

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

// combine both
shape.textDecoration('underline line-through');

kerningFunc(kerningFunc)​

获取/设置字距函数。

参数：

  • kerningFunc (String)

返回值： String

示例：

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

// center text
text.kerningFunc(function(leftChar, rightChar) {
  return 1;
});

direction(direction)​

获取/设置文本方向。可以是 'inherit'、'ltr' 或 'rtl'。默认值为 'inherit'。设置 'rtl' 会反转沿路径的逐字形布局顺序，因此从右向左阅读时，Hebrew/Arabic 字符串可以正确显示。这是一种受 Canvas TextPath 渲染限制影响的实用修复方案：每个字形仍会独立绘制，因此不支持 Arabic 草书连接，也不支持混合方向文本的完整 Unicode 双向文本重新排序。为了获得最佳效果，请将 direction: 'rtl' 与 align: 'right' 搭配使用，使文本从路径末端开始。

参数：

  • direction (String)

返回值： String

示例：

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

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

继承的方法​

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

来自 Konva.Shape​

来自 Konva.Node​