标签: raphael

我几天前开始使用Raphael.js,我真的很享受它.我唯一无法弄清楚的是如何让"paper"或svg/vml标签像swf一样填充浏览器窗口.看这个例子.

请注意上面的示例使用浏览器窗口调整大小的方式

我能够通过浏览器窗口调整"纸张",但没有运气让所有矢量图形调整它们的大小.任何反馈将不胜感激.

编辑

我尝试了一堆不同的路线.viewBox工作得很好但只有它的SVG.我只想知道如何使用Raphael集和window.onresize事件上的一些代码来做到这一点.我会在今晚或明天晚些时候发布我的发现.如果有的话,我还是真的希望看到问题的其他解决方案.

我想在我的博客中使用Raphael.js.我想从其他来源导入它,因为我无法在博客上托管它.我们是否有像Google代码一样托管Raphael.js的网站？
无法在Google代码上找到它.

我正在使用Raphael Javascript库为网页做一些基本的绘图.我只画了一些从一点辐射出来的线条.在Chrome,Firefox和Opera中,这些行的大小取决于SVG画布的大小.这是所需的行为,因为我想根据需要绘制光线,但我不希望它影响页面的大小.如果我绘制一个5000px宽的框,则只能看到画布内的部分.

但是,Internet Explorer(惊喜)完全忽略了画布的大小和范围,并适应绘制的任何内容.因此,如果我绘制一个从0,0开始的5000px宽盒子,但画布是50px乘50px并从20,20开始,你仍然会看到一个0,0的盒子,宽度为5000px,页面将有一个滚动条在底部,所以你可以侧身滚动查看整个事情.我不希望这种情况发生.

如何让Internet Explorer在这方面表现得像其他浏览器一样？我不希望页面能够滚动查看Raphael绘制的图像的其他部分,我希望边缘被文档的自然大小剪裁.

我用这个新闻组主题愚蠢地回答了我自己的问题:http://groups.google.com/group/raphaeljs/browse_thread/thread/43c71ec89a6a01ed

只需将其添加到您的CSS:

svg { overflow: hidden; }

我试图更好地理解raphael.js,但我发现raphael.js文档有时会让人感到困惑,有时甚至会有些模糊.

任何人都可以向我解释什么是矩阵,以及如何使用它？

是否可以使用Raphael js拖放页面周围的对象而不仅仅是圆形和矩形？

我想添加路径和图像,然后你可以移动,但它证明是棘手的.我想与Raphael合作,因为它支持触摸界面.

这是代码

<script>
    window.onload = function () {
        var R = Raphael(0, 0, "100%", "100%"),
            r = R.circle(100, 100, 50).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5}),
            g = R.circle(210, 100, 50).attr({fill: "hsb(.3, 1, 1)", stroke: "none", opacity: .5}),
            b = R.circle(320, 100, 50).attr({fill: "hsb(.6, 1, 1)", stroke: "#fff", "fill-opacity": 0, "stroke-width": 0.8, opacity: .5}),
            p = R.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 …

我对画布有点新意,如果这是一个微不足道的问题,请原谅.

我希望能够在路径(定义为bezier路径)后设置对象的动画,但我不知道该怎么做.

我看过拉斐尔,但我无法弄清楚如何随着时间的推移走这条路.

Cake JS在演示中看起来很有前途,但我真的很难在文档中挣扎,或者在这种情况下缺乏文档.

有没有人有这方面的实例？

我有一个SVG对象,我使用Raphael添加到我的页面.在6组中大约有175条路径,我怀疑它很复杂.

我使用.animate函数为6组中的每一组设置动画

function anim(direction, duration){
    return Raphael.animation({transform: "r"+direction+"360 250 250"}, duration).repeat("Infinity");
}
IG.sets.white_outer.animate(anim("",100000)); // 2 paths 
IG.sets.grey_outer.animate(anim("-",100000)); // 25 paths
IG.sets.grey_inner.animate(anim("",100000));  // 25 paths

$(window).load(function(){                      
    IG.sets.BLUE.animate({transform: "r0 250 250"}, 4000, ">");  // 32 paths
    IG.sets.RED.animate({transform: "r0 250 250"}, 3000, ">");   // 29 paths
    IG.sets.GREEN.animate({transform: "r0 250 250"}, 2000, ">"); // 24 paths
}

问题是在某些浏览器中,这看起来非常不稳定.

它在Mac上非常流畅(经测试:FF,Chrome,Safari).它在Chrome中的Windows上也很可爱,但是当我加载Windows FF,Safari或IE8时,动画不稳定且有点卡顿.

它甚至在iPad上看起来很棒!

我希望能够让它们看起来都很棒...所以我想弄清楚FF和Safari中的所有功能是什么(在一天结束时,希望无论我管理什么覆盖带来了修复IE8).

从我在Raphael看到的关于波涛汹涌的动画的其他问题,我看到提到"进入胆量"为动画函数添加超时......(如raphael-min.js中所见)

cz= window.requestAnimationFrame||
    window.webkitRequestAnimationFrame||
    window.mozRequestAnimationFrame||
    window.oRequestAnimationFrame||
    window.msRequestAnimationFrame||
    function(a){setTimeout(a,16)}, /* there is a function here that animates */

虽然它看起来像在FF中,例如RequestAnimationFrame提供比setTimeout更平滑的性能.(我通过删除mozRequestAnimationFrame条件并重新加载测试了这个,尝试了超时的各种间隔)

还有其他我可能会遗漏的东西可能有助于提高我的动画的跨浏览器帧率吗？

请注意,例如,图像默认为500x500,旋转发生在图像中心周围(点250x250),但图像显示在页面上1000x1000(视口在页面加载时进行缩放).

是否有可能如果我让设计师将图像调整为1000x1000画布并且我从一开始就以全尺寸显示我将会有所提升？也许是"更顺畅的骑行"？我不确定哪些因素会影响SVG动画和性能.

我一直在与Raphael合作,在画布上创建拖放形状.我使用.drag()函数(在Raphael框架中提供)和我的事件函数来完成此操作.我这样做没有问题.

我还有一个在dblClick上创建一个新形状的函数,问题是,我只能将事件附加到形状或我创建的其他元素.

向形状添加事件的方式如下:

  R = Raphael("canvas", "100%", "100%"),
  R.rect(100, 100, 25, 50).attr({fill: fillColor}).dblclick(myDblClick);

在画布上使用相同的原理不起作用:

  R = Raphael("canvas", "100%", "100%"),
  R.dblclick(myDblClick);

有没有人知道将点击事件附加到画布的方法,即我可以点击div中的任何位置(不包括形状),然后触发事件.

谢谢.

有没有办法将raphael生成的SVG保存为svg文件.请注意,它只需要在chrome中工作.

我一直在使用Raphael JS(......很棒).我只是想了解如何在我background-imagebackground-size 用Raphael创建的SVG路径中添加和(封面).这是可能吗？

我尝试过的:

1. 我已经尝试添加一个类,但它将它添加到SVG(路径的父),所以我也尝试过 svg path {//background properties, including the image I want to include;}

2. 我也研究过模式,但是我的输出没有我想要的背景属性,因为我不知道如何用模式设置它们(background-image: //;和background-size: //;).

现行守则(拉斐尔)

function myFunction() {
    var paper = Raphael("drama", 400,400);
    var c = paper.path("M24,48 L313,12L342,174L98,280Z").attr({fill: "url('../imgs/screen.png')", stroke: "none"});
}

目前的拉斐尔输出

<svg height="400" version="1.1" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative;">
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc>
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <pattern id="1546A235-C4BA-4ED7-A544-C43CE0BA3109" x="0" y="0" patternUnits="userSpaceOnUse" …