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>
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 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 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.