111 lines
3.1 KiB
JavaScript
111 lines
3.1 KiB
JavaScript
const canvas = document.getElementById("canvas");
|
|
// Compute arrow polygon
|
|
import { getArrowPolygon } from "athena-utils/Arrow.js";
|
|
import { CalculationStyle } 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 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 pointsA = [
|
|
{ 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: 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 circlePolygonB = getCirclePolygon(circleCenterB, circleRadiusB, circleDensityB);
|
|
const rectanglePolygon = getRectanglePolygon(rectangleCenter, rectangleSideA, rectangleSideB, rectangleRotation);
|
|
|
|
const mergedTurfPoly = mergeTurfPolygons(arrowPolygonA, arrowPolygonC);
|
|
const mergedTurfPolyAll = addTurfPolygonToMerge(mergedTurfPoly, arrowPolygonB);
|
|
|
|
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);
|
|
|
|
|