学习笔记

2023-05-28 13:47| 来源: 网络整理| 查看: 265

TextPath() 1）textpath()

要沿路径构造文本，可以使用textPath（）构造函数：

var textpath = draw.textPath('Some Text along a path', 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100')

注意：如果给定的startOffset不是百分比，则该值表示沿当前用户坐标系中测量的路径的距离。

2）textpath.array()

获取textPath元素的路径数组：

var array = textpath.array() 3）textpath.plot()

更改textpath元素的路径：

text.textPath().plot('M 300 500 C 200 100 300 0 400 100 C 500 200 600 300 700 200') 4）textpath.textPath()

直接引用textPath节点：

var textPath = text.textPath() 5）textpath.track()

直接引用被链接的路径元素：

var path = textpath.track()

注意：SVG.TextPath继承自SVG.Text，因此所有方法都会被继承。

6）SVG.Text事件

文本元素有一个事件。每次调用rebuild（）方法时都会触发：

text.on('rebuild', function() { // whatever you need to do after rebuilding }) Tspan() 1）tspan()

tspan元素仅在文本元素或其他tspan元素中可用。

text.tspan('spannened') 2）tspan.clear()

清除调用的tspan元素的所有内容：

tspan.clear() 3）tspan.dx()/dy()

定义元素的动态x/y值，很像一个具有位置：relative和left/top定义的html元素：

tspan.dx(30) tspan.dy(30) 4）tspan.plain()

只需添加一些纯文本：

tspan.plain('I do not have any expectations.') 5）tspan.length()

获取计算的总文本长度：

tspan.length() 6）tspan.newLine()f

newLine（）是一种方便的方法，用于使用当前的“leading”添加带有dy属性的新行：

var text = draw.text(function(add) { add.tspan('Lorem ipsum dolor sit amet ').newLine() add.tspan('consectetur').fill('#f06') add.tspan('.') add.tspan('Cras sodales imperdiet auctor.').newLine().dx(20) add.tspan('Nunc ultrices lectus at erat').newLine() add.tspan('dictum pharetra elementum ante').newLine() }) 7）tspan.text()

更新tspan的内容。这可以通过传递字符串来完成：

tspan.text('Just a string.')

它将基本上调用plain（）方法：或者通过传递一个块来在调用的tspan中添加更具体的内容：

tspan.text(function(add) { add.plain('Just plain text.') add.tspan('Fancy text wrapped in a tspan.').fill('#f06') add.tspan(function(addMore) { addMore.tspan('And you can doo deeper and deeper...') }) }) 8）tspan.tspan()

添加嵌套的tspan：

tspan.tspan('I am a child of my parent').fill('#f06') 9）tspan.amove()

与text.amove()一样

视频讲解

【本文地址】

学习笔记

学习笔记

今日新闻

推荐新闻