I'm trying to put an image inside a circle but no success. This is my code:
//Elms.raphael() is my stage.
var circle = Elms.raphael().circle( 730, 200, 0 );
circle.attr( { fill : 'url(myImg.jpg)' } );
setTimeout( function()
{
circle.animate( { 'stroke' : '#000', r : 90, 'stroke-width' : '5' }, 300 );
}, 250 );
Instead of put the image in the circle It get colored with black ("#333"). I also tried to make an image-object but still doesn't work.
A little help please?
Another way to do, if you have separate image and want to bring it over you circle object.
This makes the whole image appear with smaller size that fits you circle. DEMO
var r = new Raphael(10,10, 500, 500);
var c = r.circle(200, 200, 80).attr({stroke: 'red', "stroke-width" : 3});
var img = r.image("http://www.eatyourcareer.com/wp-content/uploads/2012/06/ok-256x2561.png", 100, 105, 200, 200);
Here's a link to how I created a circle with an image in it:
jsfiddle
var paper = Raphael(document.getElementById("test"), 320, 200);
var circle = paper.circle(100, 100, 50);
circle.attr({
fill: 'url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-220px-SIPI_Jelly_Beans_4.1.07.tiff.jpg)'
});
I left the animate out entirely to keep it as basic as I could. It seems to work fine and is very similar to your code. If you cannot see it in the example it may be a browser issue.
Related
I want to transform a rectangle (position, scale, and angle) that has a mask.
I created a fiddle file to demonstrate my problem.
http://jsfiddle.net/MichaelSel/vgw3qxpg/2/
Click the green rectangle, and see how it moves in relationship to the circle on top of it. The rectangle is moving and the circle is stationary. This is how I want to objects to act.
But now click the button on top.
The circle is now a mask for the green rectangle, now when you press it, you can see that that the transformations are applied to the mask as well. (the circle doesn't stay stationary like when it wasn't a mask).
I know that more often then not, you want to treat a mask this way, but for my app I want the opposite.
I was able to overcome this problem by creating an opposite movement in the blue example.
With that, my demo is very simple and I am looking to implement this in a big app. Is there a way to achieve what I want without all the hassle?
This is the code for the green(bad) example:
s = Snap("#player")
rect = s.rect(100, 100, 100, 100).attr({"fill" : "green" })
circle = s.circle(200, 200, 50).attr({"fill" : "white" })
rect.attr("mask",circle)
rect.click(function () {
rect.transform("t20,10s1.1...")
})
This is the code for the blue (good) example:
rect2 = s.rect(300, 100, 100, 100).attr({ "fill": "blue" })
circle2 = s.circle(400, 200, 50).attr({ "fill": "white" })
rect2.attr("mask", circle2)
rect2.click(function () {
rect2.transform("t20,10s1.1...")
circle2.transform("t-20,-10s"+1/1.1 + "...")
})
Any suggestions?
Thank you.
If you put the rectangle in a group, and then apply the mask to the group, you can transform the rect any way you like without affecting the mask.
s = Snap("#player")
rect = s.rect(100, 100, 100, 100).attr({"fill" : "green" })
g = s.group(rect);
circle = s.circle(200, 200, 50).attr({"fill" : "white" })
rect.click(function () {
rect.transform("t20,10s1.1...")
})
$("#myButton").click(function () {
g.attr("mask",circle)
})
http://jsfiddle.net/vgw3qxpg/3/
Hi here's my Raphael js to create some rectangles on a map svg
var rsr = Raphael('map', '600', '600');
var houses = [];
var houses_a = rsr.rect(433.6, 29.4, 100, 100);
houses_a.attr({x: '433.6',y: '29.4',fill: '#FFFFFF',stroke: '#000000',"stroke-width": '5',"stroke-miterlimit": '10','stroke-opacity': '1'}).data({'id': 'houses_a', 'house': 'House A'});
houses.push(houses_a);
i can change the color of the rectangle by
houses_a.node.setAttribute('fill', "red");
but when try to do
houses_a.node.setAttribute('fill', "apple.png");
or
houses_a.node.setAttribute('src', "apple.png");
it won't work.
Is there any other ways?
I'm not quite sure why you are using element.node.setAttribute rather than element.attr(); There are sometimes reasons, but not sure from the above.,
It depends what you are actually trying to do, it would help if there was a jsfiddle of what you want.
You could use this for example...to create a rect/image
var p = Raphael("paper", 800,800);
var img = p.image("http://svg.dabbles.info/tux.png", 10, 10, 300, 300)
.attr({ "clip-rect": "20,20,300,300" });
jsfiddle
Im a beginner to Raphael. Can anyone show me how I can do a donut/radial chart, with animation, similar to these.
http://dribbble.com/shots/670348-Segment-Graphs
Im working at it now. So far Ive got this far. I will update as I make progress. My sumbling block right now is animating a change in color for the outer ring.
window.onload = function () {
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle1 = paper.circle(50, 40, 40);
var circle2 = paper.circle(50, 40, 20);
circle2.attr("fill", "#fff");
circle2.attr("stroke", "#fff");
circle1.attr("fill", "#336699");
circle1.attr("stroke", "#fff");
}
Credits:
On the raphael website there is an example that uses arcs. There is another question on stackoverflow with a similar topic: drawing centered arcs in raphael js. The accepted answer there has a simplified and commented version of the most important parts of the code, plus there is a jsfiddle link showing the code in action: http://jsfiddle.net/Bzdnm/2/
So what I did: I took the code from the linked question, combined it with eve, another javascript library made by the creator of RaphaelJS and what I got was this: http://jsfiddle.net/cristighenea/aP7MK/
At a glance:
1.after the arc is created we rotate it 180 degrees and begin animating it:
theArc.rotate(180, 100, 100).animate({
arc: [100, 100, amount, 100, 40]
}, 1900, function(){
//animation finish callback goes here
});
2.using eve we bind an event to *raphael.anim.frame.**
3.each time the event is fired we update the text in the middle with the new value of the arc
If you have any questions let me know
I am animating a circle using Raphael. When the circle is large I get artifacts around the circle when its moving. It seems to be something of a clipping / redraw region issue and wondered if there was a work around?
It seems to be OK in firefox (if a little jerky) and appears very reliably in Chrome. It also is exacerbated by using opacity on the fill property i.e. rgba(255,0,0,0.7)
Here is a jsFiddle showing the issue. Just click around the paper on the right to move the circle.
Code:
var discattr = {
fill: "#666",
stroke: "none",
width: 35
};
var paper = Raphael("svgcontainer", 400, 400);
circle = paper.circle(150, 150, discattr.width, discattr.width).attr({
stroke: "none",
fill: "rgba(255,0,0,0.7)"
});
var coords = []
var animateCircle = function(coords) {
if (!coords.length) return;
var nextCoords = coords.shift()
var move = Raphael.animation(nextCoords, 500, "linear", function() {animateCircle(coords)});
circle.animate(move);
}
$("#svgcontainer").on("mouseup", function(e) {
coords.push({cx: e.pageX, cy: e.pageY})
animateCircle(coords);
});
Buffering is a technique used to prevent animation artifacts (tearing, as JamWaffles points out). If you look at the answer to this Stack Overflow question you'll find information about an SVG setting to turn on buffering, but so far it doesn't appear to be supported by major browsers.
I'm trying to move a text via animation using raphael's print(), but it doesn't work:
var paper = Raphael(document.getElementById("stage"), 640, 480);
var text = paper.print(300, 200, "Test Text", paper.getFont("Yanone"), 50);
text.animate({
y: 400
}, 1000);
Anyone have ideas what I may be missing?
I think you should use the text function instead of the print function if you want to animate it later. I'm not sure why but it works ...
Here is an example with both ways of doing it:
var paper = Raphael("canvas", 640, 480);
var fonts = [0, paper.getFont("DIN")];
//using print
var p = paper.print(70, 150, "Custom fonts", fonts[1], 20).attr({fill: "#f00"});
//using text (font-family is the same as in getFont)
var t = paper.text(100, 150, "Custom fonts")
t.attr({"font-family": "DIN", "font-size":50, "opacity": 0.5});
t.attr({"fill": "#000"});
And on the second one you can do this for example :
t.animate({"font-size":40,"fill":"#0f0"},2000);
t.animate({"x":150},5000);