From 79d8a72e6eab9ed8417e0d01779b29c02547440f Mon Sep 17 00:00:00 2001
From: "Wonko T. Sane" <42@wonko.de>
Date: Wed, 4 Mar 2020 17:56:54 +0100
Subject: [PATCH] Read path from externel svg
---
index.html | 102 +++++++++++++++++++++++++++++++--------------
path.svg | 118 +++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 189 insertions(+), 31 deletions(-)
create mode 100644 path.svg
diff --git a/index.html b/index.html
index 76e0ff5..8f02719 100644
--- a/index.html
+++ b/index.html
@@ -7,13 +7,13 @@
circle {
fill: steelblue;
stroke: #fff;
- stroke-width: 3px;
+ stroke-width: 1px;
}
path {
fill: none;
stroke: #000;
- stroke-width: 1px;
+ stroke-width: 0px;
}
</style>
@@ -22,22 +22,70 @@
<body>
-
-
<script src="https://d3js.org/d3.v5.min.js"></script>
+ <div id='arrows'></div>
<script>
- var svg = d3.select("body").append("svg")
- .attr("width", 1000)
+
+ var arr_div = document.getElementById("arrows");
+ var width = arr_div.clientWidth;
+ var height = arr_div.clientHeight;
+
+
+
+ function arrows(svg_selector = "", path_id = "", segments = 8, thickness = 5) {
+ console.log(svg_selector);
+ if (svg_selector === "") {
+ var svg = d3.select("svg");
+ } else {
+ var svg = d3.select(svg_selector);
+ }
+ if (path_id === "") {
+
+ var path = svg.select("path").node();
+ } else {
+ var path = svg.select("#"+path_id).node();
+ }
+ console.log("svg "+svg);
+ console.log(path);
+
+ var l = path.getTotalLength();
+ var segs = 8;
+ var seg_l = l / segs;
+ var thickness = 5;
+ console.log(l, seg_l)
+ for (var i = 0; i < segs; i++) {
+ var start = i * seg_l;
+ var end = (i + 1) * seg_l;
+ console.log(i, start, start);
+ ar = new ArowOnPath(path, start, end);
+ svg.append("path")
+ .attr("d", ar.toString())
+ .attr("style", "fill:" + getRandomColorRgb());
+ }
+
+ }
+
+
+ d3.svg('path.svg').then(function (svg) {
+ svgnode = document.importNode(svg.documentElement, true);
+ console.log(svgnode);
+ d3.select("div#arrows").node().append(svgnode);
+ arrows("","path905");
+ });
+
+
+/* var svg = d3.select("svgobject")
+ .attr("width", 100)
.attr("height", 500)
.attr("viewBox", "0 0 500 250");
var path = svg.append("path")
- .attr("d", "m 82.393993,102.36183 c -13.481701,0.0332 -35.416429,-15.12149 -35.446705,-28.75598 -0.03028,-13.63449 20.096934,-32.30487 35.446705,-32.64203 15.349771,-0.33716 49.390017,61.33466 61.043907,61.39801 11.65389,0.0634 39.30246,-15.12148 39.33273,-28.75598 0.0303,-13.6345 -23.98295,-32.30489 -39.33273,-32.64203 -15.34978,-0.33714 -47.562206,61.36486 -61.043907,61.39801 z"
+ .attr("d", "m 148.72841,44.122751 c 24.39295,-6.887543 34.01192,11.961379 34.04221,25.595869 0.0303,13.63449 -22.99535,32.36853 -35.4467,32.64203 C 134.87257,102.63414 115.7832,72.134311 106.84906,60.736038 97.914925,49.337765 72.784255,30.266031 70.522257,21.15664 c -2.261998,-9.109391 -7.159135,-21.69117332 2.72304,-27.0895314 9.882175,-5.3983576 32.767453,-2.1532373 38.602383,-1.1928849 5.83492,0.9603523 14.42644,30.7694983 6.13055,38.7549313 -8.29588,7.985433 -41.770833,12.528576 -48.201026,12.493596 -6.430193,-0.03498 -22.799636,11.961369 -22.829921,25.595869 -0.03028,13.6345 23.982951,32.30489 39.33273,32.64203 15.349777,0.33714 38.055457,-51.350355 62.448397,-58.237899 z"
);
-
+*/
function getRandomColorRgb() {
let red = Math.floor(Math.random() * 256);
let green = Math.floor(Math.random() * 256);
@@ -72,29 +120,34 @@
class ArowOnPath {
- constructor(path, start, length, parts = 3, thickness = 5, angle = 2, padding = 1) {
+ constructor(path, start, end, parts = 3, thickness = 5, angle = 2, padding = 1) {
this.path = path;
this.angle = angle;
this.thickness = thickness;
-
+ var length = end - start;
var partlen = (length - (2 * padding)) / (2 * parts);
+ console.log("ArrowOnPath", start, end, partlen);
this.p = [this.pointsAt(start + padding, (-1 * padding))];
for (var i = 1; i < (2 * parts); i++) {
this.p.push(this.pointsAt(start + (i * partlen)));
}
- this.p.push(this.pointsAt(start + length - padding, (-1 * padding)));
+ this.p.push(this.pointsAt(start + length - padding, (1 * padding)));
}
pointAngle(length) {
var p1 = this.path.getPointAtLength(length);
var p2 = this.path.getPointAtLength(length + 0.01);
+ if (p1.x == p2.x && p1.y == p2.y) {
+ p1 = this.path.getPointAtLength(length - 0.01);
+ }
+ console.log(p1, p2);
return Math.atan2((p2.y - p1.y), (p2.x - p1.x));
}
pointsAt(length, angleoffset = 0) {
var m = this.path.getPointAtLength(length);
var m_angle = this.pointAngle(length + angleoffset)
-
+ console.log("a", m_angle);
var a = {
x: m.x + (this.thickness * Math.cos(m_angle + this.angle))
, y: m.y + (this.thickness * Math.sin(m_angle + this.angle))
@@ -115,7 +168,6 @@
d3path() {
var path = d3.path();
- console.log(this.p.length);
var i = 0
path.moveTo(this.p[i].m.x, this.p[i].m.y);
@@ -135,16 +187,16 @@
for (var i0 = 0, i1 = 1; i1 < n; ++i0, ++i1) {
path.bezierCurveTo(px[0][i0], py[0][i0], px[1][i0], py[1][i0], x[i1], y[i1]);
}
-
- console.log(i)
+
+
i = this.p.length - 1;
path.lineTo(this.p[i].m.x, this.p[i].m.y);
path.lineTo(this.p[i].b.x, this.p[i].b.y);
nat.lineStart();
- console.log("blah")
+
for (var i = this.p.length - 1; i >= 0; --i) {
- console.log(i)
+
nat.point(this.p[i].b.x, this.p[i].b.y);
}
@@ -156,9 +208,7 @@
for (var i0 = 0, i1 = 1; i1 < n; ++i0, ++i1) {
path.bezierCurveTo(px[0][i0], py[0][i0], px[1][i0], py[1][i0], x[i1], y[i1]);
}
- //line.context(path)(this.p);
-
path.closePath();
return path;
}
@@ -168,20 +218,10 @@
}
- var s = path.node()
-
- var l = s.getTotalLength();
- var segs = 8;
- var seg_l = l / segs;
- var thickness = 5;
- for (var i = 0; i < segs; i++) {
- ar = new ArowOnPath(s, (i * seg_l), seg_l);
- svg.append("path")
- .attr("d", ar.toString())
- .attr("style", "fill:" + getRandomColorRgb());
- }
+ /*var s = path.node()
+ */
</script>
diff --git a/path.svg b/path.svg
new file mode 100644
index 0000000..74eacf6
--- /dev/null
+++ b/path.svg
@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="271.64679"
+ height="222.66725"
+ viewBox="0 0 135.82339 111.33363"
+ version="1.1"
+ id="svg923"
+ sodipodi:docname="path.svg"
+ inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+ <metadata
+ id="metadata929">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs927">
+ <inkscape:perspective
+ sodipodi:type="inkscape:persp3d"
+ inkscape:vp_x="0 : 55.666815 : 1"
+ inkscape:vp_y="0 : 1000 : 0"
+ inkscape:vp_z="135.82339 : 55.666815 : 1"
+ inkscape:persp3d-origin="67.911695 : 37.11121 : 1"
+ id="perspective950" />
+ </defs>
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1916"
+ inkscape:window-height="1040"
+ id="namedview925"
+ showgrid="false"
+ inkscape:zoom="1.424"
+ inkscape:cx="377.94684"
+ inkscape:cy="-14.376165"
+ inkscape:window-x="1920"
+ inkscape:window-y="38"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="svg923"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0" />
+ <path
+ d="m 101.78116,53.093898 c 24.39295,-6.887543 34.01192,11.961379 34.04221,25.595869 0.0303,13.63449 -22.99535,32.368533 -35.4467,32.642033 C 87.925316,111.60529 68.835946,81.105458 59.901806,69.707185 50.967671,58.308912 25.837001,39.237178 23.575003,30.127787 21.313005,21.018396 16.415868,8.4366137 26.298043,3.0382555 36.180218,-2.3601021 59.065496,0.88501822 64.900426,1.8453706 70.735346,2.8057229 79.326866,32.614869 71.030976,40.600302 62.735096,48.585735 29.260143,53.128878 22.82995,53.093898 16.399757,53.058918 0.03031361,65.055267 2.8608769e-5,78.689767 -0.03025139,92.324267 23.98298,110.99466 39.332759,111.3318 54.682536,111.66894 77.388216,59.981442 101.78116,53.093898 Z"
+ id="path905"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="zzzzzzzzzzzz" />
+ <g
+ sodipodi:type="inkscape:box3d"
+ id="g952"
+ style="opacity:1;fill:none;fill-opacity:1;stroke:#0000ff;stroke-width:0.75590551;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+ inkscape:perspectiveID="#perspective950"
+ inkscape:corner0="-0.33762838 : 0.047734592 : 0 : 1"
+ inkscape:corner7="-0.45822825 : 0.035193195 : 0.25 : 1">
+ <path
+ sodipodi:type="inkscape:box3dside"
+ id="path954"
+ style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+ inkscape:box3dsidetype="6"
+ d="m 102.52809,11.614524 v 18.934079 l 9.12329,6.88267 v -13.74593 z"
+ points="102.52809,30.548603 111.65138,37.431273 111.65138,23.685343 102.52809,11.614524 " />
+ <path
+ sodipodi:type="inkscape:box3dside"
+ id="path964"
+ style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+ inkscape:box3dsidetype="11"
+ d="m 111.65138,23.685343 17.00634,-4.871305 V 34.6537 l -17.00634,2.777573 z"
+ points="128.65772,18.814038 128.65772,34.6537 111.65138,37.431273 111.65138,23.685343 " />
+ <path
+ sodipodi:type="inkscape:box3dside"
+ id="path956"
+ style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+ inkscape:box3dsidetype="5"
+ d="m 102.52809,11.614524 22.82303,-9.8061596 3.3066,17.0056736 -17.00634,4.871305 z"
+ points="125.35112,1.8083644 128.65772,18.814038 111.65138,23.685343 102.52809,11.614524 " />
+ <path
+ sodipodi:type="inkscape:box3dside"
+ id="path962"
+ style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+ inkscape:box3dsidetype="13"
+ d="m 102.52809,30.548603 22.82303,-5.591382 3.3066,9.696479 -17.00634,2.777573 z"
+ points="125.35112,24.957221 128.65772,34.6537 111.65138,37.431273 102.52809,30.548603 " />
+ <path
+ sodipodi:type="inkscape:box3dside"
+ id="path960"
+ style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+ inkscape:box3dsidetype="14"
+ d="M 125.35112,1.8083644 V 24.957221 l 3.3066,9.696479 V 18.814038 Z"
+ points="125.35112,24.957221 128.65772,34.6537 128.65772,18.814038 125.35112,1.8083644 " />
+ <path
+ sodipodi:type="inkscape:box3dside"
+ id="path958"
+ style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+ inkscape:box3dsidetype="3"
+ d="M 102.52809,11.614524 125.35112,1.8083644 V 24.957221 l -22.82303,5.591382 z"
+ points="125.35112,1.8083644 125.35112,24.957221 102.52809,30.548603 102.52809,11.614524 " />
+ </g>
+</svg>
--
GitLab