raphael

Using Raphael JS, fill an SVG element with with a background-image with an offset

由 自闭症网瘾萝莉.ら 提交于 2019-12-03 07:42:10
问题 I want to this this Fill SVG element with with a background-image with an offset, but using Raphael JS. Displaying an rectangle with a background image without the offset is easy. canvas.rect( positionx, positiony, width, height ).attr( {fill: "url('/content/image_set.gif')"} ); The code above will display only the upper-left corner of the image. I want to shift it and display another part of it. How can I do it? 回答1: I'd suggest drawing the image separately from the rect. If you need the

Raphael paper zoom animation

由 狂风中的少年 提交于 2019-12-03 07:34:36
问题 I managed to do some hack in order to zoom raphael paper, as setviewbox wasn't working for me, here is the function I wrote: function setCTM(element, matrix) { var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")"; element.setAttribute("transform", s); } Raphael.fn.zoomAndMove = function(coordx,coordy,zoom) { var svg = document.getElementsByTagName("svg")[0]; var z = zoom; var g = document.getElementById("viewport1"); var p =

Graphael line chart [closed]

由 ↘锁芯ラ 提交于 2019-12-03 06:53:37
问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 4 years ago . Is there a good tutorial for Graphael (special line charts), I currently trying to implement such a graph with grafael http://www.highcharts.com/demo/?example=line-time-series&theme=default unfortunately there is no documentation. 回答1: A useful resource has been Kenny Shen's GitHub repository where he has begun

Raphael - Drawing shapes with mouse

由 本秂侑毒 提交于 2019-12-03 06:29:55
What would be the best way to draw a rectangle or circle for that matter using your mouse ? I just started looking at raphael and it seems I should use, drag? Or mousedown and mouseup ? No sure. I would use mousedown and mouseup events on your canvas/paper. On mouse down you should store the x and y positions of the mousedown, then on mouseup you should use the current mouse positions to calculate width and height. Here is an example, bear in mind thought that I am using JQuery to calculate the mouse positions (if this is not available for you, then you should find another way to get the mouse

Scaling a fill pattern in raphael.js

由 感情迁移 提交于 2019-12-03 06:23:22
问题 paper=Raphael('previewBody',480,480); paper.path({"stroke-width":1},'M0,0 L480,240 L480,480 L240,480 z') .attr('fill','url(bg.png)')) .scale(.5,.5,0,0); My problem is the fill is not scaled with the svg canvas, so proportionally, it ends up as twice the size it was before the scale of the path. Is there any easy way to scale the fill pattern along with the rest of the svg? 回答1: It is note possible to do it by using only the functions of the raphael library. When you apply the scale function

Raphael order objects

由 雨燕双飞 提交于 2019-12-03 05:59:18
I'm trying to order Raphael objects. I don't have the option of deciding when the objects are created, but I'd like to make a group of objects appear behind a group of other objects after they've been created. Can anybody help me do this? Thanks. Group you items in two sets and position the sets relative to each other with insertBefore or insertAfter : var front = paper.set(); front.push(front1, front2); var back = paper.set(); back.push(back1, back2); front.insertBefore(back); Also if you have your items in arrays you can use apply for convenience: var frontItems = [front1, front2]; front

RaphaelJS: Creating click-through elements?

由 雨燕双飞 提交于 2019-12-03 05:40:58
I need to overlay a label on top of multiple clickable elements. I want to be able to click on an element through the label on top of it. Is this possible? If so, how would I accomplish this? In Firefox, Opera and Chrome/Safari you could use pointer-events: none in the style attribute. I'm not sure how that will work in IE where it's VML rather than SVG, you may have to figure out how to adapt Forwarding Mouse Events Through Layers to SVG content. 来源： https://stackoverflow.com/questions/3620561/raphaeljs-creating-click-through-elements

Making paths and images draggable in Raphael js

由 落爺英雄遲暮 提交于 2019-12-03 04:43:53
问题 Is it possible to be able to drag and drop objects other than just circles and rectangles around a page using Raphael js? I want to add in paths and images which you can then move around but its proving tricky. I would like to work this out with Raphael because of its support with touch interfaces. Here is the code <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

Mobile Safari SVG rendering issues with raphaeljs

由 空扰寡人 提交于 2019-12-03 04:43:27
I am working on an animated, interactive graph using raphael that I need to work well on the iPhone. I have 2 minor rendering issues that I'm struggling with. The first is that whenever you click on an svg element that has a click handler attached, mobile safari draws a transparent gray box around it to indicate what was clicked. It's the same thing it does when you click on a hyperlink. The gray box is very ugly in this situation. Is there any css property to tell mobile safari not to do that? The second issue is with animations. For the duration of any animation, mobile safari adds an ugly

html5 canvas - animating an object following a path

由 心不动则不痛 提交于 2019-12-03 03:49:44
问题 I'm a bit new to canvas and such so forgive if it's a trivial question. I'd like to be able to animate an object following a path (defined as bezier path) but I'm not sure how to do it. I've looked at Raphael but I can't work out how to follow the path over time. Cake JS looked promising in the demo, but I'm really struggling the documentation, or lack thereof in this case. Has anyone got some working example of this? 回答1: Use the code on my website from this related question, but instead of
订阅 raphael