我非常喜欢Raphael Javascript库,它对于使用javascript处理SVG非常有用.
但是有一个偏移值被添加到我不理解的生成的svg代码中.有谁知道它来自哪里以及如何避免它？
这是我的JS代码:
var paper = Raphael("canvas", 510, 510);
paper.clear();
paper.rect(0, 0, 500, 500, 10).attr({fill: "#fff", stroke: "black"});
生成的SVG代码是
<div id="canvas">
<svg width="510" height="510">
<desc>Created with Raphaël</desc>
<defs/>
<rect x="0.5" y="0.5" width="500" height="500" r="10" rx="10" ry="10" fill="#ffffff" stroke="#000000"/>
</svg>
</div>
为什么rect的x和y属性是0.5而不是0？
更新:似乎使用以下代码舍入值:
var round = function (num) {
return +num + (~~num === num) * .5;
};
有人知道原因吗？
当鼠标点击Raphael JS生成的一些文本时,我正试图找到触发事件的方法.在Firefox中,点击事件完美地运行,在IE 7和8中(我没有测试过早期版本)既没有点击也没有mousedown工作.单击适用于其他raphael对象,例如示例中的矩形.
如何在以下演示中给出的文本上触发事件:
<html>
<head>
<script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="graph"></div>
<script language="javascript">
function setupImage() {
var canvas = Raphael(graph, 200, 200);
var alpha = canvas.text(100, 10, "Two Words");
alpha.attr("font-size", "20px");
var beta = canvas.rect(50, 50, 50, 50);
beta.attr("fill", "#3333cc");
canvas.safari();
var textClickEvent = function(event) {
alert("text clicked");
};
var boxClickEvent = function(event) {
alert("box clicked");
};
$(alpha.node).click(textClickEvent);
$(beta.node).click(boxClickEvent);
}
$(window).load(setupImage);
</script>
</body>
</html>
我的直觉是我可能不得不尝试操纵DOM来包装文本,例如,A元素并在其上绑定.这似乎不是最干净的解决方案,所以我在这里询问是否有人有另一种方法.
javascript jquery internet-explorer javascript-events raphael
一个小前提:我正在节食,我正试图绘制一个减肥图表.
为此,我使用一个小的django应用程序来存储重量读数,并使用gRaphael(http://g.raphaeljs.com/)图表库来绘制报告.你可以在这里看到wip:http://www.totanus.net/weight/
这时我使用'ymd'格式在X轴上打印日期以便正确排序,但我不太满意(实际上我甚至不确定图表是否正确...)而我我想知道是否有更好的方式来呈现日期.
主要问题是:
预先感谢您的任何帮助!
张志贤
我正在使用Rahael.js库.
如果我有一条路:
var mypath = paper.path("M10 10L90 90");
我想实现这样的功能:当鼠标拖动路径线的一侧时,路径线的另一侧保持在原始位置,而拖动的一侧将随鼠标移动.这就像一个拖放功能.怎么实现呢？
我不知道如何使用raphael drag()函数更新路径属性.
var start = function () {
},
move = function (dx, dy) {
//How to update the attribute of one side of the path here
},
up = function () {
};
mypath.drag(move, start, up);
我有以下jQuery:
var paper = Raphael(0, 20, 500, 500);
var robot = paper.image("http://jackdent.co.uk/arrow-right.jpg", 0, 0, 20, 20);
robot.node.setAttribute('id', 'robot');
$('#submit').on('click', function () {
$('#robot').rotate(90);
})
我出于某些原因需要使用分配给它的id访问机器人元素.我想在客户点击按钮时将图像旋转90度.目前我的代码是错误的,我无法弄清楚原因.
任何帮助将非常感谢,提前感谢.
在这里查看一个实例
我有一个带有标记的KML文件,每个标记都有多边形坐标.我想动态更改多边形的填充颜色,具体取决于我从json文件中读取的值.我的理解是Google会缓存kml文件,因此您无法轻易更改多边形的填充颜色.
所以我试图将我的kml多边形转换为svg路径,以便我可以使用Raphael将我的多边形放在我的Google地图上.然后我可以用javascript更改填充颜色.
但是如何将多边形坐标转换为svg路径,有人知道吗？
一组样本坐标将是:
<Polygon><outerBoundaryIs><LinearRing><coordinates>-80.098181,40.42127 -80.096479,40.421262 -80.096464,40.421409 -80.096448,40.421551 -80.096444,40.421583 -80.096434,40.421666 -80.096406,40.421931 -80.096389,40.422087 -80.096353,40.422423 -80.09583,40.426101 -80.095525,40.428234 -80.095315,40.429714 -80.095276,40.429989 -80.092585,40.428593 -80.092273,40.428431 -80.09069,40.430519 -80.090384,40.430924 -80.08989,40.430618 -80.089699,40.4305 -80.089499,40.430359 -80.088738,40.429886 -80.088418,40.429688 -80.088254,40.429585 -80.087931,40.429384 -80.087086,40.428859 -80.086867,40.428722 -80.086658,40.428592 -80.086493,40.42849 -80.08617,40.428282 -80.086177,40.428265 -80.08621,40.428188 -80.0864,40.427742 -80.086397,40.42749 -80.086394,40.427125 -80.08631,40.426427 -80.086335,40.425887 -80.086235,40.425409 -80.085776,40.425327 -80.085442,40.42527 -80.084993,40.424585 -80.085076,40.42448 -80.085542,40.423842 -80.085679,40.423125 -80.085659,40.423011 -80.085626,40.422827 -80.085191,40.421758 -80.08467,40.420859 -80.084258,40.420336 -80.083828,40.4201 -80.083078,40.420005 -80.082504,40.420072 -80.081444,40.420196 -80.080888,40.420181 -80.080775,40.420178 -80.080604,40.420173 -80.080122,40.420161 -80.079753,40.420151 -80.07947,40.420144 -80.079287,40.420139 -80.078239,40.420296 -80.077661,40.420418 -80.076213,40.420726 -80.075673,40.420766 -80.075298,40.420719 -80.075127,40.420625 -80.074909,40.420307 -80.075028,40.419779 -80.07539,40.419028 -80.07583,40.41836 -80.076065,40.418108 -80.076528,40.417616 -80.077217,40.417124 -80.077503,40.417002 -80.077725,40.416907 -80.078391,40.416622 -80.078614,40.416528 …我想要一个元素只在悬停时出现在前面,然后返回到鼠标关闭之前的z-index.拉斐尔有没有办法让我这样做; 在调用toFront之前保存元素的当前z-index,然后再次应用它？
raphael.js的新手,我正在寻找关于如何在轨道上围绕太阳移动行星的解释.我试图创建一条路径,并围绕它围绕圆圈的运动制作动画.
感谢您指出正确的方向!
使用以下插件和代码,您可以将文本包装在以下位置\n:
Snap.plugin(function (Snap, Element, Paper, glob) {
Paper.prototype.multitext = function (x, y, txt) {
txt = txt.split("\n");
var t = this.text(x, y, txt);
t.selectAll("tspan:nth-child(n+2)").attr({
dy: "1.2em",
x: x
});
return t;
};
});
//你可以像这样使用它:
var ttt = paper.multitext(100, 100, "Sample\nmultiline\ntext").attr({
font: "18px Arial",
textAnchor: "middle"
});
它产生:http: //jsbin.com/panaxujuta/1/edit？html,output
Smaple
multiline
text
如何使用rect Width作为长短语或段落行的限制来自动执行此过程？我不想在svg中使用foreignobject以便稍后我需要文本.请原生svg解决方案.任何想法将不胜感激.
编辑:而不是拆分\n我们如何分割文本行的某个宽度？
Edit2:我有这个代码使用上面的插件,为什么这不起作用？:
var phrase = "Etiam porttitor risus in ex blandit sodales. Ut cursus mi augue, sit amet interdum …我有一个小的RaphaelJS脚本,它使用Text在屏幕上显示文本.此文本是动态的 - 它经常更新.
我想设置文本的字体.我已经下载了我喜欢的Cufon .js字体文件,并使用下面的代码来设置字体.除了,它不起作用!
...整个字体都没有变化.设置颜色,以及字体大小,位置等.但不是实际的字体本身.
如果我打印文本而不是使用文本字体工作正常.但我不想这样做 - 它需要是动态的.
var text = paper.text(200,245,"--:--");
var paper = new Raphael( 0, 0, 600, 400) ;
var font = paper.getFont("FontName");
text.attr({ "font-size": 25, font: "FontName", "font-weight": 400, fill: lcdDisplayColour });
function updateText()
{
/**
.
.
.
**/
var newText = "some new text";
text.attr({text: ""+dClockText});
}
在HTML文件中我有:
<script src="raphael-min.js" type="text/javascript"></script>
<script src="nameOfCufonFile.js" type="text/javascript"></script>
<script src="myScript.js" type="text/javascript"></script>
我也尝试过:
text.attr({ "font-size": 25, font: font, ...
text.attr({ "font-size": 25, "font-family": "FontName", …