gitea-mirror/aladin-lite
1
0
Fork 0
mirror of https://github.com/cds-astro/aladin-lite.git synced 2025-12-12 15:49:18 -08:00
Code Issues Packages Projects Releases Wiki Activity

A proposal of a new feature - let the polygon to be filled in with a given color with given transparency

Browse Source
This commit is contained in:
szpetny
2023-09-13 15:24:25 +02:00
committed by Matthieu Baumann
parent 43a8bf0e6e
commit 7dec2fd9be
2 changed files with 83 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
examples/al-fill-polygon.html Normal file
View File

@@ -0,0 +1,24 @@
<!doctype html>
<html>
<head>
</head>
<body>
<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
<script type="module">
import A from '../src/js/A.js';
let aladin;
A.init.then(() => {
// Start up Aladin Lite
aladin = A.aladin('#aladin-lite-div', {fov: 122, showContextMenu: true, fullScreen: true});
var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
aladin.addOverlay(overlay);
overlay.addFootprints([A.polygon(
[[264.375,-24.624318352164085],[258.75,-30.000000000000018],[264.375,-35.68533471265207],[270,-30.000000000000018]],
{color: '#808080', fillColor: '#808080', opacity: .4, lineWidth: 1, fill: true})]);
aladin.gotoRaDec(264.375,-24.624318352164085);
});
</script>
</body>
</html>

65
src/js/Polyline.js
View File

@@ -41,10 +41,22 @@ import { ProjectionEnum, projectionNames } from "./ProjectionEnum.js";
export let Polyline= (function() {
function _calculateMag2ForNoSinProjections(line, view) {
// check if the line is too big (in the clip space) to be drawn
const [x1, y1] = AladinUtils.viewXyToClipXy(line.x1, line.y1, view);
const [x2, y2] = AladinUtils.viewXyToClipXy(line.x2, line.y2, view);
const mag2 = (x1 - x2)*(x1 - x2) + (y1 - y2)*(y1 - y2);
return mag2;
}
// constructor
let Polyline = function(radecArray, options) {
options = options || {};
this.color = options['color'] || undefined;
this.fill = options['fill'] || false;
this.fillColor = options['fillColor'] || undefined;
this.opacity = options['opacity'] || undefined;
this.lineWidth = options["lineWidth"] || undefined;
if (options["closed"]) {
@@ -208,6 +220,7 @@ export let Polyline= (function() {
}
let drawLine;
let fillPoly;
if (view.projection === ProjectionEnum.SIN) {
drawLine = (v0, v1) => {
@@ -217,22 +230,45 @@ export let Polyline= (function() {
line.draw(ctx);
}
};
if (this.closed && this.fill) {
fillPoly = (v0, v1, index) => {
const line = new Line(v0.x, v0.y, v1.x, v1.y);
if (index === 0) {
ctx.beginPath();
ctx.moveTo(line.x1, line.y1);
} else {
ctx.lineTo(line.x1, line.y1);
}
};
}
} else {
drawLine = (v0, v1) => {
const line = new Line(v0.x, v0.y, v1.x, v1.y);
if (line.isInsideView(view.width, view.height)) {
// check if the line is too big (in the clip space) to be drawn
const [x1, y1] = AladinUtils.viewXyToClipXy(line.x1, line.y1, view);
const [x2, y2] = AladinUtils.viewXyToClipXy(line.x2, line.y2, view);
const mag2 = (x1 - x2)*(x1 - x2) + (y1 - y2)*(y1 - y2);
const mag2 = _calculateMag2ForNoSinProjections(line, view);
if (mag2 < 0.1) {
line.draw(ctx);
}
}
};
if (this.closed && this.fill) {
fillPoly = (v0, v1, index) => {
const line = new Line(v0.x, v0.y, v1.x, v1.y);
const mag2 = _calculateMag2ForNoSinProjections(line, view);
if (mag2 < 0.1) {
if (index === 0) {
ctx.beginPath();
ctx.moveTo(line.x1, line.y1);
} else {
ctx.lineTo(line.x1, line.y1);
}
}
};
}
}
// 3. Check whether the polygon do not cross the view
@@ -270,7 +306,7 @@ export let Polyline= (function() {
ctx.beginPath();
for (var k = 0; k < nSegment; k++) {
drawLine(xyView[v0], xyView[v1])
drawLine(xyView[v0], xyView[v1]);
v0 = v1;
v1 = v1 + 1;
@@ -279,6 +315,23 @@ export let Polyline= (function() {
if (!noStroke) {
ctx.stroke();
}
if (this.fill && this.closed) {
v0 = len - 1;
v1 = 0;
for (var k = 0; k < nSegment; k++) {
fillPoly(xyView[v0], xyView[v1], k);
v0 = v1;
v1 = v1 + 1;
}
ctx.globalAlpha = 1;
ctx.save();
ctx.fillStyle = this.fillColor;
ctx.globalAlpha = this.opacity;
ctx.fill();
ctx.restore();
}
};
Polyline.prototype.isInStroke = function(ctx, view, x, y) {