我正在尝试在svg文件的多边形上绘制标签.我面临的问题是大致找出这个多边形的中心来放置标签,因为路径的坐标是svg格式,需要进行解析.有没有更简单的方法来确定svg多边形的中心(也许有人可以指出一个JavaScript库或一个片段)？我正在使用Raphael javascript库来操纵svg,但它似乎没有超出标准的svg功能.
我想知道如何制作一个简单的条形图,可能有一天作为x轴,值为'今天'和'昨天',而y轴可能是'时间',相应的值为'1'和'2 ".我想我很困惑,如何设置文本为x轴的值,如何显示Y轴,究竟rgaxis呢...(我发现使用一个例子axis = r.g.axis(0,300,400,0,500,8,2),我只知道这是xpos,ypos,width,??,?? num ticks,??).任何见解都会很棒!或者包含功能更全面的条形图示例(标签等)的页面.谢谢.
我正在使用带有RaphaelJS的javascript通过输出到SVG的随机点绘制一条平滑线.该线严格水平,不会在X轴返回.目前,我使用立方贝塞尔曲线从一点到另一点画线.
问题是,线条看起来不够好.两条曲线在一个点处具有难看的连接,其中一条曲线结束而另一条曲线开始,在关节中具有相当随机的角度.如何使前一曲线平滑地转换为下一曲线,同时仍保持线路通过给定点？
嗨RaphaelJS用户=),
我可能有一个愚蠢的问题,但我似乎无法找到答案,事实是,我正在尝试用Raphael加载/创建一个图像,这很好,就像这样:
var image_1 = paper.image('/img/img1.jpg', 0, 0, 100, 100);
但正如你所看到的,似乎你必须给出"宽度"和"高度"属性,我已经检查了文档,但它总是很短而且不是那么详细,我尝试给出空参数或空参数,但是它不起作用......
所以我想知道raphael实际上是否有直接的方式来做这个,或者...... 我必须总是在之前获得这些值吗？
我的意思是,这样的事情？:
var imgURL = "../img/img1.jpg"
var myImg = new Image();
myImg.src = imgURL;
var width = myImg.width;
var height = myImg.height;
//create the image with the obtained width and height:
var image_1 = paper.image('/img/img1.jpg', 0, 0, width, height);
因此,我加载图像的原始大小,这有点解决了我的问题,但....拉斐尔内部没有办法做到这一点???
我有一个带有jpg图像的网页,用户可以在使用Raphael的基础上绘制一个SVG涂鸦.
我希望允许用户在完成后保存合并的光栅化版本(我将使用SVG版本自己做其他事情)
当用户单击"保存"时,我想将该背景图像作为元素添加到生成的SVG DOM中,然后使用canvg将SVG写入canvas元素.最后我使用toDataUrl()方法将其转换为jpg.
我无法让中间位工作 - 将图像添加到DOM的最佳方法是什么？当我使用下面的代码时,我得到一个javascript错误,说明appendChild()不是一个函数.
我想知道它是否与我如何使用.html()方法获取SVG有关 - 也许返回的内容不会被解释为真正的SVG文档？
任何帮助非常感谢.
function saveImage(){
var img = document.getElementById('canvas').toDataURL("image/png");
window.open(img,'Download');
}
$('#save').click(function(){
var svg = $('#editor').html();
// Create new SVG Image element. Must also be careful with the namespaces.
var svgimg = document.createElementNS("http://www.w3.org/2000/svg", "image");
svgimg.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', "myimage.jpg");
// Append image to SVG
svg.appendChild(svgimg);
canvg('canvas', svg, {renderCallback: saveImage(), ignoreMouse: true, ignoreAnimation: true, ignoreDimensions: true});
});
我想创建一个由div元素组成的交互式"问题解决"类型流程图.
我想做一些非常类似于纽约时代在这个例子中所做的事情......
有人建议拉斐尔,所以我一直在学习一点,这很棒.
还有其他值得考虑的图书馆吗？
如果拉斐尔适合这项任务,它是一个广泛使用的图书馆吗？如果我要学习新技能那么学习流行代码符合我的最大利益,所以我可以用不同的工作来应用它,而不是我从未使用的一些奇特的东西,或者没有人希望我再次使用它.
非常感谢.
我正在创建一个图表应用程序,我隐藏并显示一些元素,例如
var c = paper.circle(10, 10, 10);
c.hide()
var c2 = paper.circle(10, 10, 10);
c2.show()
现在我想对这样的形状采取行动,例如计算边界框等,但如果形状被隐藏,我无法找到如何获得？是否有像这样的shape.is_visible()或shape.attr('visible')
在我正在使用的库中,我的任务是将元素移动到dom的前面.(我把它做得更大所以我需要看到它,然后当鼠标移出时缩回它).
我正在使用的库有一个简洁的解决方案,它使用活动元素上的appendChildren将它移动到它的父节点的末端,从而进一步朝着dom的末尾移动,然后在顶部.
问题是我相信,因为您正在移动的元素是您在鼠标移动事件上移动的元素丢失.您的鼠标仍在节点上,但未触发mouseout事件.
我已经删除了功能以确认问题.它在Firefox中运行良好,但在任何版本的IE中都没有.我在这里使用jquery来提高速度.解决方案可以是简单的旧javascript ..这将是一个偏好,因为它可能需要回到上游.
我不能在这里使用z-index,因为元素是vml,库是Raphael,我正在使用toFront调用.使用ul/li的示例在一个简单示例中显示问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
li
{
border:1px solid black;
}
</style>
</head>
<body>
<ul><li>Test 1</li></ul>
<ul><li>Test 2</li></ul>
<ul><li>Test 3</li></ul>
<ul><li>Test 4</li></ul>
<script>
$(function(){
$("li").mouseover(function(){
$(this).css("border-color","red");
this.parentNode.appendChild(this);
});
$("li").mouseout(function(){
$(this).css("border-color","black");
});
});
</script>
</body>
</html>
编辑:这是一个js粘贴bin的链接,以查看它的实际效果.http://jsbin.com/obesa4
**编辑2:**在发布更多信息之前,请查看所有答案的所有评论.
我试图绘制一个简单的矩形,上面有一些文字.由于形状上没有文字,我正在创建一个具有相同文本和矩形对象坐标的集合.我需要在onclick事件上改变一些东西.因此,我使用了obj.node.onclick =语句并编写了一个处理程序.我的问题是,如果文本对象用于onclick,则仅当我单击文本时才会调用事件处理程序.如果我使用rect进行onclick,我必须单击边框区域.我的要求是,点击可以与形状中的文本一起出现在整个形状区域.
var paper = Raphael(10, 10, 320, 200);
var group = paper.set();
var c1 = paper.path("M35 60 L35 90");
var c2 = paper.rect(10, 10, 50, 50,10);
group.push(c2);
group.push(paper.text(35, 35, "Hello"));
c2.attr("fill", "blue");
c2.node.onclick = function () { c2.attr("fill", "red");};
我试图使用div覆盖rect并在其上写文本但没有成功.我可以在firebug中看到div而不是在网页上!我给它左上角宽度和高度的样式属性以及将位置表示为绝对值.但没有成功.
请帮我解决一下这个.任何帮助表示赞赏!卡维塔
我尝试使用前层背板解决方案.我克隆了后备层并添加了一个点击处理程序.我根本没有使用'this'.这件事永远不会被解雇!请在这件事上给予我帮助!卡维塔