Skip to content
Snippets Groups Projects
Commit 0118dfc1 authored by francois.grand's avatar francois.grand
Browse files

section paramétrée : ajout de la représentation graphique des sections rectangulaire et circulaire

parent 8b3497c1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/components/canvas/canvas.component.ts
+ 16
− 0
View file @ 0118dfc1
......@@ -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;
}
......
src/app/components/section-canvas/section-canvas.component.ts
+ 121
− 40
View file @ 0118dfc1
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);
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment