mirror of
https://github.com/rough-stuff/rough.git
synced 2026-04-22 03:00:28 -04:00
added points data
This commit is contained in:
Preet Shihn
104
dist/rough.js
vendored
104
dist/rough.js
vendored
@@ -245,6 +245,92 @@ class ParsedPath {
|
||||
this.segments = [];
|
||||
this.d = d || "";
|
||||
this.parseData(d);
|
||||
this.processPoints();
|
||||
}
|
||||
|
||||
processPoints() {
|
||||
let first = null, currentPoint = [0, 0];
|
||||
for (let i = 0; i < this.segments.length; i++) {
|
||||
let s = this.segments[i];
|
||||
switch (s.key) {
|
||||
case 'M':
|
||||
case 'L':
|
||||
case 'T':
|
||||
s.point = [s.data[0], s.data[1]];
|
||||
break;
|
||||
case 'm':
|
||||
case 'l':
|
||||
case 't':
|
||||
s.point = [s.data[0] + currentPoint[0], s.data[1] + currentPoint[1]];
|
||||
break;
|
||||
case 'H':
|
||||
s.point = [s.data[0], currentPoint[1]];
|
||||
break;
|
||||
case 'h':
|
||||
s.point = [s.data[0] + currentPoint[0], currentPoint[1]];
|
||||
break;
|
||||
case 'V':
|
||||
s.point = [currentPoint[0], s.data[0]];
|
||||
break;
|
||||
case 'v':
|
||||
s.point = [currentPoint[0], s.data[0] + currentPoint[1]];
|
||||
break;
|
||||
case 'z':
|
||||
case 'Z':
|
||||
if (first) {
|
||||
s.point = [first[0], first[1]];
|
||||
}
|
||||
break;
|
||||
case 'C':
|
||||
s.point = [s.data[4], s.data[5]];
|
||||
break;
|
||||
case 'c':
|
||||
s.point = [s.data[4] + currentPoint[0], s.data[5] + currentPoint[1]];
|
||||
break;
|
||||
case 'S':
|
||||
s.point = [s.data[2], s.data[3]];
|
||||
break;
|
||||
case 's':
|
||||
s.point = [s.data[2] + currentPoint[0], s.data[3] + currentPoint[1]];
|
||||
break;
|
||||
case 'Q':
|
||||
s.point = [s.data[2], s.data[3]];
|
||||
break;
|
||||
case 'q':
|
||||
s.point = [s.data[2] + currentPoint[0], s.data[3] + currentPoint[1]];
|
||||
break;
|
||||
case 'A':
|
||||
s.point = [s.data[5], s.data[6]];
|
||||
break;
|
||||
case 'a':
|
||||
s.point = [s.data[5] + currentPoint[0], s.data[6] + currentPoint[1]];
|
||||
break;
|
||||
}
|
||||
if (s.key === 'm' || s.key === 'M') {
|
||||
first = null;
|
||||
}
|
||||
if (s.point) {
|
||||
currentPoint = s.point;
|
||||
if (!first) {
|
||||
first = s.point;
|
||||
}
|
||||
}
|
||||
if (s.key === 'z' || s.key === 'Z') {
|
||||
first = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get closed() {
|
||||
if (typeof this._closed === 'undefined') {
|
||||
this._closed = false;
|
||||
for (let s of this.segments) {
|
||||
if (s.key.toLowerCase() === 'z') {
|
||||
this._closed = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return this._closed;
|
||||
}
|
||||
|
||||
parseData(d) {
|
||||
@@ -328,7 +414,6 @@ class RoughPath {
|
||||
constructor(d) {
|
||||
this.d = d;
|
||||
this.parsed = new ParsedPath(d);
|
||||
|
||||
this._position = [0, 0];
|
||||
this.bezierReflectionPoint = null;
|
||||
this.quadReflectionPoint = null;
|
||||
@@ -339,6 +424,23 @@ class RoughPath {
|
||||
return this.parsed.segments;
|
||||
}
|
||||
|
||||
get closed() {
|
||||
return this.parsed.closed;
|
||||
}
|
||||
|
||||
get points() {
|
||||
if (!this._points) {
|
||||
const points = [];
|
||||
for (let s of this.parsed.segments) {
|
||||
if (s.point) {
|
||||
points.push(s.point);
|
||||
}
|
||||
}
|
||||
this._points = points;
|
||||
}
|
||||
return this._points;
|
||||
}
|
||||
|
||||
get first() {
|
||||
return this._first;
|
||||
}
|
||||
|
||||
2
dist/rough.min.js
vendored
2
dist/rough.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -2,7 +2,8 @@
|
||||
|
||||
<head>
|
||||
<title>RoughJS sample</title>
|
||||
<script src="../../dist/rough.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.js"></script>
|
||||
<script src="../../dist/rough.min.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
border: 1px solid #000;
|
||||
@@ -36,7 +37,7 @@
|
||||
fill: 'blue'
|
||||
});
|
||||
await rough.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });
|
||||
await rough.path('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z', { fill: 'purple' });
|
||||
await rough.path('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z', { fill: 'purple', hachureAngle: 60, hachureGap: 5 });
|
||||
await rough.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red' });
|
||||
await rough.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { fill: 'blue' });
|
||||
})();
|
||||
|
||||
53
examples/2.0/test3.html
Normal file
53
examples/2.0/test3.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>RoughJS sample</title>
|
||||
<!-- <script src="https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.js"></script> -->
|
||||
<script src="../../dist/rough.js"></script>
|
||||
<script src="//d3js.org/d3.v3.min.js"></script>
|
||||
<script src="//d3js.org/topojson.v1.min.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
path {
|
||||
stroke: #000;
|
||||
fill: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="canvas" width="960" height="500"></canvas>
|
||||
|
||||
<script>
|
||||
(async () => {
|
||||
const rough = new RoughCanvas(document.getElementById('canvas'));
|
||||
|
||||
const width = 960, height = 500;
|
||||
|
||||
const projection = d3.geo.albersUsa()
|
||||
.scale(1070)
|
||||
.translate([width / 2, height / 2]);
|
||||
|
||||
const path = d3.geo.path()
|
||||
.projection(projection);
|
||||
|
||||
d3.json("./us.json", async (error, us) => {
|
||||
if (error) throw error;
|
||||
let topo = topojson.feature(us, us.objects.states).features;
|
||||
await rough.path(path(topo[2]), { simplify: true });
|
||||
// await rough.path(path(topo[9]), { simplify: true });
|
||||
// await rough.path(path(topo[12]));
|
||||
// await rough.path(path(topo[13]));
|
||||
// for (let feature of topo) {
|
||||
// await rough.path(path(feature));
|
||||
// }
|
||||
});
|
||||
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
2
examples/2.0/us.json
Normal file
2
examples/2.0/us.json
Normal file
File diff suppressed because one or more lines are too long
105
src/path.js
105
src/path.js
@@ -38,6 +38,93 @@ class ParsedPath {
|
||||
this.segments = [];
|
||||
this.d = d || "";
|
||||
this.parseData(d);
|
||||
this.processPoints();
|
||||
}
|
||||
|
||||
processPoints() {
|
||||
let first = null, prev = null, currentPoint = [0, 0];
|
||||
for (let i = 0; i < this.segments.length; i++) {
|
||||
let s = this.segments[i];
|
||||
switch (s.key) {
|
||||
case 'M':
|
||||
case 'L':
|
||||
case 'T':
|
||||
s.point = [s.data[0], s.data[1]];
|
||||
break;
|
||||
case 'm':
|
||||
case 'l':
|
||||
case 't':
|
||||
s.point = [s.data[0] + currentPoint[0], s.data[1] + currentPoint[1]];
|
||||
break;
|
||||
case 'H':
|
||||
s.point = [s.data[0], currentPoint[1]];
|
||||
break;
|
||||
case 'h':
|
||||
s.point = [s.data[0] + currentPoint[0], currentPoint[1]];
|
||||
break;
|
||||
case 'V':
|
||||
s.point = [currentPoint[0], s.data[0]];
|
||||
break;
|
||||
case 'v':
|
||||
s.point = [currentPoint[0], s.data[0] + currentPoint[1]];
|
||||
break;
|
||||
case 'z':
|
||||
case 'Z':
|
||||
if (first) {
|
||||
s.point = [first[0], first[1]];
|
||||
}
|
||||
break;
|
||||
case 'C':
|
||||
s.point = [s.data[4], s.data[5]];
|
||||
break;
|
||||
case 'c':
|
||||
s.point = [s.data[4] + currentPoint[0], s.data[5] + currentPoint[1]];
|
||||
break;
|
||||
case 'S':
|
||||
s.point = [s.data[2], s.data[3]];
|
||||
break;
|
||||
case 's':
|
||||
s.point = [s.data[2] + currentPoint[0], s.data[3] + currentPoint[1]];
|
||||
break;
|
||||
case 'Q':
|
||||
s.point = [s.data[2], s.data[3]];
|
||||
break;
|
||||
case 'q':
|
||||
s.point = [s.data[2] + currentPoint[0], s.data[3] + currentPoint[1]];
|
||||
break;
|
||||
case 'A':
|
||||
s.point = [s.data[5], s.data[6]];
|
||||
break;
|
||||
case 'a':
|
||||
s.point = [s.data[5] + currentPoint[0], s.data[6] + currentPoint[1]];
|
||||
break;
|
||||
}
|
||||
if (s.key === 'm' || s.key === 'M') {
|
||||
first = null;
|
||||
}
|
||||
if (s.point) {
|
||||
currentPoint = s.point;
|
||||
if (!first) {
|
||||
first = s.point;
|
||||
}
|
||||
}
|
||||
if (s.key === 'z' || s.key === 'Z') {
|
||||
first = null;
|
||||
}
|
||||
prev = s;
|
||||
}
|
||||
}
|
||||
|
||||
get closed() {
|
||||
if (typeof this._closed === 'undefined') {
|
||||
this._closed = false;
|
||||
for (let s of this.segments) {
|
||||
if (s.key.toLowerCase() === 'z') {
|
||||
this._closed = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return this._closed;
|
||||
}
|
||||
|
||||
parseData(d) {
|
||||
@@ -121,7 +208,6 @@ export class RoughPath {
|
||||
constructor(d) {
|
||||
this.d = d;
|
||||
this.parsed = new ParsedPath(d);
|
||||
|
||||
this._position = [0, 0];
|
||||
this.bezierReflectionPoint = null;
|
||||
this.quadReflectionPoint = null;
|
||||
@@ -132,6 +218,23 @@ export class RoughPath {
|
||||
return this.parsed.segments;
|
||||
}
|
||||
|
||||
get closed() {
|
||||
return this.parsed.closed;
|
||||
}
|
||||
|
||||
get points() {
|
||||
if (!this._points) {
|
||||
const points = [];
|
||||
for (let s of this.parsed.segments) {
|
||||
if (s.point) {
|
||||
points.push(s.point);
|
||||
}
|
||||
}
|
||||
this._points = points;
|
||||
}
|
||||
return this._points;
|
||||
}
|
||||
|
||||
get first() {
|
||||
return this._first;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user