muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 11:06:40 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

printing gpx tracks

Browse source
This commit is contained in:
Fedor Katurov 2020-01-24 18:08:34 +07:00
parent 5604d8716b
commit f41078b769
4 changed files with 40 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/utils/dom.ts
View file

@ -10,5 +10,5 @@ export const getStyle = (oElm: any, strCssRule: string): string => {
export const getRandomColor = () => {
return `hsl(${(Math.floor(Math.random() * 360))}, 100%, 50%)`
return `hsla(${(Math.floor(Math.random() * 360))}, 100%, 50%, 0.4)`
}

28
src/utils/renderer.ts
View file

@ -170,9 +170,16 @@ export const composeImages = ({
export const composePoly = ({
points,
ctx,
color = 'gradient',
weight = CLIENT.STROKE_WIDTH,
dash = null,
}: {
points: Point[];
ctx: CanvasRenderingContext2D;
color?: string;
opacity?: number;
weight?: number;
dash?: number[];
}): void => {
if (points.length === 0) return;
@ -181,10 +188,9 @@ export const composePoly = ({
let minY = points[0].y;
let maxY = points[0].y;
ctx.strokeStyle = 'red';
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.lineWidth = CLIENT.STROKE_WIDTH + 0.5;
ctx.lineWidth = weight + 0.5;
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
@ -199,11 +205,21 @@ export const composePoly = ({
if (points[i].y > maxY) maxY = points[i].y;
}
const gradient = ctx.createLinearGradient(minX, minY, minX, maxY);
gradient.addColorStop(0, COLORS.PATH_COLOR[0]);
gradient.addColorStop(1, COLORS.PATH_COLOR[1]);
if (color === 'gradient') {
ctx.strokeStyle = gradient;
const gradient = ctx.createLinearGradient(minX, minY, minX, maxY);
gradient.addColorStop(0, COLORS.PATH_COLOR[0]);
gradient.addColorStop(1, COLORS.PATH_COLOR[1]);
ctx.strokeStyle = gradient;
} else {
ctx.strokeStyle = color;
}
if (dash) {
ctx.setLineDash([12,12]);
}
ctx.stroke();
ctx.closePath();
};