mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-03 19:45:44 -05:00
2f5dcce61d
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.
35 lines
1,016 B
HTML
35 lines
1,016 B
HTML
<!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>
|