草庐IT

ruby-on-rails - Raphael 中的 SVG 文件,可以使用吗?

我有一个SVG文件,我想通过Raphael显示(每个svg文件都是我要绘制的树中的一个节点,树的实际连接将由raphael建立)。我试过类似的东西:varvector_image=paper.image("test.svg",50,50,50,50);但没有骰子,似乎只接受像png或jpeg这样的“真实”图像文件?我觉得这很奇怪,因为拉斐尔本身使用可缩放矢量图形。无论如何(除了将SVG文件解析为javascript片段并将它们粘贴到html文档中)使用Raphael(或任何其他基于矢量的javascript图形引擎?)显示现有的SVG文件?如果必须解析它,除了手动抓取文件之外,是否有任

javascript - 平滑的 svg 路径连接

我有一组随机点,想用raphaeljs创建一个平滑的svg形状。为了连接这些点,我使用了catmull-rom-spline。问题是路径闭合的点不平滑。这是我项目中的示例路径:M125,275R125,325175,325225,325275,325225,275175,275125,275Z我还创建了一个jsfiddle:http://jsfiddle.net/ry8kT/这可以用catmull曲线实现吗?如果没有,能否请您举例说明如何获得完全平滑的形状?非常感谢,麦克法兰 最佳答案 我自己修好了:我没有使用catmullrom样

javascript - 如何添加点击并拖动以缩放 SVG 中的图像?

我想让访问者使用点击和拖动来缩放图像:是否有可以帮助我的JavaScript库?我注意到Raphaelhasclickanddrag方法,但我仍然需要编写大量JS来:找到图像的Angular使Angular落附近的区域可选为Angular绘制图标,使其明显可见在Angular落添加点击、拖放更新图片的尺寸我可以做到所有这些,但听起来很费时。有没有我应该使用的开源脚本?其他建议? 最佳答案 我在这篇文章中找到了这个解决方案:DraggablesandResizablesinSVG.在答案中,您可以找到一个jsfiddle链接:http

javascript - Raphael js 如何在每个站点包含多个图标?使用类而不是 ID

我如何在一个站点上包含来自Raphaël(http://raphaeljs.com/icons/)的多个图标?我还没有设法通过class="icon"包含它们,只是使用id="icon"。因为我的JavaScript不是很好,所以我在网上搜索但一无所获。我在博客上唯一找到的东西:bubble:"M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.

javascript - 指针事件 : none VML raphael solution

我已经使用jQuery在Raphael元素上实现了pointer-events:none,如下所示:varraphaelElement=Raphael.ellipse(x,y,w,h);$(raphaelElement.node).css({'pointer-events':'none'});这工作正常,但当然在IE8中,Raphael使用VML而不是SVG,并且此解决方案失败。有没有人有其他解决方案来使Raphael元素忽略事件。 最佳答案 在IE8(及更早版本)上实现此功能的唯一方法是实际捕获事件,并在事件处理程序中:隐藏元素(

javascript - 重叠 SVG 元素上的鼠标事件

如何处理重叠svg元素上的点击事件?我正在使用Reaphael.js库。问题是topDOM元素正在拦截鼠标事件,即使底部元素没有被任何绘图重叠。我的问题是如何使我的示例中的两个圆圈都可点击并仍然将它们保留在两个svg元素中?这是我的代码:CSS:#container{position:relative;width:200px;height:200px}#container>svg{position:absolute!important;top:0;left:0;}JavaScript:vartopLayer=Raphael('container',200,200);varbottomL

javascript - raphaeljs 的 Mobile Safari SVG 渲染问题

我正在使用raphael制作动画交互式图表我需要在iPhone上正常工作。我遇到了2个小的渲染问题。首先,无论何时单击附加有单击处理程序的svg元素,移动版Safari都会在其周围绘制一个透明的灰色框以指示单击的内容。这与您单击超链接时所做的相同。在这种情况下,灰色框非常难看。是否有任何css属性告诉移动safari不要这样做?第二个问题是动画。对于任何动画的持续时间,移动版safari都会向svgCanvas添加丑陋的黑色边框。它仅在动画进行时可见,并且仅在Canvas的底部和右边缘可见。知道如何解决这个问题吗?这是使用raphael页面上的一个演示的复制和粘贴拍摄的,只有白色背景。

javascript - 为等距 View 转换 SVG 元素

我正在编写一些JavaScript代码以在等距3DishView中呈现标准2DSVG/Canvas元素(使用Raphael-JS绘制)。假设我们绘制了两个相邻的矩形。然后我以正确的Angular(基本上是30度扭曲)重新绘制它们以获得等距View。(在上图中,我显示了两个对应元素的原点。)我的问题是我不知道如何正确翻译所有单独的元素,以便它们正确地“平铺”而不是仅仅重叠。虽然实际使用图block会使事情变得更容易,因为我可以将任何给定图block的放置基于它之前的那个,但在这种情况下,图block将不起作用。一切都是动态的,并且会比简单的x/y平面更复杂。Hereisanimageof

javascript - 有什么比$(document).ready()更靠谱的吗?

我有一个绘制简单弧线的实用程序,可以使用SVG或作为后备Canvas。(可以在我网站上的RaphaelArcsProject中找到早期版本。为了适应移动解决方案,我最近添加了代码来监视容器的大小,如果它发生变化,则重新绘制图像以适应新大小的容器。此添加仅使用包含DIV的大小;该代码将SVG或Canvas对象添加到DIV。然而,反复重新加载页面,有时即使$(document).ready显示DIV布局已就绪,DIV布局仍未就绪。这似乎在Chrome下最为普遍;我只在Opera上见过一次,在Firefox3.6上从未见过。包含的DIV的高度和宽度返回为零。如果您在Chrome中加载上面的链

javascript - 空 Javascript 函数?这是什么意思?

所以简短的版本,我不明白的是这行代码:(newFunction("paper","window","document",cd.value)).call(paper,paper);长版,看看这些函数:window.onload=function(){varpaper=Raphael("canvas",640,480);varbtn=document.getElementById("run");varcd=document.getElementById("code");(btn.onclick=function(){paper.clear();paper.rect(0,0,640,480,