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.
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've mocked up an MCVE that demonstrates the problem. If you click on the red square then it'll gradually decrease in size (over roughly ~10 seconds) to nothing and then get removed.
However, the animation is bottom up rather than the desired top down.
Is there a way to do this using the standard fabricjs .animate method?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.min.js"></script>
<script>
$(function() {
canvas = new fabric.Canvas('test');
canvas.observe('mouse:down', function(e) {
e.target.animate('height', 0, {
onChange: canvas.renderAll.bind(canvas),
duration: 10000,
onComplete: function() {
e.target.remove();
canvas.renderAll();
}
});
});
var rect = new fabric.Rect({
top : 100,
left : 100,
width : 200,
height : 200,
fill : 'red',
lockUniScaling: true,
lockRotation: true,
hasControls: false
});
canvas.add(rect);
canvas.renderAll();
});
</script>
<title>Test Test</title>
</head>
<body>
<canvas id="test" height="1000" width="1000"></canvas>
</body>
</html>
Try it:
canvas.observe('mouse:down', function (e) {
if (!e.target)
return;
e.target.animate('height', 0, {
onChange : canvas.renderAll.bind(canvas),
duration : 10000,
onComplete : function () {
e.target.remove();
canvas.renderAll();
}
});
//It is suitable if you know initial height...
e.target.animate('top', 300, {// initialHeight(100) + initialTop(200)
duration : 10000,
onChange : canvas.renderAll.bind(canvas),
});
});
example
example 2
This method is not optimal, but it works!
Need to do custom animate that will change height and top.
I'm new to the Raphael, so I'm trying to learn some things through the tutorials that are available.
I'm stuck with a problem, where I simply copy/paste the Source Code from Raphael's site:
http://g.raphaeljs.com/piechart2.html
I right-clicked to see the source code and I copy/pasted in my notepad++. I did add the needed JS and CSS files, everything is the same.
MY CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="demo.css" media="screen">
<link rel="stylesheet" href="demo-print.css" media="print">
<script src="raphael-min.js"></script>
<script src="g.raphael-min.js"></script>
<script src="g.pie-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="pie"></div>
<script>
<script type="text/javascript">
window.onload = function () {
var r = Raphael("holder"),
pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]});
r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" });
/*pie.hover(function () {
this.sector.stop();
this.sector.scale(1.1, 1.1, this.cx, this.cy);*/
/*if (this.label) {
this.label[0].stop();
this.label[0].attr({ r: 7.5 });
this.label[1].attr({ "font-weight": 800 });
}
}, function () {
this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
if (this.label) {
this.label[0].animate({ r: 5 }, 500, "bounce");
this.label[1].attr({ "font-weight": 400 });
}*/
});
};
</script>
</head>
<body class="raphael" id="g.raphael.dmitry.baranovskiy.com">
<div id="holder"></div>
<p>
Pie chart with legend, hyperlinks on two first sectors and hover effect.
</p>
<p>
Demo of gRaphaël JavaScript library.
</p>
</body>
</html>
Ignore the "commented lines", this was me trying to debugg my problem. I get the background, but the chart just won't display.
Any help would be appreciated.
You should check for your browser settings for Active x controls.There might be appearing a prompt message by the browser when you try to load the page.
Something like:-
"To help protect your security,Internet Explorer has restricted this page from running scripts or ActiveX controls that could access your computer.click here for options..."
You need to click on the message & select option- 'Allow Blocked Contents'
As I don't see any problem with your canvas creation or the coordinates.
Give your canvas dimensions.
Instead of:
var r = Raphael("holder"),
Try using:
var r = Raphael("holder", 0, 0, 520, 440),
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'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.