Skip to content

Instantly share code, notes, and snippets.

@funvill funvill/index.html
Created Apr 27, 2014

Embed
What would you like to do?
Instructable - Javascript generated laser cut jewellery - Step 8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Javascript generated laser cut pendants</title>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="raphael.export.js"></script>
</head>
<body>
<a id='downloadLink'>Download</a><br />
<div id="canvas"></div>
<script>
var paper;
/**
* DrawCircle( x, y, r, size, brush )
* Draw two circles, one inside of the other
*
* Parameters:
* X - X Offset to the center of the circle
* Y - Y Offset to the center of the circle
* R - The radius of the circle.
* Size - The size between the two lines of the circle.
* Brush - The brush to use to draw these two circles.
*/
function DrawCircle( x, y, r, size, brush ) {
paper.ellipse( x, y, r-(size/2), r-(size/2)).attr( brush );
paper.ellipse( x, y, r+(size/2), r+(size/2)).attr( brush );
}
/**
* Create a link that can be used to download the SVG file
*/
function CreateDownloadLink( linkName ) {
// Create the download link.
var svgString = paper.toSVG();
var a = document.getElementById(linkName);
a.download = 'mySvg.svg';
a.type = 'image/svg+xml';
bb = new Blob([svgString]);
a.href = (window.URL || webkitURL).createObjectURL(bb);
}
window.onload = function () {
// Defined units of measurement in Pixels.
var ONE_MM_IN_PX = 4 ;
var ONE_CM_IN_PX = 38 ;
// Brushes
var BRUSH_CUT_FIRST = {fill: "none", stroke: "#000000", "stroke-width": "1" } ;
var BRUSH_CUT_SECOND = {fill: "none", stroke: "#0000FF", "stroke-width": "1" } ;
var BRUSH_ETCH = {fill: "none", stroke: "#00FF00", "stroke-width": "5" } ;
// Make a working area that is 15cm x 15cm.
var CANVAS_HEIGHT = ONE_CM_IN_PX*15;
var CANVAS_WIDTH = ONE_CM_IN_PX*15;
// Create the Raphael object to hold the SVG elements.
// I like to start away from the top left conner to give the image a margin.
// http://raphaeljs.com/reference.html#Raphael
paper = Raphael(100, 100, CANVAS_WIDTH, CANVAS_HEIGHT);
DrawCircle(ONE_CM_IN_PX+10,ONE_CM_IN_PX+10,ONE_CM_IN_PX, ONE_MM_IN_PX*2, BRUSH_CUT_FIRST ) ;
DrawCircle(ONE_CM_IN_PX+10,ONE_CM_IN_PX*2+10,ONE_CM_IN_PX, ONE_MM_IN_PX*2, BRUSH_CUT_FIRST ) ;
DrawCircle(ONE_CM_IN_PX*2+10,ONE_CM_IN_PX+10,ONE_CM_IN_PX, ONE_MM_IN_PX*2, BRUSH_CUT_FIRST ) ;
DrawCircle(ONE_CM_IN_PX*2+10,ONE_CM_IN_PX*2+10,ONE_CM_IN_PX, ONE_MM_IN_PX*2, BRUSH_CUT_FIRST ) ;
CreateDownloadLink( 'downloadLink' );
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.