问题标签 [raphael]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
1196 浏览

jquery - 拉斐尔是使用画布还是 svg?

我一直在寻找一个好的矢量解决方案,并且听说过 Raphaël 的好消息。但是在它的整个文档中,它都在谈论定义画布,这让我感到困惑。

Raphaël 是画布还是 SVG 库?

0 投票
3 回答
2757 浏览

javascript - 将 SVG 限制为 div 边界

我正在尝试使用 Raphael 在 div 上将多个多边形显示为 SVG 图像。虽然,我已经设置了 div Raphael 获取的大小作为创建纸张对象的参数,但不尊重 div 元素的大小,并且图像被绘制在 div 边界之外(我以某种方式理解,因为多边形坐标超出 div 边界)。

有没有办法让 SVG 表现得像一个普通图像,一旦浏览器窗口大小发生变化就会自动缩放并防止 SVG 被绘制到 div 边界之外(就像行为一样)?

干杯,马克斯

0 投票
1 回答
950 浏览

html - 有什么方法可以判断 SVG 动画何时完成?

我正在使用 Raphael 库来绘制一些形状,然后将它们动画化到浏览器中的视图中。

有什么方法可以检查其中一个动画何时完成以便触发另一个功能?

0 投票
2 回答
11379 浏览

graph - Raphael JS 调整画布大小

我正在用 Raphael JS 编写一个辩论图。用户可以向图中添加节点。最终图表变得非常大,画布仍然是相同的大小。画布(在 raphael js:paper 中)位于另一个带有“overflow:scroll;”的 div 中,所以让我们忽略屏幕空间

有没有办法在不重新加载页面的情况下调整画布大小(分配新的 X/Y 值)?或者,我可以并行创建第二个更大的画布并复制所有元素吗?有办法吗?

0 投票
1 回答
11954 浏览

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

我有一个 SVG 文件,我想通过 Raphael 显示(每个 svg 文件都是我要绘制的树中的一个节点,树的实际连接将由 raphael 建立)。我试过类似的东西:

但没有骰子,似乎只接受像 png 或 jpeg 这样的“真实”图像文件?我觉得这很奇怪,因为 Raphael 本身使用可缩放矢量图形。

无论如何(没有将 SVG 文件解析为 javascript 片段并将它们粘贴到 html 文档中)来使用 Raphael(或任何其他基于矢量的 javascript 图形引擎)显示现有的 SVG 文件?

如果必须解析它,是否有任何简单的方法可以做到这一点,除了手动抓取文件?我在 Ruby on Rails 服务器上运行这段代码,所以如果可能的话,我想避免使用这个框架之外的解决方案(我通过这个站点听说过一个 PHP 解决方案......我宁愿手工编写代码而不是在这个项目中添加另一种语言)。

-珍妮

0 投票
3 回答
2128 浏览

javascript - 如何为“拉斐尔”画布制作动画?

我正在使用 Raphael 库来创建 SVG 对象。

为了初始化 SVG 形状并为里面的所有东西创建一个画布,我使用了文档中所述的以下行:

我现在想为纸张和其中的所有内容设置动画,就像我要为已按以下方式附加到纸张的形状设置动画一样:

当我尝试与纸张类似的东西时,例如:

我得到错误' paper.animate is not a function'。

这里发生了什么,我该如何绕过它?

0 投票
5 回答
20256 浏览

javascript - 如何确定 SVG 文本框的宽度,或在“x”字符后强制换行?

我正在使用 Raphael 库创建一个 SVG 文本框,并用从 XML 文档中提取的动态字符串填充它。

有时,这个字符串比我放置文本框的画布长,所以我需要限制框的宽度,这本身会强制换行(我找不到任何证据表明这是可能的)或确保在一定数量的字符之后插入'\n'换行符。

那么(1)这是最好的选择吗?(2)我该怎么做?

0 投票
3 回答
4880 浏览

javascript - 使用 Raphael 为 SVG 矩形的不透明度设置动画时遇到问题

我正在使用 Raphael 库并尝试将矩形的不透明度从 0 设置为 1。

这是我写的代码:

这不起作用,我认为这是不正确的动画线,因为我可以将初始属性设置为较低的值,并且在我运行脚本时很明显。

有任何想法吗?

0 投票
2 回答
2745 浏览

svg - 将 SVG 路径从 inkscape 转换为 Raphaëljs

在 inkscape 中,坐标系是底/顶角(意思是 0,0 是左下角)。Adobe Illustrator 也是如此。但是,当我尝试在 raphael 中使用此路径字符串时,它使用上/下(意思是,0,0 是上/左角)方法。如何根据浏览器的坐标或拉斐尔的坐标转换这个路径字符串?

0 投票
4 回答
2170 浏览

javascript - 选择正确的技术(SVG 与 Canvas)

我正在编写一个用于形状操作的应用程序,这样在创建简单形状后,用户可以通过将形状相互剪裁来创建更复杂的形状(即将两个圆圈组合成一个使用单个路径而不是组存储的图 8,或执行两个圆相交以创建“咬”标记),并且正在尝试决定要使用的图形库。

SVG 似乎可以处理我需要的 80% 的开箱即用功能(形状存储、移动、旋转、缩放)。问题是如果不在我自己的模块中重新创建 SVG 功能,另外 20%(使用剪裁来创建一组新的复杂多边形)似乎是不可能实现的(我必须将形状存储一次以在 SVG 中绘图,一次用于自己处理剪辑)。我对 SVG 的看法可能是错误的,但是通过阅读 Raphael 库(基于 SVG),它似乎只使用矩形处理剪辑,甚至剪辑也是暂时的(它只呈现部分形状,但仍存储整个形状移动剪切矩形后重新渲染)。也许我只是对 SVG 标准感到困惑,

因此,Canvas 似乎是一个更好的选择,因为它不会通过跟踪我已经必须跟踪以使我自己的剪辑实现工作的形状来引入额外的开销。不仅如此,我已经实现了可以移动、旋转和缩放的多边形类。但是,Canvas 还有一些其他问题(我必须实现自己的重绘方法,我确信它不会像利用 Chrome 和 Firefox 中特定于浏览器的框架的 SVG 那样高效;而且我会接受由 Raphael 等库免费处理的 IE 不兼容性)。

谢谢