Tag: raphael

拉斐尔帆布（背景）onclick事件: 我一直在与Raphael合作，在canvas上创建拖放形状。我使用.drag（）函数（在Raphael框架中提供）和我的事件函数来完成此操作。这样做我没有问题。我还有一个在dblClick上创建新形状的函数，问题是，我只能将事件附加到形状或我创建的其他元素。向形状添加事件的方式如下： R = Raphael(“canvas”, “100%”, “100%”), R.rect(100, 100, 25, 50).attr({fill: fillColor}).dblclick(myDblClick); 在canvas上使用相同的原理不起作用： R = Raphael(“canvas”, “100%”, “100%”), R.dblclick(myDblClick); 有没有人知道将点击事件附加到canvas的方法，即我可以点击div中的任何位置（不包括形状），然后触发事件。谢谢。

Raphael中多个路径的相同hoverfunction: 所以我有我的canvas和路径： var paper1 = Raphael(10, 50, 960, 560); var mapShape1 = paper1.path(“M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z”); var mapShape2 = paper1.path(“M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z”); var mapShape3 = paper1.path(“M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z”); 我按照这样的方式设置它们:(我相信这可以改进，有没有办法一次完成所有路径???） function style1(shape){ shape.attr({ “fill”: “#33CCFF”, “stroke”: “000000”, “stroke-width”: “5” }); } style1(mapShape1); style1(mapShape2); style1(mapShape3); 但我的问题是如何在所有路径上使用单个hoverfunction，我有这个： mapShape1.hover( function(){ this.animate({ “fill”: “#FF3300” }, 500); }, function(){ this.animate({ “fill”: “#33CCFF” }, 500) } ); 但它一次只适用于一种形状，我想这样做 $(mapShape1, mapShape2, […]

如何将元素添加到SVG DOM: 我有一个带有jpg图像的网页，用户可以使用Raphael绘制SVG涂鸦。我希望允许用户在完成后保存合并的光栅化版本（我将使用SVG版本自己做其他事情）当用户单击save时，我想将该背景图像作为元素添加到生成的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, […]

如何避免Rapahel js路径的重叠: 我有一个基于Raphael js的流程图。它与http://raphaeljs.com/graffle.html相同。然而，因为我有许多矩形拉斐尔盒子，我的线路是直线而不是弯曲，如上例所示。在这种直线类型中，这些线有时会重叠，因此很难分辨哪一条线连接哪些盒子。如果我能做到这一点以及如何实现，请告诉我。更新：附加我当前的流程图jpeg。正如你所看到的那样，连接线穿过拉斐尔的形状，而且很难分辨线的起点。

Raphael dropshaws插件firefox和歌剧问题在svg路径上: 我在尝试基于raphael blur插件的dropshadow.raphael.js插件时遇到了一个奇怪的问题（我尝试使用cssfilter插件，同样的问题）。我正在画一条Bezier路径并添加了这些阴影： var borderBottomRounded = paper.path(“M150,100C20,200,600,200,400,100”); borderBottomRounded.attr({‘stroke’:’#000000′, ‘stroke-width’:’1′}); borderBottomRounded.dropShadow(1,0,1,0.5); // dropShadow(size, offsetX, offsetY, opacity = 1) 在那里，影子在每个浏览器上运行正常（还没有尝试IE）。比我画一条直线，像这样的阴影： var borderBottom = paper.path(“M 0,100 L800, 100”); borderBottom.attr({‘stroke’:’#000000′, ‘stroke-width’:’1′}); borderBottom.dropShadow(1,0,1,0.5); $content是我的raphael paper因为我希望它能占据整个宽度。我无法将viewport用于我正在做的事情。但是这条路径在Firefox或Opera上消失了（使用webkit浏览器很好）。我该如何解决这个问题？目前，我只是为Firefox和Opera禁用了这一行的影子，但我正试图找到一种更好的方法来做到这一点…… 查看关于小提琴的实例。另一个尝试使用cssfilter插件。包括jQuery 1.9.1，Raphael 2.1.0和raphael dropshadowin插件。编辑通过使用rect而不是行来修复，因为在应用filter时元素需要具有高度（感谢Robert Longson）： var borderBottom = paper.path(“M 0,100 H800 v1 H0 […]

jQuery – Raphael – SVG – 基于自定义数据的选择器: 我已将自定义数据属性分配给添加到Raphaelcanvas的某些圆圈，如下所示： marker.data(‘transaction’, transaction); 如何在canvas上找到具有相同事务数据值的元素？目前我有代码： var found = document.querySelectorAll(“[transaction='” + current_transaction +”‘]”); 哪个应返回带有元素的NodeList，但它不起作用。要将数据检索到变量中，它就像var foo = marker.data(‘transaction’)一样简单，但显然，如果我想检索元素的NodeList，这不起作用。因此，我希望我的选择器看起来如下，但我无法找出正确的语法： var found = document.querySelectorAll(“data(‘transaction’ = 1)”); 任何帮助将非常感激

如何在jquery对象上调用raphael方法？: 我正在使用Raphael创建一些圈子。当用户单击按钮时，我想为这些圆圈设置动画（通过增加它们的半径）。我该怎么做呢？例如，这是我的示例代码： $(function() { var paper = new Raphael(“canvas_container”, 300, 150); paper.circle(50, 75, 30); paper.circle(150, 75, 30); $(“button”).click(function() { $(“circle”).each(function(i) { this.animate({ r: 100 }, 500); // Doesn’t work. }); }); }); Click me to animate the circles [一般来说，我不清楚以下两个变量之间的区别是什么： var c = paper.circle(50, 75, 30); // Raphael circle $(“circle”).first(); // using jQuery to […]

结合Raphael和jQuery实现浏览器兼容性: 在发现IE无法处理javascript onmouseout ，我决定使用jQuery，以便自动处理跨浏览器兼容性。当鼠标hover在svg路径上时，我正在创建一个由svg路径定义的区域，并且我在澳大利亚示例中调整了Raphael网站上提供的代码。在此代码中，澳大利亚的每个州都由拉斐尔路径定义，例如塔斯马尼亚州： aus.tas = R.path(“…”).attr(attr); 然后将此路径（’st’）传递给函数： st[0].onmouseover = function () { … }; 与我预期的相反，代码是st[0].onmouseover而不仅仅是st.onmouseover 。因此，路径实际上必须是一个数组，而st[0] ，无论是什么，都是hover在上面的东西。为了用jQuery等价物替换onmouseover （我相信是.mouseout() ），我需要为st[0]分配一个类，所以我可以用jQuery引用它。我的问题是，我该怎么做？如果代码是st.onmouseover它会很简单，但为什么路径（ st ）是一个数组？究竟是什么st[0] ？我到底怎么了？

在Raphael Javascript库中渲染SVG多边形: 据我所知，目前无法在Raphael Javascript库中显示SVG多边形。我正在构建一个需要读入SVG的应用程序，并在Raphael中显示它们，但是，许多这些SVG使用多边形。例如，我正在使用以下格式的多边形读取SVG： <polygon points="260.5,627.75 259.563,628.313 258.625,628.563 258.25… 所以，我想知道……有没有办法将多边形点转换成我可以在拉斐尔绘制的路径？我见过一些使用python和PHP的应用程序，但到目前为止我找不到任何严格的javascript。任何帮助将不胜感激。谢谢

raphael.js – 将饼图转换为甜甜圈图: 我正在尝试使用位于此处的raphael.js示例： http://raphaeljs.com/pie.html 但我想将饼图转换为圆环图（在所有切片的中间有一个洞）。目前，使用以下代码创建每个切片： function sector(cx, cy, r, startAngle, endAngle, params) { //console.log(params.fill); var x1 = cx + r * Math.cos(-startAngle * rad), x2 = cx + r * Math.cos(-endAngle * rad), y1 = cy + r * Math.sin(-startAngle * rad), y2 = cy + r * Math.sin(-endAngle * rad); return paper.path([“M”, cx, cy, “L”, […]