scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Jacob and I added a bit to the exportPath class. The initialize function

Browse source 
was not working correctly and JT said he would fix that. So we initialized
svgObj in the function for the meantime. We added svgRect and svgPoint
objects for testing purposes to figure out the xml svg format. Recovered
points, strokecolor, fillcolor, and stroke width from the input path. The
last thing we need to do for extracting path data is to find the point
definitions for each point in the path. Waiting on response from head
coders to find out what type of path is passed in for simple conversions
(such as: Rectangle path, Circle path, etc.). We added a method called
RGBConverter to covnert colors into hexadecimal format for xml.
This commit is contained in:
skierons 2012-09-16 00:13:14 -04:00
parent 1ccd5199b5
commit 2f5dcce61d
3 changed files with 153 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
examples/Tools/SVGCircles.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Circles</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
<script type="text/paperscript" canvas="canvas">
// All newly created items will receive
// these style properties:
project.currentStyle = {
fillColor: 'white',
strokeColor: 'black'
};
var path;
function onMouseDrag(event) {
// The radius is the distance between the position
// where the user clicked and the current position
// of the mouse.
var radius = (event.downPoint - event.point).length;
path = new Path.Circle(event.downPoint, radius);
var svg = new ExportSVG();
var svgout = svg.exportPath(path);
console.log(svgout);
path.removeOnDrag();
};
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>

34
examples/Tools/SVGStars.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stars</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
<script type="text/paperscript" canvas="canvas">
function onMouseDown(event) {
var hue = Math.random() * 360;
project.currentStyle.fillColor = new HsbColor(hue, 1, 1);
}
function onMouseDrag(event) {
var delta = event.point - event.downPoint;
var radius = delta.length;
var points = 5 + Math.round(radius / 50);
var position = event.downPoint;
var path = new Path.Star(position, points, radius / 2, radius);
var svg = new ExportSVG();
var svgout = svg.exportPath(path);
console.log(svgout);
path.rotate(delta.angle);
// Remove the path automatically before the next mouse drag
// event:
path.removeOnDrag();
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>

89
src/svg/ExportSVG.js
View file

@ -6,16 +6,23 @@
* var svg=document.createElementNS(NS,"svg");
*/
var ExportSVG = function()
{
var svgObj = null; // xml dom object (svg typed)
//var blarg = this;
//initialize the svgObj and what ever else.
function initialize()
/*function initialize()
{
var NS = "http://www.w3.org/2000/svg";
svgObj = document.createElementNS(NS,"svg");
};
console.log(svgObj);
};*/
/**
*
@ -83,8 +90,80 @@ var ExportSVG = function()
*/
this.exportPath = function(path)
{
return svgObj;
//this.initialize();
//console.log(blarg.svgObj);
var NS = "http://www.w3.org/2000/svg";
svgObj = document.createElementNS(NS,"svg");
svgRect = document.createElementNS(NS,"rect");
svgRect.height.baseVal.value = 50;
svgRect.width.baseVal.value = 60;
svgRect.x.baseVal.value = 50;
svgObj.appendChild(svgRect);
svgPoint = document.createElementNS(NS,"point");
svgPoint.setAttribute("x",50);
svgPoint.setAttribute("y",100);
svgObj.appendChild(svgPoint);
svgPath = document.createElementNS(NS, "path");
console.log(svgObj);
var pathClone = path.clone();
var segArray = pathClone.getSegments();
var pointArray = new Array();
for(i = 0; i < segArray.length; i++)
{
pointArray[i] = segArray[i].getPoint();
}
var pointString = "";
for(i = 0; i < pointArray.length; i++)
{
var x = pointArray[i].getX();
x = x - (x % 1);
var y = pointArray[i].getY();
y = y - (y % 1);
if(i === 0)
{
pointString+= "M " + x + " " + y + " ";
}
else
{
pointString+= "L " + x + " " + y + " ";
}
}
if(pathClone.getClosed())
{
pointString += "z";
}
var strokeRed = RGBconverter(pathClone.strokeColor.red);
var strokeGreen = RGBconverter(pathClone.strokeColor.green);
var strokeBlue = RGBconverter(pathClone.strokeColor.blue);
var strokeRGB = "#" + strokeRed + strokeGreen + strokeBlue;
var fillRed = RGBconverter(pathClone.fillColor.red);
var fillGreen = RGBconverter(pathClone.fillColor.green);
var fillBlue = RGBconverter(pathClone.fillColor.blue);
var fillRGB = "#" + fillRed + fillGreen + fillBlue;
svgPath.setAttribute("d", pointString);
svgPath.setAttribute("stroke", strokeRGB);
svgPath.setAttribute("fill", fillRGB);
svgPath.setAttribute("stroke-width",pathClone.strokeWidth);
svgObj.appendChild(svgPath);i
console.log(svgObj);
return svgObj;
};
initialize(); // calls the init function after class is loaded
};
function RGBconverter(deciColor)
{
var decColor = Math.round(deciColor * 255);
var hexColor = decColor.toString(16);
hexColor = hexColor.length > 1? hexColor : "0" + hexColor;
return hexColor;
};
//initialize(); // calls the init function after class is loaded
};