andyaxxe/StorymapperArrow
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

Basic shapes polygons

Browse Source
This commit is contained in:
Tomas Richtar
2025-04-03 20:10:23 +02:00
parent ab2b2a6956
commit cc1f2c1faf
4 changed files with 232 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
ArrowPoints.js
View File

@@ -1,9 +1,12 @@
const canvas = document.getElementById("canvas");
// Compute arrow polygon
import { computeAll } from "athena-utils/Arrow.js";
import { getArrowPolygon } from "athena-utils/Arrow.js";
import { getCirclePolygon } from "athena-utils/BasicShapes.js";
import { getRectanglePolygon } from "athena-utils/BasicShapes.js";
// Polygon merge using Turf library
import {mergeTurfPolygons} from "athena-utils/Polygon.js";
import {addTurfPolygonToMerge} from "athena-utils/Polygon.js";
import {toTurfPolygon} from "athena-utils/Polygon.js";
import {drawPolygon} from "athena-utils/PolygonVisuals.js";
const points = [
@@ -26,14 +29,41 @@ const pointsC = [
{ x: 180, y: 95 }
];
const arrowPolygonA = computeAll(points, 0.02, 50, 10, true, 40, 35);
const arrowPolygonB = computeAll(pointsB, 0.02, 10, 10, true, 40, 35);
const arrowPolygonC = computeAll(pointsC, 0.02, 50, 10, false, 40, 35);
const circleCenter = {x:320, y:180};
const circleRadius = 70;
const circleDensity = 15;
const circleCenterB = {x:400, y:280};
const circleRadiusB = 70;
const circleDensityB = 15;
const rectangleCenter= {x:100, y:300};
const rectangleSideA = 70;
const rectangleSideB = 200;
const rectangleRotation = 40;
const arrowPolygonA = getArrowPolygon(points, 0.02, 50, 10, true, 40, 35);
const arrowPolygonB = getArrowPolygon(pointsB, 0.02, 10, 10, true, 40, 35);
const arrowPolygonC = getArrowPolygon(pointsC, 0.02, 50, 10, false, 40, 35);
const circlePolygon = getCirclePolygon(circleCenter, circleRadius, circleDensity);
const circlePolygonB = getCirclePolygon(circleCenterB, circleRadiusB, circleDensityB);
const rectanglePolygon = getRectanglePolygon(rectangleCenter, rectangleSideA, rectangleSideB, rectangleRotation);
const mergedTurfPoly = mergeTurfPolygons(arrowPolygonA, arrowPolygonC);
const mergedTurfPolyAll = addTurfPolygonToMerge(mergedTurfPoly, arrowPolygonB);
console.log(mergedTurfPolyAll);
drawPolygon(mergedTurfPolyAll, "rgba(255, 0, 0, 0.5)", canvas);
const mergedTurfPolyRectangle = addTurfPolygonToMerge(mergedTurfPolyAll, rectanglePolygon);
const mergedRectangle = mergeTurfPolygons(circlePolygon, circlePolygonB);
const rectanglePoly = getRectanglePolygon(circleCenter, rectangleSideA, rectangleSideB, rectangleRotation*-1);
const rectangleToTurfPoly = toTurfPolygon(rectanglePoly);
console.log(mergedTurfPolyRectangle);
console.log(mergedRectangle);
drawPolygon(mergedTurfPolyRectangle, "rgba(255, 0, 0, 0.5)", canvas);
drawPolygon(mergedRectangle, "rgba(0, 255, 0, 0.5)", canvas);
drawPolygon(rectangleToTurfPoly, "rgba(234, 0, 255, 0.5)", canvas);