From 0118dfc1381459beddadf1d923f7edffb588f398 Mon Sep 17 00:00:00 2001
From: "francois.grand" <francois.grand@irstea.fr>
Date: Wed, 20 Sep 2017 11:08:43 +0200
Subject: [PATCH] =?UTF-8?q?section=20param=C3=A9tr=C3=A9e=20:=20ajout=20de?=
=?UTF-8?q?=20la=20repr=C3=A9sentation=20graphique=20des=20sections=20rect?=
=?UTF-8?q?angulaire=20et=20circulaire?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app/components/canvas/canvas.component.ts | 16 ++
.../section-canvas.component.ts | 161 +++++++++++++-----
2 files changed, 137 insertions(+), 40 deletions(-)
diff --git a/src/app/components/canvas/canvas.component.ts b/src/app/components/canvas/canvas.component.ts
index 577e848e2..540b5401e 100644
--- a/src/app/components/canvas/canvas.component.ts
+++ b/src/app/components/canvas/canvas.component.ts
@@ -91,6 +91,22 @@ export class CalcCanvasComponent implements AfterViewInit {
this._context2d.stroke();
}
+ /**
+ *
+ * @param x The x axis of the coordinate for the ellipse's center.
+ * @param y The y axis of the coordinate for the ellipse's center.
+ * @param radiusX The ellipse's major-axis radius.
+ * @param radiusY The ellipse's minor-axis radius.
+ * @param rotation The rotation for this ellipse, expressed in radians
+ * @param startAngle The starting point, measured from the x axis, from which it will be drawn, expressed in radians
+ * @param endAngle The end ellipse's angle to which it will be drawn, expressed in radians
+ */
+ public drawEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number) {
+ this._context2d.beginPath();
+ this._context2d.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle);
+ this._context2d.stroke();
+ }
+
public get context2d(): CanvasRenderingContext2D {
return this._context2d;
}
diff --git a/src/app/components/section-canvas/section-canvas.component.ts b/src/app/components/section-canvas/section-canvas.component.ts
index ce9f43f36..b89e3052c 100644
--- a/src/app/components/section-canvas/section-canvas.component.ts
+++ b/src/app/components/section-canvas/section-canvas.component.ts
@@ -1,6 +1,6 @@
-import { Component, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
-import { acSection, cSnTrapez, ParamsSectionTrapez } from 'jalhyd';
+import { acSection, cSnTrapez, ParamsSectionTrapez, cSnRectang, ParamsSectionRectang, cSnCirc, ParamsSectionCirc } from 'jalhyd';
import { CalcCanvasComponent } from '../canvas/canvas.component';
@@ -12,16 +12,16 @@ import { CalcCanvasComponent } from '../canvas/canvas.component';
</calc-canvas>
`
})
-export class SectionCanvasComponent implements AfterViewInit {
+export class SectionCanvasComponent {
/**
- * taille du canvas (pixels)
+ * taille (pixels) du canvas (c'est un carré)
*/
private _size: number = 400;
/**
* marges gauche/droite pour le texte (pixels)
*/
- private _textMargin: number = 80;
+ private _textMargin: number = 90;
/**
* marge haut pour les pointillés (pixels)
@@ -39,9 +39,6 @@ export class SectionCanvasComponent implements AfterViewInit {
private _scaleX: number;
private _scaleY: number;
- // valeur max X danas le repère de la section
- private _sectionMaxX: number;
-
private _section: acSection;
// tirants
@@ -56,10 +53,6 @@ export class SectionCanvasComponent implements AfterViewInit {
this.draw();
}
- ngAfterViewInit() { // wait for the view to init before using the element
- // this.draw();
- }
-
public reset() {
this._section = undefined;
this._levels = [];
@@ -75,7 +68,21 @@ export class SectionCanvasComponent implements AfterViewInit {
return Math.max(this._section.prms.YB.v, this._levels[this._levels.length - 1]["val"]);
}
- private drawSectionTrapez() {
+ /**
+ * dessin des pointillés au dessus de la berge
+ * xmin,xmax : position gauche/droite
+ * yb : cote de berge
+ * maxHeight : valeur maxi des cotes
+ */
+ private drawTopDashLines(xmin: number, xmax: number, yb: number, maxHeight: number) {
+ this._calcCanvas.setLineWidth(2);
+ this._calcCanvas.setLineDash([5]);
+ this._calcCanvas.setStrokeColor(128, 128, 128);
+ this.drawSectionLine(xmin, yb, xmin, maxHeight);
+ this.drawSectionLine(xmax, yb, xmax, maxHeight);
+ }
+
+ private drawSectionTrapez(): number {
let sect: cSnTrapez = <cSnTrapez>this._section;
let prms: ParamsSectionTrapez = <ParamsSectionTrapez>sect.prms;
@@ -84,44 +91,110 @@ export class SectionCanvasComponent implements AfterViewInit {
// largeur de la partie pentue
let lp = prms.Fruit.v * prms.YB.v;
- // console.log("lp " + lp);
// largeur totale de la section
let maxWidth: number = lp * 2 + prms.LargeurFond.v;
// hauteur totale de la section
- // let height: number = prms.YB.v;
let maxHeight: number = this.getMaxLevel();
- if (maxHeight == yb)
- maxHeight *= 1.2;
- // console.log("h ", height);
+ maxHeight *= 1.1;
this._scaleX = (this._size - 2 * this._textMargin) / maxWidth;
- // this._scaleY = (this._size - this._bottomMargin - this._topMargin) / height;
this._scaleY = (this._size - this._bottomMargin) / maxHeight;
- let margin = this._textMargin / this._size;
- //let top = this._topMargin / this._size;
-
-
// contour de la section
this._calcCanvas.setStrokeColor(0, 0, 0);
this._calcCanvas.setLineWidth(5);
this.drawSectionLine(0, yb, lp, 0);
this.drawSectionLine(lp, 0, lp + prms.LargeurFond.v, 0);
- this._sectionMaxX = 2 * lp + prms.LargeurFond.v;
- this.drawSectionLine(lp + prms.LargeurFond.v, 0, this._sectionMaxX, yb);
+ this.drawSectionLine(lp + prms.LargeurFond.v, 0, maxWidth, yb);
+
+ // pointillés du haut
+ this.drawTopDashLines(0, maxWidth, yb, maxHeight);
+
+ return maxWidth;
+ }
+
+ private drawSectionRect() {
+ let sect: cSnRectang = <cSnRectang>this._section;
+ let prms: ParamsSectionRectang = <ParamsSectionRectang>sect.prms;
+
+ // cote de berge
+ let yb = prms.YB.v;
+
+ // largeur totale de la section
+ let maxWidth: number = prms.LargeurBerge.v;
+
+ // hauteur totale de la section
+ let maxHeight: number = this.getMaxLevel();
+ maxHeight *= 1.1;
+
+ this._scaleX = (this._size - 2 * this._textMargin) / maxWidth;
+ this._scaleY = (this._size - this._bottomMargin) / maxHeight;
+
+ // contour de la section
+
+ this._calcCanvas.setStrokeColor(0, 0, 0);
+ this._calcCanvas.setLineWidth(5);
+ this.drawSectionLine(0, yb, 0, 0);
+ this.drawSectionLine(0, 0, prms.LargeurBerge.v, 0);
+ this.drawSectionLine(prms.LargeurBerge.v, 0, maxWidth, yb);
+
+ // pointillés du haut
+ this.drawTopDashLines(0, maxWidth, yb, maxHeight);
+
+ return maxWidth;
+ }
+
+ private drawSectionCirc() {
+ let sect: cSnCirc = <cSnCirc>this._section;
+ let prms: ParamsSectionCirc = <ParamsSectionCirc>sect.prms;
+
+ // cote de berge
+ let yb = prms.YB.v;
+
+ // diamètre, rayon
+ let D = prms.D.v;
+ let r = D / 2;
+
+ // largeur au miroir
+ let B = sect.Calc("B", yb);
+
+ // largeur totale de la section
+ let maxWidth: number = yb < r ? B : D;
+
+ // hauteur totale de la section
+ let maxHeight: number = this.getMaxLevel();
+ maxHeight *= 1.1;
- // this._calcCanvas.setStrokeColor(255, 0, 0);
- // this._calcCanvas.drawLine(10, 10, 100, 200);
+ this._scaleX = (this._size - 2 * this._textMargin) / maxWidth;
+ this._scaleY = (this._size - this._bottomMargin) / maxHeight;
+
+ // contour de la section
+
+ this._calcCanvas.setStrokeColor(0, 0, 0);
+ this._calcCanvas.setLineWidth(5);
+
+ let wx = maxWidth / 2;
+ let alpha = sect.Calc("Alpha", yb);
+ // console.log("alpha", alpha, alpha * 360 / Math.PI);
+ // console.log("YB", prms.YB.v);
+ let s = Math.PI / 2 - alpha;
+ let e = Math.PI / 2 + alpha;
+ this.drawSectionEllipse(wx, r, r, r, 0, s, e);
// pointillés du haut
- this._calcCanvas.setLineWidth(2);
- this._calcCanvas.setLineDash([5]);
- this._calcCanvas.setStrokeColor(128, 128, 128);
- this.drawSectionLine(0, yb, 0, maxHeight);
- this.drawSectionLine(this._sectionMaxX, yb, this._sectionMaxX, maxHeight);
+ let w = yb > r ? (D - B) / 2 : 0;
+ this.drawTopDashLines(w, maxWidth - w, yb, maxHeight);
+
+ return maxWidth;
+ }
+
+ private drawSectionEllipse(x: number, y: number, rX: number, rY: number, rot: number, start: number, end: number) {
+ // console.log("start", start, start * 360 / Math.PI);
+ // console.log("end", end, end * 360 / Math.PI);
+ this._calcCanvas.drawEllipse(this._textMargin + x * this._scaleX, this._size - this._bottomMargin - y * this._scaleY, rX * this._scaleX, rY * this._scaleY, rot, start, end);
}
private drawText(s: string, x: number, y: number, align: string) {
@@ -139,9 +212,17 @@ export class SectionCanvasComponent implements AfterViewInit {
this._calcCanvas.drawLine(this._textMargin + x1 * this._scaleX, this._size - this._bottomMargin - y1 * this._scaleY, this._textMargin + x2 * this._scaleX, this._size - this._bottomMargin - y2 * this._scaleY);
}
- private drawSection() {
+ /**
+ * dessin de la section
+ * @returns largeur de la section (en m)
+ */
+ private drawSection(): number {
if (this._section instanceof cSnTrapez)
- this.drawSectionTrapez();
+ return this.drawSectionTrapez();
+ if (this._section instanceof cSnRectang)
+ return this.drawSectionRect();
+ if (this._section instanceof cSnCirc)
+ return this.drawSectionCirc();
}
private logObject(obj: {}, m?: string) {
@@ -164,7 +245,7 @@ export class SectionCanvasComponent implements AfterViewInit {
// this.logObject(this._levels, "levels ");
}
- private drawLevels() {
+ private drawLevels(maxWidth: number) {
let left = true;
this._calcCanvas.resetLineDash();
@@ -174,13 +255,13 @@ export class SectionCanvasComponent implements AfterViewInit {
let y = l["val"];
let col = l["rgb"];
this._calcCanvas.setStrokeColor(col["r"], col["g"], col["b"]);
- this.drawSectionLine(0, y, this._sectionMaxX, y);
+ this.drawSectionLine(0, y, maxWidth, y);
this._calcCanvas.setFillColor(col["r"], col["g"], col["b"]);
if (left)
- this.drawText(l["label"], 0, y, "right");
+ this.drawText(l["label"], -0.1, y, "right");
else
- this.drawText(l["label"], this._sectionMaxX, y, "left");
+ this.drawText(l["label"], maxWidth + 0.1, y, "left");
left = !left;
}
}
@@ -196,7 +277,7 @@ export class SectionCanvasComponent implements AfterViewInit {
private draw() {
this.sortLevels();
this.drawFrame();
- this.drawSection();
- this.drawLevels();
+ let maxWidth = this.drawSection();
+ this.drawLevels(maxWidth);
}
}
--
GitLab