tomas.richtar/StorymapperArrow
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

Added Linear and Exponential calculations

Browse Source
This commit is contained in:
Tomas Richtar 2025-05-04 11:31:59 +02:00
parent cc1f2c1faf
commit 0e7f5f4739
1 changed files with 64 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
ArrowPoints.js
View File

@ -1,6 +1,7 @@
const canvas = document.getElementById("canvas"); const canvas = document.getElementById("canvas");
// Compute arrow polygon // Compute arrow polygon
import { getArrowPolygon } from "athena-utils/Arrow.js"; import { getArrowPolygon } from "athena-utils/Arrow.js";
import { CalculationStyle } from "athena-utils/Arrow.js";
import { getCirclePolygon } from "athena-utils/BasicShapes.js"; import { getCirclePolygon } from "athena-utils/BasicShapes.js";
import { getRectanglePolygon } from "athena-utils/BasicShapes.js"; import { getRectanglePolygon } from "athena-utils/BasicShapes.js";
// Polygon merge using Turf library // Polygon merge using Turf library
@ -9,26 +10,6 @@ import {addTurfPolygonToMerge} from "athena-utils/Polygon.js";
import {toTurfPolygon} from "athena-utils/Polygon.js"; import {toTurfPolygon} from "athena-utils/Polygon.js";
import {drawPolygon} from "athena-utils/PolygonVisuals.js"; import {drawPolygon} from "athena-utils/PolygonVisuals.js";
const points = [
{ x: 50, y: 400 },
{ x: 150, y: 100 },
{ x: 300, y: 200 },
{ x: 300, y: 400 },
];
const pointsB = [
{ x: 310, y: 300 },
{ x: 380, y: 350 },
{ x: 400, y: 300 },
{ x: 450, y: 330 }
];
const pointsC = [
{ x: 50, y: 100 },
{ x: 100, y: 100 },
{ x: 180, y: 95 }
];
const circleCenter = {x:320, y:180}; const circleCenter = {x:320, y:180};
const circleRadius = 70; const circleRadius = 70;
const circleDensity = 15; const circleDensity = 15;
@ -42,9 +23,69 @@ const rectangleSideA = 70;
const rectangleSideB = 200; const rectangleSideB = 200;
const rectangleRotation = 40; const rectangleRotation = 40;
const arrowPolygonA = getArrowPolygon(points, 0.02, 50, 10, true, 40, 35); const pointsA = [
const arrowPolygonB = getArrowPolygon(pointsB, 0.02, 10, 10, true, 40, 35); { x: 50, y: 400 },
const arrowPolygonC = getArrowPolygon(pointsC, 0.02, 50, 10, false, 40, 35); { x: 150, y: 100 },
{ x: 300, y: 200 },
{ x: 300, y: 400 },
];
const pointsB = [
{ x: 310, y: 300 },
{ x: 380, y: 350 },
{ x: 450, y: 450 },
{ x: 650, y: 430 }
];
const pointsC = [
{ x: 50, y: 100 },
{ x: 100, y: 100 },
{ x: 180, y: 95 }
];
const arrowDataA = {
points: pointsA,
density: 0.02,
spacing: 20,
offsetDistance: 50
};
const styleA = {
calculation: CalculationStyle.Linear,
range: 1,
minValue: 0.1
};
const arrowHeadDataA = {
widthArrow: 40,
lengthArrow: 35
};
const arrowDataB = {
points: pointsB,
density: 0.02,
spacing: 1,
offsetDistance: 80,
};
const styleB = {
calculation: CalculationStyle.Exponential,
range: 5,
minValue: 0.1
};
const arrowHeadDataB = {
widthArrow: 40,
lengthArrow: 35
};
const arrowDataC = {
points: pointsC,
density: 0.02,
spacing: 5,
offsetDistance: 10,
};
const styleC = {
calculation: CalculationStyle.None,
};
const arrowPolygonA = getArrowPolygon(arrowDataA, styleA, arrowHeadDataA);
const arrowPolygonB = getArrowPolygon(arrowDataB, styleB, arrowHeadDataB);
const arrowPolygonC = getArrowPolygon(arrowDataC, styleC);
const circlePolygon = getCirclePolygon(circleCenter, circleRadius, circleDensity); const circlePolygon = getCirclePolygon(circleCenter, circleRadius, circleDensity);
const circlePolygonB = getCirclePolygon(circleCenterB, circleRadiusB, circleDensityB); const circlePolygonB = getCirclePolygon(circleCenterB, circleRadiusB, circleDensityB);