Tag: raphael

合并来自Raphael svg的图片: 试图创造第1步 – 让用户通过Ajax，Raphael和Raphael freetransform上传图像。步骤2 – 单击按钮以显示合并上载图像中的一个图像。（问题）：我发现有关转换Raphael svg 1 2 3的类似post，所以我也使用Canvg，但得到console.log： Resource interpreted as image but transferred with MIME type text/html error: image “” not found 。请帮我找到解决方法。或任何线索如何达到相同的目标（将上传的几个Raphael svg图像转换为一个png / jpeg）？谢谢！步骤1 // upload images and ajax show in page var paper = Raphael($(‘.upload_img’)[0], 400, 200); $(‘.upload_btn’).click(function(){ … $.ajax({ type: […]

简单的甜甜圈图表与拉斐尔: 使用“如何在raphael中实现带路径的甜甜圈洞”中的示例（如何在Raphael中实现带有路径的“甜甜圈洞” ）我能够将代码更多地调整到我的用例中。我的下一个目标是在鼠标hover之上放大其中一个扇区，而不是将其拉离内圈。这可能吗？这是当前的代码： http ： //jsfiddle.net/Swivelgames/efb9n/1/ 我希望它看起来像这样：

使用jQuery修改Raphael SVG图像: 我有一个小应用程序，我需要为弧生成textPath标签。我正在通过拉斐尔绘制弧线，这很有效。但拉斐尔不支持textPaths。我们可以通过jQuery将它们添加到svg元素中，但由于某种原因它们不会呈现。当我静态复制动态生成的代码时，渲染效果很好。 Created with RaphaÃ«l This is a test entry 使用上面的代码，您永远不会看到弧的标签。但是，当以下内容被硬编码时，它会按预期呈现： This is an Arc 任何关于为什么我没有看到我的整个svg的见解将非常感激。编辑：我已经对我的javascript进行了更改，我认为它几乎就在那里，但textPath仍然无法渲染。这是当前的代码，主要归功于Femi： function drawRange(start, end, R, range, id, title) { var color = “hsb(“.concat(Math.round(R) / 200, “,”, end / 360, “, .75)”); var key_position = key[id]; var svg_bits = document.getElementsByTagName(‘svg’)[0].childNodes; var svgns = document.createElementNS(‘http://www.w3.org/2000/svg’, […]

将Raphael JS在canvas中生成的SVG另存为png的问题: 我正在尝试转换由Raphael JS （和用户，因为您可以拖动和旋转图像）生成的SVG。我在浏览器中跟踪了这个转换SVG图像（JPEG，PNG等），但仍然无法获得它。它一定很容易，但我不能指责我错了。我把我的svg放在一个div中， #ec为id ，canvas的是#canvas 。 function saveDaPicture(){ var img = document.getElementById(‘canvas’).toDataURL(“image/png”); $(‘body’).append(”); } $(‘#save’).click(function(){ var svg = $(‘#ec’).html(); alert(svg); canvg(‘canvas’, svg, {renderCallback: saveDaPicture(), ignoreMouse: true, ignoreAnimation: true}); }); 警报给了我： Created with Raphael 这是svg的xml，如果我相信canvg文档，那就好了。无论如何，使用此代码，变量img （应该具有转换后的图像数据）获得具有svg维度的空png的数据。我猜的唯一一件事就是Raphael JS生成的svg没有很好地形成canvg（比如，如果我按照W3C的推荐， image href应该是xlink:href ）有人对这个问题有所了解吗？：d

Raphael JS Pie：为路径切片添加ID: 我在Raphael谷歌小组看过这个问题，但是在那里搜索了几个小时，还有谷歌，我似乎无法找到解决方案。我只是希望能够使用jQuery定位我的饼图（svg路径）切片，但我无法弄清楚如何将自定义ID添加到路径标记 – 默认情况下没有ID属性：什么是理想的将是这样的：有谁知道如何实现这一目标？这是我用来创建饼图的代码： window.onload = function () { var r = Raphael(“holder”); var pie = rgpiechart(350, 350, 256, [56, 104, 158, 23, 15, 6]); pie.hover(function () { this.sector.stop(); this.sector.animate({scale: [1.1, 1.1, this.cx, this.cy]}, 500, “bounce”); }, function () { this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, “bounce”); }); }; 基本上，我需要能够做到这一点的原因是，我可以创建一些单独的锚点触发器来执行上面显示的缩放动画。任何帮助非常感谢。

使用chart.js在圆环图中心的事件处理程序: 我在一个页面上创建了4个圆环图，中间有一些文本，我知道这可以通过在中心放置DIV来完成，但我不能使用它，因为当图表下载为PNG时文本不会被导出：演示： https ： //jsfiddle.net/cmyker/ooxdL2vj/ 我需要跟踪中心文本的单击，我尝试使用pageX，pageY来确定是否在中心部分进行了单击。坐标是矩形部分的角，它位于圆环图的中心孔内，并且可能有文本。 jQuery(‘#canvas’).on(‘click’,function(e){ var pageX = e.pageX; var pageY = e.pageY; if((pageY >= 379 && pageY = 440 && pageX <= 629)){ //coordinates are of rectangular area which has text inside the center of doughnut chart. //do something } }); 但如果屏幕的分辨率不同，这将不起作用，因为坐标会有所不同。有什么想法吗？我试图使用raphael.js使中心可点击但不太确定这个尝试。我正在尝试使用container方法在甜甜圈的中心孔中创建一个圆圈，可以在其上附加一个点击处理程序。使用Raphael JS的代码信息 Chart.pluginService.register({ beforeDraw: function(chart) { […]

为div创建线性透明渐变: 我想为div创建一个线性透明渐变。有没有办法用jquery做到这一点？或者我应该使用像raphaeljs这样的其他库？我想达到如下效果：

如何使用jQuery将CSS样式应用于Raphael.js对象？: 有没有人对Raphael.js SVG库有任何经验？我正在使用Raphael.js创建一个SVG地图（用于智能手机），但我无法打开Raphael通过jQuery创建外部交互和css样式的地图对象。 var R = Array(); R[1] = new Raphael(“level1”, 408, 286); R[2] = new Raphael(“level2”, 408, 286); R[3] = new Raphael(“level3”, 408, 286); R[4] = new Raphael(“level4”, 408, 286); R[5] = new Raphael(“level5”, 408, 286); var attr = { fill: “#ccc”, stroke: “#000”, “stroke-width”: 0.5, “stroke-linecap”: “square”, “stroke-linejoin”: “miter” }; // loop through […]

Raphael JS中的动画字体大小是否有流畅的过渡可能性？: 到目前为止它似乎不流利，但波涛汹涌。例如，如果您有一个font-size：14的状态属性，并希望使用font-size：16设置动画状态，则转换看起来并不平滑。它分两步跳。首先更改为15然后更改为16px。可以强迫它看起来更顺畅吗？我正在使用Firefox 14进行测试。我目前的代码： var fillerText = { “fill” : “#00738f”, “font-size”: 14, “font-family”: “Arial, Helvetica, sans-serif” } var fillerTextHover = { “fill” : “#00738f”, “font-size”: 16, “font-family”: “Arial, Helvetica, sans-serif”, “cursor”: “pointer” } text.hover(function () { text.animate(fillerTextHover, 500); }, function () { text.animate(fillerText, 500); } );

带有三个手柄的贝塞尔曲线错位了控制点: 我设法用拉斐尔图书馆的例子绘制了四条不同的曲线。现在，我想创建一个包含多个手柄的曲线。如何在此示例中添加更多句柄。 Bezier curve #holder { height: 100%; left: 100%; margin: -100% 0 0 -100%; position: absolute; top: 100%; width: 100%; } $(‘document’).ready(function () { var r = Raphael(“holder”, window.innerWidth, window.innerHeight) function curve(x, y, ax, ay, bx, by, zx, zy, color) { var path = [[“M”, x, y], [“C”, ax, ay, bx, by, zx, […]