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);
Related
i am trying out raphael with javascript and trying to get the hang of it. At the moment i am trying to get it so that when the user hovers over a circle in raphael which i have drawn it will create a simmple hover messge like hi. However i am stuck to an end on this part, i cant seem to do anything about, any help on this would be great.
Javascript:
window.onload= function (){
var paper = new Raphael( 0, 0, 400, 400);
var backGround = paper.rect(0, 0, 400, 400);
backGround.attr({ fill: "orange"});
var face = paper.circle(200,200,100);
face.attr({ fill: "Red"});
};
HTML
<div class= "bot">
<p>Hi there</p>
</div>
Just use the Element.hover() function, as documented on the Raphael website.
Update: The code snippet posted below works if you copy it onto your own computer and run it locally. However, to actually run this snippet on Stack Overflow, it only works on some browsers (e.g. it works on Firefox, but not on Chrome), probably due to the different browsers allowing or not allowing the code snippets to load external libraries, like Raphael.js, as required in this code snippet.
window.onload = function() {
var paper = new Raphael(0, 0, 400, 400);
var backGround = paper.rect(0, 0, 400, 400);
backGround.attr({
fill: "orange"
});
var face = paper.circle(200, 200, 100);
face.attr({
fill: "Red"
});
face.hover(hoverHandler);
};
function hoverHandler() {
alert("hi");
}
<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<div class="bot">
<p>Hi there</p>
</div>
I don't know why, but the clearRect() does not work.
This is a function that is executed every time I click on a panel or every time I change the thickness' value.
//When click on a menu section
$(".menuSection").click(function() {
//Show hide the selected item
$(this).next().toggle();
//hide all the other panels
$(this).next().siblings(".panel").hide();
//To update the values in the colors panel when selected
if ( $(this).prop("id") == "colors" ) {
changeColorBySliders();
}
if ( $(this).prop("id") == "pen" ) {
updatePreview();
}
});
//when thickness slider change:
$("#penPanel input[type=range]").on("input", updatePreview);
The fact is that it draws the line, but if I click it again it's doesn't reset.
var $preview = $("#preview");
var contextPreview = $preview[0].getContext("2d");
//Function to update the pen's preview
function updatePreview() {
console.log($("#thickness").val());
var rgba = $("#mainCanvas").css("background-color");
$("#preview").css("background-color", rgba);
//Resetting the preview
contextPreview.clearRect(0, 0, $preview.width, $preview.height);
//Drawing an example path
contextPreview.beginPath();
contextPreview.moveTo(50, 30);
contextPreview.lineTo(100, 110);
contextPreview.quadraticCurveTo(115, 120, 125, 80);
contextPreview.bezierCurveTo(145, -40, 150, 120, 200, 95);
contextPreview.lineTo(250, 65);
contextPreview.lineWidth = $("#thickness").val();
contextPreview.strokeStyle = color;
contextPreview.stroke();
contextPreview.closePath();
}
Any help?
Solution
I solved the problem using this kind of declaration:
var preview = document.getElementById("preview");
var contextPreview = preview.getContext("2d");
contextPreview.clearRect(0, 0, preview.width, preview.height);
Insted of the jquery one:
var $preview = $("#preview");
var contextPreview = $preview[0].getContext("2d");
Why?
it's because $preview is a jQuery object, $preview.width is therefore a function, so when you called clearRect(), you were actually calling contextPreview.clearRect(0,0, function, function) so your rect dimensions were undefined or 0 so it wasn't clearing a single pixel.
So you can still use jQuery but be sure you call contextPreview.clearRect(0,0, $preview[0].width, $preview[0].height)
var preview = document.getElementById("preview");
var contextPreview = preview.getContext("2d");
contextPreview.clearRect(0,0, $preview[0].width, $preview[0].height)
Special Thanks to Kaiido.
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
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.
I want to let function B work without having set the instruction code to function A. In praktical terms, to show text on top of a rectangle.
In this question Button A is used for creating the 'paper' and a rectangle(which uses the Raphael library). Button B for adding text on top of the rectangle. The HTML code looks like this:
<button onClick="func.A()">Func A</button>
<button onClick="func.B()">Func B</button>
The JavaScript code looks like this:
var func = (function functie($) {
return {
A: function() {
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates rectangle
var bg = paper.rect(0, 0, 320, 200);
// Sets the fill attribute of the circle to red (#f00)
bg.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
bg.attr("stroke", "#fff");
},
B: function() {
var t = paper.text(40, 15, "");
t.attr('text',"new text here");
t.attr();
};
})();
The problem is that when the instruction code of function B (var t = paper.text(40, 15, ""); and so on), are placed in function B, that the text i try to add won't be added to the rectangle.
If the instruction code of function B are placed in function A, then it will work, but this is not what i want. I want to let function B work without having set the instruction code to function A.
I hope this problem is clear enough to understand.
When you declare "var paper" in function A, that variable is local to function A. If you want to share state information between function calls, you have to store the state information in properties of your object, rather than local variables:
var func = (function functie($) {
return {
paper: null,
A: function() {
// Creates canvas 320 × 200 at 10, 50
this.paper = Raphael(10, 50, 320, 200);
// Creates rectangle
var bg = paper.rect(0, 0, 320, 200);
// Sets the fill attribute of the circle to red (#f00)
bg.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
bg.attr("stroke", "#fff");
},
B: function() {
var t = this.paper.text(40, 15, "");
t.attr('text',"new text here");
t.attr();
};
})();