Fixed line drawings
This commit is contained in:
parent
bd22d29336
commit
71e7aa0406
|
@ -1 +1 @@
|
||||||
Subproject commit 1f4a6dea021dfb35f5f8ba34e32b7c174cd8cf3e
|
Subproject commit 71b309744d7760ffc4ecdc14a1f68dbe2a25d419
|
|
@ -78,19 +78,21 @@ module TK.SpaceTac.UI {
|
||||||
* Draw a vector, with line and gradation
|
* Draw a vector, with line and gradation
|
||||||
*/
|
*/
|
||||||
drawVector(color: number, x1: number, y1: number, x2: number, y2: number, gradation = 0) {
|
drawVector(color: number, x1: number, y1: number, x2: number, y2: number, gradation = 0) {
|
||||||
let line = this.drawn_info;
|
let graphics = this.drawn_info;
|
||||||
line.lineStyle(6, color);
|
graphics.addLine({
|
||||||
line.beginPath();
|
start: { x: x1, y: y1 },
|
||||||
line.moveTo(x1, y1);
|
end: { x: x2, y: y2 },
|
||||||
line.lineTo(x2, y2);
|
width: 6,
|
||||||
line.strokePath();
|
color: color
|
||||||
line.beginPath();
|
});
|
||||||
line.lineStyle(2, 0x000000, 0.6);
|
graphics.addLine({
|
||||||
line.moveTo(x1, y1);
|
start: { x: x1, y: y1 },
|
||||||
line.lineTo(x2, y2);
|
end: { x: x2, y: y2 },
|
||||||
line.closePath();
|
width: 2,
|
||||||
line.strokePath();
|
color: 0,
|
||||||
line.visible = true;
|
alpha: 0.6
|
||||||
|
});
|
||||||
|
graphics.setVisible(true);
|
||||||
|
|
||||||
if (gradation) {
|
if (gradation) {
|
||||||
let dx = x2 - x1;
|
let dx = x2 - x1;
|
||||||
|
@ -99,10 +101,14 @@ module TK.SpaceTac.UI {
|
||||||
let angle = Math.atan2(dy, dx);
|
let angle = Math.atan2(dy, dx);
|
||||||
dx = Math.cos(angle);
|
dx = Math.cos(angle);
|
||||||
dy = Math.sin(angle);
|
dy = Math.sin(angle);
|
||||||
line.lineStyle(3, color);
|
graphics.lineStyle(3, color);
|
||||||
for (let d = gradation; d <= dist; d += gradation) {
|
for (let d = gradation; d <= dist; d += gradation) {
|
||||||
line.moveTo(x1 + dx * d + dy * 10, y1 + dy * d - dx * 10);
|
graphics.addLine({
|
||||||
line.lineTo(x1 + dx * d - dy * 10, y1 + dy * d + dx * 10);
|
start: { x: x1 + dx * d + dy * 10, y: y1 + dy * d - dx * 10 },
|
||||||
|
end: { x: x1 + dx * d - dy * 10, y: y1 + dy * d + dx * 10 },
|
||||||
|
width: 3,
|
||||||
|
color: color,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,6 +10,14 @@ module TK.SpaceTac.UI {
|
||||||
angle: { start: number, span: number }
|
angle: { start: number, span: number }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface UIGraphicsLineOptions {
|
||||||
|
start: { x: number, y: number }
|
||||||
|
end: { x: number, y: number }
|
||||||
|
color: number,
|
||||||
|
alpha?: number,
|
||||||
|
width?: number
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* UI component that supports drawing simple shapes (circles, lines...)
|
* UI component that supports drawing simple shapes (circles, lines...)
|
||||||
*/
|
*/
|
||||||
|
@ -72,5 +80,17 @@ module TK.SpaceTac.UI {
|
||||||
this.strokeCircle(x, y, options.radius);
|
this.strokeCircle(x, y, options.radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add a line
|
||||||
|
*/
|
||||||
|
addLine(options: UIGraphicsLineOptions): void {
|
||||||
|
this.beginPath();
|
||||||
|
this.lineStyle(coalesce(options.width, 1), options.color, coalesce(options.alpha, 1));
|
||||||
|
this.moveTo(options.start.x, options.start.y);
|
||||||
|
this.lineTo(options.end.x, options.end.y);
|
||||||
|
this.closePath();
|
||||||
|
this.strokePath();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -79,11 +79,12 @@ module TK.SpaceTac.UI {
|
||||||
|
|
||||||
let result = builder.in(this.starlinks_group).graphics("starlink");
|
let result = builder.in(this.starlinks_group).graphics("starlink");
|
||||||
if (loc1 && loc2) {
|
if (loc1 && loc2) {
|
||||||
result.lineStyle(0.01, 0x6cc7ce);
|
result.addLine({
|
||||||
result.beginPath();
|
start: { x: starlink.first.x + loc1.x, y: starlink.first.y + loc1.y },
|
||||||
result.moveTo(starlink.first.x - 0.5 + loc1.x, starlink.first.y - 0.5 + loc1.y);
|
end: { x: starlink.second.x + loc2.x, y: starlink.second.y + loc2.y },
|
||||||
result.lineTo(starlink.second.x - 0.5 + loc2.x, starlink.second.y - 0.5 + loc2.y);
|
color: 0x6cc7ce,
|
||||||
result.strokePath();
|
width: 0.01,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
result.setDataEnabled();
|
result.setDataEnabled();
|
||||||
result.data.set("link", starlink);
|
result.data.set("link", starlink);
|
||||||
|
|
Loading…
Reference in a new issue