<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="huh"></div>
</body>
</html>
var paper = Raphael("huh",500,500);
paper.customAttributes.pathXY = function( x,y ) {
var pathArray = Raphael.parsePathString(this.attr('path'));
var transformArray = ['T', x - this.pathXY('x'), y - this.pathXY('y') ];
return {
path: Raphael.transformPath( pathArray, transformArray)
};
};
Raphael.el.pathXY = function(xy) {
if(this.constructor.prototype == Raphael.st){ // if a set
var positions = [];
this.forEach( function( element ){
var position = ( element.pathXY(xy) ); // recursive for sets of sets
if(position){ // if set, calculate and return average X or Y of set
positions.push(position);
}
});
return eval(positions.join('+')) / positions.length;
} else { // if an element
if(xy == 'x' || xy == 'y'){ // to get x or y of path
xy = (xy == 'x') ? 1 : 2;
var pathPos = Raphael.parsePathString(this.attr('path'))[0][xy];
// console.log(pathPos);
return pathPos;
} else { // to initialise a path's pathXY, for animation
console.log('init',this.pathXY('x'),this.pathXY('y'), this);
this.attr({pathXY: [this.pathXY('x'),this.pathXY('y')]});
}
}
}
Raphael.st.pathXY = Raphael.el.pathXY;
var path = paper.path('M100 100,105 105,95 105,95 95,105 95,100 100');
var path2 = paper.path('m50 50,105 105,-95 -105,95 95,-105 -95,100 100');
var path3 = paper.path('m0 50,105 5,-95 -5,95 95,-5 -5,0 0');
var set = paper.set(path2, path3);
var set2 = paper.set(path);
set2.push(set);
set2.pathXY(); // necessary to avoid pathXY animation hitting NaN
// get path position when you need X or Y to stay the same
set2.animate({pathXY: [150,set2.pathXY('y')]},1000, '<', function(){
set2.animate({pathXY: [set2.pathXY('x'),150]},1000, 'elastic', function(){
set2.animate({pathXY: [50,50]}, 1000, 'bounce');
});
});
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |