test

tools/js/encode_test/svg1.html

@@ -11,27 +11,56 @@
 		<script>
 			"use strict";
 
-			let ps, paths;
+			let pg, ps, paths;
 			let input = [];
 
 			function preload() {
-				ps = loadSVG("test.svg");
+				ps = loadSVG("test2.svg");
 			}
 
 			function setup() {
-				createCanvas(400, 400, SVG);
-				background(63);
-				image(ps, 0, 0, width, height);
-			    paths = querySVG('polygon');
+				createCanvas(400, 400);
+				pg = createGraphics(width, height, SVG);
+
+				pg.push();
+				pg.image(ps, 0, 0);
+			    pg.pop();
+
+			    paths = pg.querySVG('polygon');
 
 			    for (let path of paths) {
 			    	let points = [];
-			    	let color = new Vector3(255, 255, 255);
-			    	let isFill = false;
-			    	let pointsRaw = path.attribute("points").split(" ");
-			    	for (let pointRaw of pointsRaw) {
-			    		let pointRawArray = pointRaw.split(",");
-			    		let point = new Vector2(float(pointRawArray[0]), float(pointRawArray[1]));
+			    	let color, isFill;
+
+			    	// NAPLPS can only use a fill color or a stroke color in one path, not both.
+					// fill-opacity, stroke-opacity, stroke-linecap, and stroke-width are not used.
+
+					let strokeColorAttr = path.attribute("stroke"); // "#FEFEFE" or "none" 
+			    	let fillColorAttr = path.attribute("fill"); // "#FEFEFE" or "none" 
+					console.log(strokeColorAttr + ", " + fillColorAttr);
+
+					//let fillOpacityAttr = path.attribute("fill-opacity"); // "1" 
+					//let strokeOpacityAttr = path.attribute("stroke-opacity"); // "0.599998951" 
+					//let strokeLinecapAttr = path.attribute("stroke-linecap"); // "round" 
+					//let strokeWidthAttr = path.attribute("stroke-width"); // "8.34118652" 
+
+					if (fillColorAttr !== "none") {
+						let colorHex = hexToRgb(fillColorAttr);
+						color = new Vector3(colorHex.r, colorHex.g, colorHex.b);
+						isFill = false;
+					} else if (strokeColorAttr !== "none") {
+						let colorHex = hexToRgb(strokeColorAttr);
+						color = new Vector3(colorHex.r, colorHex.g, colorHex.b);
+						isFill = false;
+					} else {
+						color = new Vector3(255, 255, 255);
+						isFill = false;
+					}
+
+			    	let pointsAttr = path.attribute("points").split(" ");
+			    	for (let pointAttr of pointsAttr) {
+			    		let pointAttrArray = pointAttr.split(",");
+			    		let point = new Vector2(float(pointAttrArray[0]), float(pointAttrArray[1]));
 			    		points.push(point);
 			    	}
 
@@ -47,6 +76,29 @@
 				document.body.appendChild(div);
 				div.innerHTML = encoder.napRaw;				
 			}
+
+			function draw() {
+				background(63);
+				image(pg, 0, 0);
+			}
+
+			function hexToRgb(hex) {
+				let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+				return result ? {
+					r: parseInt(result[1], 16),
+					g: parseInt(result[2], 16),
+					b: parseInt(result[3], 16)
+				} : null;
+			}
+
+			function componentToHex(c) {
+			  let hex = c.toString(16);
+			  return hex.length == 1 ? "0" + hex : hex;
+			}
+
+			function rgbToHex(r, g, b) {
+			  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+			}
 		</script>
 	</body>