在 RaphaelJS 中创建复杂的文本节点
Create complex text node in RaphaelJS
如何在RaphaelJS中创建这个结构?
<text style="font-size:12.00014973px" y="812.64771" x="-266.26767" transform="matrix(0.7359908,-0.67699154,0.67699154,0.7359908,0,0)">
<tspan style="fill:#1a171b;font-family:AccidentalPresidency" x="-266.26767" y="812.64771" font-size="20">S</tspan>
<tspan style="fill:#1a171b;font-family:AccidentalPresidency" x="-258.86755" y="812.64771" font-size="20" rotate="-0.89999998">P</tspan>
<tspan style="fill:#1a171b;font-family:AccidentalPresidency" x="-251.36746" y="812.54773" font-size="20" rotate="-1.7" >A</tspan>
</text>
结果将是圆线后面的文本。我尝试这样做,但我失败了:
var text = paper.print(300, 350, "SPA", accidentalFont, 20);
text[1].transform("....");
但是文本[1]是一个DOM节点对象...
提前致谢
paper.print 的结果是一条单一的路径——这似乎与以前版本的 Raphael 不同。
如果您要按照曲线做很多文本,我会使用这样的解决方案:
function PathPrint( canvas, pathString, text, font, options )
{
var path = canvas.path( pathString ).attr( { stroke: 'none', fill: 'none' } );
if ( options.print_attr == undefined )
options.print_attr = { fill: 'black', stroke: 'none' };
var text_length = text.length;
var offset = 0;
for ( var i = 0; i < text_length; i++ )
{
var letter = text[i];
if ( letter == " " || letter == "'n" )
{
offset += options.size ? options.size : 20;
continue;
}
var p = path.getPointAtLength( offset );
var alpha = p.alpha;
if ( alpha >= 360 ) // alpha is misbehaving
alpha -= 180;
var tstr = "R" + Math.floor( alpha + 180 ) + " T" + Math.floor( p.x ) + "," + Math.floor( p.y );
var letterpath = canvas.print( 0, 0, letter, font, options.size ? options.size : 20, options.origin ? options.origin : "middle", options.spacing ? options.spacing : 0 )
.attr( options.print_attr )
.attr( { transform: tstr } );
var b = letterpath.getBBox();
offset += b.width;
}
path.remove();
}
。
var pathString = "M200,300 C200,150 400,150 500,250 C500,450 200,300 400,250 C600,200 750,300 750,400";
PathPrint( canvas, pathString, "I am a big orange geek and proud of it, but I do not allow it to go to my head.", canvas.getFont( "neue" ), {} );
这有效地将字符串中的每个字母创建为自己的路径,然后将其移植到引导路径上的点上,对每个字符的转换字符串应用适当的旋转。
试图解决这个问题,我对 path.getPointAtLength() 返回的 alpha 值感到非常沮丧——它们似乎按照我不完全理解的标准行事 =( 但这种方法可能值得一试。
相关文章:
- Javascript,将文本添加到具有现有文本节点的元素中
- 拆分文本节点
- 使用TreeWalker检索非Javascript文本节点
- jquery在元素中查找文本节点,并使用标记进行连接和包装
- JavaScript 文本节点属性
- 获取文本节点的宽度
- 如何将由
分隔的文本节点与它们自己的标记包装起来
- 如何返回jQuery对象中的文本节点
- 包装和打开jquery后合并文本节点
- 有没有一种方法可以在javascript中为文本节点添加属性
- 使用文本节点打印段落
- 计算文本节点中的字母数
- 正则表达式:仅在标记中匹配文本节点
- "“错误”;导致故障的文本节点
- 正在创建文本节点
- jQuery,如何测试一个变量是一个文本节点,不包含任何标记
- 使用 casperjs 抓取文本节点的最快方法
- 如何在文本节点中保留空格
- 如何获取文档片段中的所有文本节点
- 选择“相邻同级”而不干预文本节点