I'm creating some circles using Raphael. When a user clicks a button, I want to animate these circles (by growing their radius). How do I do this?
For example, here's my example code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
$(function() {
var paper = new Raphael("canvas_container", 300, 150);
paper.circle(50, 75, 30);
paper.circle(150, 75, 30);
$("button").click(function() {
$("circle").each(function(i) {
this.animate({ r: 100 }, 500); // Doesn't work.
});
});
});
</script>
</head>
<body>
<div id="canvas_container"></div>
<button>Click me to animate the circles</button>
</body>
</html>
[In general, I'm not clear what is the difference between the following two variables:
var c = paper.circle(50, 75, 30); // Raphael circle
$("circle").first(); // using jQuery to grab that Raphael circle
Is the jQuery object a wrapper around the Raphael circle?]
Reading through the Raphaël Reference, it seems that you can do this using Raphaël's own Event methods
circle.click(function (event) {
this.animate({ r: 100 }, 500);
});
The same part of the documentation also notes that you can use libraries like jQuery, but you have to pass in the node, like this:
$(circle.node)
Where circle is the object returned from the paper.circle call.
In your case, however, I think the following code will work:
var paper = new Raphael("canvas_container", 300, 150),
circles = [];
circles.push(paper.circle(50, 75, 30));
circles.push(paper.circle(150, 75, 30));
$("button").click(function() {
$.each(circles, function(i, c){
c.animate({ r: 100 }, 500);
});
});
Your selector "circle" isn't targeting anything - there's no circle element for you to target. However, you could do this:
circle1 = paper.circle(50, 75, 30);
circle2 = paper.circle(150, 75, 30);
$("button").click(function() {
circle1.animate({ r: 100 }, 500);
circle2.animate({ r: 100 }, 500);
});
I couldn't tell you if you can animate() the circles based on the radius, but at the very least this gives you a jQuery object to work with.
Related
Everything works great with jCanvas except for one thing. I can't get setPixels () to work, when I run the code in Chrome and Safari, nothing happens.
I have copied the example code from the Sandbox on jCanvas website (where everything works when I look in the browser).
Anyone have a suggestion on what I may have done wrong?
<canvas id="canvas" width="520" height="520"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="http://projects.calebevans.me/jcanvas/resources/jcanvas/jcanvas.js"></script>
<script type="text/javascript">
function invert() {
$(this).setPixels({
x: 150, y: 100,
width: 220, height: 138,
// loop through each pixel
each: function(px) {
px.r = 255 - px.r;
px.g = 255 - px.g;
px.b = 255 - px.b;
}
});
}
$('canvas').drawImage({
source: 'images/fish.jpg',
x: 150, y: 100,
// Invert image color when image loads
load: invert
});
</script>
I believe I have a syntax error, but I have tried everything and can't figure this out. I am using the Raphael Javascript vector graphics library, and trying to draw a black line from 170, 170 to 150, 150, but nothing is being displayed. Can anyone tell why?
<html>
<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>
</head>
<body>
<div id="sample-2" style=" background-color:blue; width:500px;"></div>
<script type="text/javascript">
var paper = Raphael("sample-2", 900, 500);
//var curvePath = paper.path("M100,100 L400,400 C500,400 500,100 400,100");
//curvePath.attr({fill:"blue", stroke:"black"});
//var circle = paper.circle(175, 175, 50);
var newpath = paper.path({type:"path", path:"M170, 170 L150, 150", stroke:"black"});
//circle.attr({"fill": "orange"});
//circle.attr({"stroke": "black"});
</script>
</body>
</html>
You're misusing the Paper.path() constructor. Call it with a single string argument, representing the path string:
var newpath = paper.path("M170, 170 L150, 150");
If you wish to change the path's attributes, e.g. stroke color, fill, fonts use the attr() method, like so:
newpath.attr({
'stroke' : 'black',
'stroke-width' : 3
});
Raphaël Reference:
Paper.path()
Element.attr()
I am new to Raphael and am trying to do something very simple, but failing miserably.
I am trying to replicate the animation at this link This is the code I have so far:
<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src=" src="jquery-1.7.2.js"></script>
</head>
<body>
<div id="draw-here-raphael" style="height: 200px; width: 400px; background: #666;">
</div>
<script type="text/javascript">
//all your javascript goes here
var r = new Raphael("draw-here-raphael", 400, 200),
// Store where the box is
position = 'left',
// Make our pink rectangle
rect = r.rect(20, 20, 50, 50).attr({"fill": "#fbb"});
// Note JQuery is adding the mouseover. SVG == html nodes
$(rect.node).mouseover(function () {
if (position === 'left') {
rect.animate({x: 300, y: 100}, 400, "<>");
position = 'right';
} else {
rect.animate({x: 20, y: 20 }, 800, "bounce");
position = 'left';
}
});
// Make that sucker rotate
setInterval(function () {
rect.rotate(1);
}, 10);
</script>
</body>
</html>
I have downloaded jquery and have it in the same folder as the Raphael. The code that isn't working is the commented code talking about jquery adding the mouseover. When I add that code the rectangle doesn't rotate anymore. It is just stationary. If someone can please help me with this animation I would appreciate it.
Thanks
You have an error in your code:
<script src=" src="jquery-1.7.2.js"></script>
Change it to:
<script src="jquery-1.7.2.js"></script>
That should correct your problem with jQuery.
I've a problem which deals with canvas.
I would like to use kinetic to use mobile events (most particularly for draggable) and I would also like to use the clip() function at the same time.
Here is my code :
<!DOCTYPE HTML>
<html>
<head>
<style>
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="kinetic-v3.9.4.js"></script>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container: "container",
width: 708,
height: 500
});
var layer = new Kinetic.Layer();
var circle1 = new Kinetic.Circle({
x: 150,
y: 150,
radius: 75,
fill: "red",
draggable: true
});
var circle2 = new Kinetic.Circle({
x: 350,
y: 150,
radius: 75,
fill: "blue",
});
layer.add(circle2);
layer.add(circle1);
stage.add(layer);
};
</script>
</head>
<body onmousedown="return false;">
<div id="container"></div>
</body>
</html>
I've the first circle draggable but I would like to use it and the clip function but I don't really know how to do it. In addition, I tried to get the 2d context like this:
var context = this.getContext();
But it didn't work. If there's someone that can help me thanks.
I also saw this example but it doesn't work with mobile devices.
The reason why the example you mentioned doesn't work on mobile is because its only using mouse event handlers:
stage.on("mousemove", function(){})
But you'll need to add touch events like this:
stage.on("mousemove touchmove", function(){})
touchstart, touchmove, touchend
Good luck!
I'm trying to make a kinetic canvas where I can add pictures from another source dynamically and I wanted a grid in the background so I used the kinetic.rect from kinetic v3.8.2.
The images needs to be draggable, from kinetic v.3.6.0, but if I set draggable when having v3.8.2 active it breaks.
"config is undefined" according to FireBug.
"img.kinetic.draggable is not a method" says FireBug.
Is there a fix for this?
Can you post a small example? There have been changes to the Kinetic API. Here is a draggable image with 3.8.2:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='js/kinetic/kinetic-v3.8.2.js'></script>
<script type='text/javascript'>
window.onload = function () {
var stage = new Kinetic.Stage('container', 400, 300);
var layer = new Kinetic.Layer({
name: 'someLayer'
});
var logo = new Image();
logo.onload = function() {
var myImage = new Kinetic.Image({
x: stage.width / 2 - (logo.width / 2)
, y: stage.height - logo.height - 5
, image: logo
, width: logo.width
, height: logo.height
});
myImage.draggable(true)
layer.add(myImage);
layer.draw();
}
logo.src = "\./resources/images/ccs_logo.png";
stage.add(layer)
}
</script>
</head>
<body onmousedown="return false;" bgcolor=#000000>
<div id="container">
</div>
</body>
</html>
Most notably, configs were recently introduced for class instantiation. A Kinetic rectangle used to be defined like so:
var rect = new Kinetic.Rectangle(function () {
//do drawing stuff here
});
But now it is defined with a config (an object literal):
var rect = new Kinetic.Rectangle({
x: 0,
y: 0,
height: 20,
width: 20
});
You can see examples in the docs; also check out the updated KineticJS Tutorials.