我必须清除并重绘一个raphael javascript主容器.我试过了
var paper = Raphael(10, 50, 320, 200); paper.remove(); // Doesn't work paper.node.removeNode(); //this neither paper.removeNode(); //this neither
任何的想法？
我正在尝试为raphael元素设置悬停,以便当鼠标位于元素上时,它会发光,当鼠标离开时,会消除光晕.我已经想出如何添加发光,但我无法删除它.这是我的脚本的样子:
$(document).ready(function() {
var paper = Raphael(0,0,360,360);
var myCircle = paper.circle(180,180,30).attr('stroke','#FFF');
myCircle.hover(function() {
myCircle.glow().attr('stroke','#FFF');
}, function() {
// removing the glow from the circle??
});
});
所以有效的部分是当我将鼠标悬停在圆圈上时将光晕添加到圆圈中.但是,当鼠标移离圆形元素时,我不知道如何移除光晕.你知道我怎么能从元素中消除光晕吗？
注意:body元素的背景设置为黑色(#000).
使用的库:
我正在尝试将raphael.js(已下载并在本地运行)加载到HTML文件中,但脚本拒绝退出,在我的JS控制台中出错:
Uncaught TypeError:
Cannot call method 'appendChild' of null
bV on raphael.js:7
a on raphael.js:7
(anonymous function) on raphael.html:22
这是针对缩小版本,在1789行的非最小版本中发生相同的错误.
我从网站下载了代码,尝试了压缩和未压缩,以及下载其中一个演示中链接的JS文件,所有这些都可以在我的浏览器中工作(chrome).
有什么想法吗？
我正在尝试订购Raphael物品.我没有决定何时创建对象的选项,但是我想在创建对象后使一组对象出现在一组其他对象后面.任何人都可以帮我这样做吗？
谢谢.
而现在,对于完全不同的东西.
当"dom"对象是raphäel对象时,如何在骨干视图中委托事件.这有用吗？像这样:
var NodeView = Backbone.View.extend({
events: {
"click": "click"
},
click: function(){
alert('clicked')
},
render: function(){
canvas.rect(this.model.get('xPos'), this.model.get('yPos'), 50, 50).attr({
fill: "#EEEEEE",
stroke: "none",
cursor: "move"
});
return this;
}
});
我需要在raphäel对象改变位置时更新模型.当我将事件直接附加到raphäel对象时,我只能访问该视图而不是整个视图,因此不能访问模型.
我需要一些帮助我的脚本,我想检测人民币点击.
信息:最后我想在专用的SVG形状上显示我自己的右键菜单,使用Raphael js lib显示,我发现网上有很多不同的例子,甚至非常简单的实例,比如使用jQuery - 但我必须能够检测到人民币被点击或任何其他人.
我已经尝试过(在人民币上没有成功)下面的代码和平:
<html>
<head>
<script type="text/javascript" src="raphael.js"></script>
<script>
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 300, 300);
var shape = paper.path('m150,150l40,0l0,20l-40,0l0,-20z');
var fill=shape.attr({fill:'#FFFFFF'});
fill.click(function (evt){
if(evt.button == 2) {
// right mouse button pressed
evt.preventDefault();
}
alert("Pressed mouse = " + evt.button.toString());
});
}
</script>
</head>
<!-- <BODY oncontextmenu="return false"> -->
<body>
<div id="canvas_container"></div>
</body>
</html>
在IE中只检测到LMB(0),在Chrome左(0)和中(1)并显示默认上下文菜单,当我在body标签内禁用它时(如注释掉)上下文菜单根本没有显示,但是我仍然无法获得人民币警报(2),
谢谢你提供的所有提示/支持,Borys
我想在raphael js的元素中添加文本,我添加了文本
r.text(30, 20, "ellipse").attr({fill: color});
但是如何添加这个文本
ec = r.ellipse(190, 100, 30, 20);
问候
我有一个由d3生成的可视化(类似于Protovis或Raphael的javascript可视化库,它使用SVG元素绘制内容).vis是交互式的,因此用户可以与之交互并对其进行编辑.一旦用户对他/她的可视化感到满意,我希望用户能够将该可视化导出为PDF.我已经尝试了几个HTML到PDF库,它们不能与SVG元素一起使用.
如果解决方案是客户端或服务器端,那也没关系.我正在使用PHP服务器端,但Python或Java实现也可以工作.
浏览器支持:理想情况下它会支持所有现代浏览器,但最低限度我想支持Firefox和webkit浏览器的最新版本.
我想将D3.js(或者Raphaël)用于使用XSL-FO和Java的后端生成的报告.应该使用这些JavaScript库有以下几个原因:
所以使用任何类似的Java库是一个不太有利的选择.
现在,将D3.js与Java一起使用的最直接的方法是使用像selenium这样的繁重工具来呈现虚拟HTML页面并在其中执行JavaScript.但这似乎对我来说太过分了.
有没有更简单的方法可以在同一个Java进程中直接执行这种JavaScript？我问,因为D3.js被设计为在HTML文档的上下文中工作.我不确定是否可以使用Rhino或其他Java脚本实现
这个问题在精神上类似于两年前提出的另一个问题:为什么Raphael的帧速率在这段代码上变慢了？
我通过以下方式在Chromium 25中使用Raphael 2.1.0:
<html>
<head>
<title>Drawfun</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script src="raphael.js"></script>
<script>
var paper = Raphael(10, 50, 320, 200);
var anim = Raphael.animation({transform: "R360"}, 500).repeat(Infinity);
var rect = paper.rect(50, 40, 10, 20);
rect.attr("fill", "#f00");
rect.attr("stroke", "#fff");
rect.animate(anim);
</script>
</body>
</html>
最初,正如人们所料,矩形旋转平稳.一两分钟后,旋转以~15 FPS运行.五到八分钟后,动画以~5 FPS运行.
Chrome的CPU配置文件表明,作为动画变得更加波涛汹涌,脚本花费的时间越来越少在(program)中,越来越多的时间repush和eve.listeners.
Chrome任务管理器并未表明JS内存池或Chrome中存在内存泄漏,但确实显示该页面随着时间消耗了越来越多的CPU.
在最新版本的Firefox中运行该页面时,动画会变得非常快,更快.这些结果已在Linux和Windows上得到验证,因此它不是操作系统问题:).
有没有人能够深入了解我的代码或拉斐尔内部的错误？
raphael ×10
javascript ×9
svg ×4
d3.js ×2
animation ×1
appendchild ×1
backbone.js ×1
clear ×1
contextmenu ×1
glow ×1
java ×1
pdf ×1
performance ×1
text ×1