mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-03 19:45:44 -05:00
f43abe2f32
Noticed that curveto and quadratic bezier curveto can be differentiated by format of the handleIn/handleOut variables in each segment (we think) If either handleIn.x and handleOut.x = 0 OR handleIn.y and handleOut.y = 0, then that means the curve is a simple curveTo tag in SVG. If handleIn.x = -handleOut.x AND handleIn.y = -handleOut.y, then you have a quadriatic Bezier Curveto in SVG (using the Q tag). We *HOPE* and think that that curveTo(through, to) (a method creating an arc that passes through the "through" point and ends at the "to" point) simply creates 2 segments, each with a handleIn and Out, which can be read and put into SVG seperately, making our lives a lot easier. Created more SVG test files. Made RGBConverter more efficient with another method to help reduce copied lines of code.
48 lines
No EOL
1.1 KiB
HTML
48 lines
No EOL
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>Grid</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">
|
|
/////////////////////////////////////////////////////////////////////
|
|
// Values
|
|
|
|
tool.fixedDistance = 10;
|
|
|
|
var values = { size: tool.fixedDistance };
|
|
|
|
/////////////////////////////////////////////////////////////////////
|
|
// Mouse handling
|
|
|
|
var point, path;
|
|
|
|
function getPos(pt) {
|
|
return (pt / values.size).round() * values.size;
|
|
}
|
|
|
|
function onMouseDown(event) {
|
|
point = getPos(event.point);
|
|
path = new Path();
|
|
path.strokeColor = 'black';
|
|
path.add(point);
|
|
}
|
|
|
|
function onMouseDrag(event) {
|
|
var p = getPos(event.point);
|
|
if (point != p) {
|
|
path.add(p);
|
|
point = p;
|
|
}
|
|
var svg = new ExportSVG();
|
|
var svgout = svg.exportPath(path);
|
|
console.log(svgout);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" resize></canvas>
|
|
</body>
|
|
</html> |