Javascript 在Rapha和xEB中的路径上附加文本;L
有人知道如何将文本附加到Raphaël中的路径吗?差不多Javascript 在Rapha和xEB中的路径上附加文本;L,javascript,canvas,svg,raphael,Javascript,Canvas,Svg,Raphael,有人知道如何将文本附加到Raphaël中的路径吗?差不多 我知道jQuerySVG可以做到这一点,但我无法通过使用RaphaëlJS找到一种简单的方法来做到这一点。我想将此文本附加到贝塞尔曲线并将其移动。有两种方法 更简单的方法是使用拉斐尔的方法。这可以将文本转换为路径。每个角色都有自己的路径。然后您可以迭代每个字符,并使用和适当地移动和旋转它 更困难的方法是为和拉斐尔实现路径上的文本 下面是使用.print()和不旋转的方法1的快速粗略的开始: window.onload = function
我知道jQuerySVG可以做到这一点,但我无法通过使用RaphaëlJS找到一种简单的方法来做到这一点。我想将此文本附加到贝塞尔曲线并将其移动。有两种方法
.print()
和不旋转的方法1的快速粗略的开始:
window.onload = function() {
var i, newP,
R = Raphael("canvas",500,400),
// Create our set of letter paths
t = R.print(100, 0, "this is a test", R.getFont("whoa"), 30),
// Create the path to follow
p = R.path("M 50 100 C 100 50 150 0 200 50 C 250 100 300 150 350 100" +
" C 400 50 450 50 450 50").attr("stroke", "none"),
pLen = p.getTotalLength(), // Length of path to follow
tLen = t.length, // Number of characters
oneL = pLen/tLen; // Average length of 1 character
// You can also use .getBBox() for each character instead
// Position each character
for (i = 0; i < tLen; i++) {
// Get x,y of the path to follow
newP = p.getPointAtLength(i * oneL);
// Move the letter
t[i].translate((i * oneL)-newP.x, newP.y);
t[i].attr("fill", Raphael.getColor());
}
};
window.onload=function(){
var i,newP,
R=拉斐尔(“画布”,500400),
//创建我们的字母路径集
t=R.print(100,0,“这是一个测试”,R.getFont(“哇”),30),
//创建要遵循的路径
p=R.路径(“M 50 100 C 100 50 150 0 200 50 C 250 100 300 150 350 100”+
“C 400 50 450 50”)。属性(“冲程”、“无”),
pLen=p.getTotalLength(),//要跟随的路径长度
tLen=t.length,//字符数
oneL=pLen/tLen;//1个字符的平均长度
//也可以对每个字符使用.getBBox()
//定位每个字符
对于(i=0;i
注意:上面的代码非常粗糙,存在一些重要的定位问题,但我认为一般的方法是使用Raphael将文本放到路径上。这是基于(java)的代码,但我认为javascript程序员可以很容易地适应它。它基于拉斐尔2.0。它与上面的解相似,但更好。它使用转换字符串绝对定位和旋转每个字母,以将其放置在路径上:
/* make some text follow a path */
Font anchorFont = paper.getFont("Anchor Steam NF");
Set text1 = paper.print(120,330,"a text that follows a path", anchorFont, 40);
//the path where we want to place the text
Path p = paper.path(
"M 50 100 C 100 50 150 0 200 50" +
" C 250 100 300 150 350 100" +
" C 400 50 450 50 450 50");
p.attr(Attrs.create().stroke("none"));//hide the path
/* for each letter, we add an absolute translation to its
* transformation string and also add an absolute rotation
* to correspond to path angle of derivative. */
for(int i = 0; i<text1.size(); i++) {
Shape letter = text1.item(i);
//get the point of a letter on the path
Point newP = p.getPointAtLength(letter.getBBox().getX());
String newTransformation = letter.getTransform()+
"T"+(newP.getX()-letter.getBBox().getX())+","+
(newP.getY()-letter.getBBox().getY()-letter.getBBox().getHeight());
//also rotate the letter to correspond the path angle of derivative
newTransformation+="R"+
(newP.getAlpha()<360 ? 180+newP.getAlpha() : newP.getAlpha());
letter.setTransform(newTransformation);
}
/*使一些文本跟随路径*/
Font anchorFont=paper.getFont(“锚蒸汽NF”);
设置text1=paper.print(120330,“沿着路径的文本”,anchorFont,40);
//要放置文本的路径
路径p=纸张路径(
“M 50 100 C 100 50 150 0 200 50”+
“C 250 100 300 150 350 100”+
“C 400 50 450 50”);
p、 attr(Attrs.create().stroke(“无”)//隐藏路径
/*对于每个字母,我们都会在其对应的字母中添加一个绝对翻译
*转换字符串,并添加绝对旋转
*对应于导数的路径角*/
for(int i=0;iraphael 2.1 print()函数不再返回一组路径,而是返回一个包含所有字母的路径。因此,这里的所有解决方案对于raphael 2.1(当前版本)都无效。我开发了以下小插件,添加了printLetters()方法对于纸张,它单独打印字母并返回一组,就像旧的print()方法一样。此外,该插件支持将此文本对齐到路径。例如,使用该插件对齐路径上的文本,您只需执行以下操作:
var r = Raphael(0, 0, 500, 500);
var path1 = "M 50 100 C 100 50 150 0 200 50" +
" C 250 100 300 150 350 100" +
" C 400 50 450 50 450 50";
var text1 = r.printLetters(20, 150, "habia una vez una vaca",
r.getFont("my underwood"), 30, null, null, path1).attr({
fill : "red",
stroke : "black"
});
插件代码是:
(function() {
/**
* do the job of putting all letters in a set returned bu printLetters in a path
* @param p - can be a rpahael path obejct or string
*/
var _printOnPath = function(text, paper, p) {
if(typeof(p)=="string")
p = paper.path(p).attr({stroke: "none"});
for ( var i = 0; i < text.length; i++) {
var letter = text[i];
var newP = p.getPointAtLength(letter.getBBox().x);
var newTransformation = letter.transform()+
"T"+(newP.x-letter.getBBox().x)+","+
(newP.y-letter.getBBox().y-letter.getBBox().height);
//also rotate the letter to correspond the path angle of derivative
newTransformation+="R"+
(newP.alpha<360 ? 180+newP.alpha : newP.alpha);
letter.transform(newTransformation);
}
};
/** print letter by letter, and return the set of letters (paths), just like the old raphael print() method did. */
Raphael.fn.printLetters = function(x, y, str, font, size,
letter_spacing, line_height, onpath) {
letter_spacing=letter_spacing||size/1.5;
line_height=line_height||size;
this.setStart();
var x_=x, y_=y;
for ( var i = 0; i < str.length; i++) {
if(str.charAt(i)!='\n') {
var letter = this.print(x_,y_,str.charAt(i),font,size);
x_+=letter_spacing;
}
else {
x_=x;
y_+=line_height;
}
}
var set = this.setFinish();
if(onpath) {
_printOnPath(set, this, onpath);
}
return set;
};
})();
(函数(){
/**
*将所有字母放在一个集合中,并将返回的字母放在一个路径中
*@param p-可以是rpahael路径obejct或字符串
*/
var\u printOnPath=函数(文本、纸张、p){
if(typeof(p)=“字符串”)
p=paper.path(p).attr({stroke:“none”});
对于(var i=0;i (newP.alpha这是这个插件在Raphael 2.1中的一个JSFIDLE演示:如果您想避免使用.print()
,这需要修改字体以成为Cufon字体(这会增加重量,创建通用SVG路径/多边形而不是活动的可选文本,并且可能会违反字体许可证),则有以下几种方法。