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.
34 lines
1.1 KiB
HTML
34 lines
1.1 KiB
HTML
<!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>
|