diff --git a/README.md b/README.md index e80c5b6..cd6f00d 100755 --- a/README.md +++ b/README.md @@ -5,27 +5,35 @@ Ainsi, '[/brokholy.github.io](https://github.com/BrokHoly/brokholy.github.io)' n ## Travail réalisé Comme demandé, toutes les features de bases ont été ajoutées : -- Dessin de Rectangle -- Dessin de Ligne -- Modification de la couleur -- Modification de l'épaisseur des traits -- Suppression des Formes du dessin +- Dessin de Rectangle. +- Dessin de Ligne. +- Modification de la couleur. +- Modification de l'épaisseur des traits. +- Suppression des Formes du dessin. ## Travail bonus -Certaine features supplémentaires, non obligatoires mais proposée dans les consignes du TP, ont aussi été ajoutées tel que : -- Dessin de Cercle (Pas d'ellipses) -- Dessin de Polygones -- Mise en ligne du TP sur un CDN : https://brokholy.github.io +Certaine features supplémentaires, non obligatoires mais proposée dans les consignes du TP ou imaginé, ont aussi été ajoutées tel que : +- Dessin de Cercle (Pas d'ellipses). +- Dessin de Polygones. +- Mise en ligne du TP sur un CDN : https://brokholy.github.io. +- Changement de la couleur du background. +- Choisir le style de ligne. +- Transformation complète du style de la page. +- Mise à jour des valeurs d'édition au rafraichissement de la page. +- Symboliser les formes avec des SVG dans la liste des formes. ## Travail à venir Nous désirons ajouter encore quelques features comme : -- Changement de la couleur du background -- Boutons Undo/Redo -- Choisir le style de ligne (ctx.setLineDash) +- Boutons Undo/Redo. +- Ajouter un SVG de 'style de ligne' dans la liste des formes. +## Bugs trouvés/Travaux en cours : +- Les boutons 'Undo' et 'Redo' sont affichés mais désactivés. +- Le style de ligne est buggé pour les polygones. +- Le style de ligne ne se met pas à jour au changement d'épaisseur. ## Credits Ce TP est le résultat d'un Fork du repo de O.Barais. diff --git a/assets/circle-svgrepo-com.svg b/assets/circle-svgrepo-com.svg new file mode 100755 index 0000000..9856133 --- /dev/null +++ b/assets/circle-svgrepo-com.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/line-tool-svgrepo-com.svg b/assets/line-tool-svgrepo-com.svg new file mode 100755 index 0000000..3ed4c2b --- /dev/null +++ b/assets/line-tool-svgrepo-com.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/rectangle-wide-svgrepo-com.svg b/assets/rectangle-wide-svgrepo-com.svg new file mode 100755 index 0000000..36f70ed --- /dev/null +++ b/assets/rectangle-wide-svgrepo-com.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/triangle-svgrepo-com.svg b/assets/triangle-svgrepo-com.svg new file mode 100755 index 0000000..2e91da6 --- /dev/null +++ b/assets/triangle-svgrepo-com.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/canvas.css b/canvas.css index 0829095..6f47f5a 100755 --- a/canvas.css +++ b/canvas.css @@ -1,108 +1,191 @@ +*,*::after,*::before{ + padding: 0px; + margin: 0px; +} -.myCanvas { +body{ + color: white; + height: calc(100vh - 30px); + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + background:conic-gradient(from 45deg,rgb(16, 59, 112),rgb(62, 62, 167),rgb(36, 105, 81),rgb(65, 101, 145),rgb(112, 42, 193),rgb(16, 59, 112));; +} +#container{ + width: 1000px; + margin: auto; + margin-top: 30px; + /* box-shadow: 0px 0px 10px white; */ + padding: 0px; + /* background-color: cyan; */ + /* border: 1px white solid; */ + /* border-radius: 30px; */ } -.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{zoom:1} -.mx-button { - float: left; +#tools{ + display: flex; + justify-content: space-between; + padding: 10px; + background-color: rgba(255, 255, 255, 0.24); + border-top-left-radius: 10px; + border-top-right-radius: 10px; } -.mx-button input { - display: none; + +#shapeSelector{ + margin-left: 10px; + display: flex; + gap: 3px; } -.mx-button label { - background: #ccc; - border: 1px solid #888; - color: #666; - padding: 5px 10px; + +.radioButton{ + /* background-color: wheat; */ + display: flex; + justify-content: center; + align-items: center; + /* border: black solid 2px; */ } -.mx-button label:hover { - background-color: #ddd; + +.radioButton input{ + display:none; } -.mx-button label:active, -.mx-button input:focus + label { - background-color: #aaa; + +.radioButton label{ + color: white; + padding: 10px; + border: white solid 1px; + border-radius: 5px; + background: linear-gradient(45deg, rgb(61, 57, 74), rgb(87, 81, 105), rgb(61, 57, 74)) } -.mx-button input:checked + label { - background-color: #b4b4b4; + +.radioButton input:checked + label{ + background: linear-gradient(45deg, rgb(12, 87, 47), rgb(14, 113, 60), rgb(12, 87, 47)); } +.radioButton input:hover + label{ + background : linear-gradient(45deg, rgb(26, 40, 101), rgb(35, 54, 139), rgb(26, 40, 101)); +} + + +#sidesSelect{ + color: white; + padding-top: 5px; + padding-left: 3px; + padding-right: 3px; + border: white solid 1px; + border-radius: 5px; + background: linear-gradient(45deg, rgb(61, 57, 74), rgb(87, 81, 105), rgb(61, 57, 74)); + overflow: hidden; + display: flex; + flex-direction: column; +} + +#sidesSelect input{ + height: 50%; +} + +#backgroundSelect{ + color: white; + padding-top: 5px; + padding-left: 3px; + padding-right: 3px; + border: white solid 1px; + border-radius: 5px; + background: linear-gradient(45deg, rgb(61, 57, 74), rgb(87, 81, 105), rgb(61, 57, 74)); + overflow: hidden; + display: flex; + flex-direction: column; +} + +#backgroundSelect input{ + height: 55%; + width: 100%; +} + +#styleSelector{ + display: flex; + gap: 10px; +} + +#styleSelector div{ + display: flex; + flex-direction: column; +} + + +#workspace{ + margin: 0px; + display: flex; + gap: 3px; +} + +#canvasDiv{ + margin: 0px; + padding: 0px; +} + +#myCanvas { -form { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - margin: 80px; -} - -.mx-button label { - background-color: #f5f5f5; - background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); - background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); - background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); - background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); - background-image: linear-gradient(top, #ffffff, #e6e6e6); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); - border-color: #e6e6e6 #e6e6e6 #bfbfbf; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - border: 1px solid #cccccc; - border-bottom-color: #b3b3b3; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - color: #333333; - cursor: pointer; - display: inline-block; - margin-bottom: 0; - margin-left: -1px; - padding: 4px 10px; - font-size: 13px; - line-height: 18px; - text-align: center; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - vertical-align: middle; -} -.mx-button label:hover { - background-color: #e6e6e6; - background-position: 0 -15px; - color: #333333; - text-decoration: none; - -webkit-transition: background-position 0.1s linear; - -moz-transition: background-position 0.1s linear; - -ms-transition: background-position 0.1s linear; - -o-transition: background-position 0.1s linear; - transition: background-position 0.1s linear; -} -.mx-button label:active, -.mx-button input:focus + label { - background-color: #d9d9d9; - background-image: none; - -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - outline: 0; -} - -.mx-button input:checked + label { - background: #f5f5f5; - -webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -} -.mx-button:first-child label { - -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - border-top-left-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; - margin-left: 0; -} -.mx-button:last-child label { - -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; } + +#shapeManager{ + width: 100%; + background-color: rgb(32, 25, 53); + /* overflow-y: scroll; */ + max-height: 600px; +} + + + + + +#clearButton{ + width: 100%; + background-color: red; + color: white; + font-weight: 900; +} + +#unreDo{ + display: flex; + justify-content: space-around; +} + +#unreDo button{ + width: 100%; +} + +#shapeList{ + max-height: 560px; + overflow-y: scroll; + color: white; + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 3px; +} + +#shapeList li{ + width: 100%; + display: flex; + justify-content: space-between; + background-color: rgba(0, 0, 0, 0.1); +} + +#shapeList li:nth-child(odd){ + /* width: 100%; */ + background-color: rgba(255, 255, 255, 0.2); +} + +.shapeIcon{ + height: 15px; + filter : invert(100%) +} + +.shapeRemover{ + color: white; + margin-left: 5px; + margin-right: 5px; + padding-left: 10px; + padding-right: 10px; + text-shadow: 0px 0px 3px black; +} \ No newline at end of file diff --git a/controller.js b/controller.js index 5cfa093..869d893 100755 --- a/controller.js +++ b/controller.js @@ -1,69 +1,111 @@ -var editingMode = { rect: 0, line: 1, circle : 3, polygon : 4 }; +var editingMode = { rect: 0, line: 1, circle : 2, polygon : 3 }; +var lineDashStyles = { solid:[], dashed :[6,2], dotted:[1,1], dashdot:[6,2,2,2]}; + +function applyTickness(arr, thickness){ + newarr = arr.slice(); + newarr.forEach((value, index) => { + newarr[index] = value*thickness; + }) + return newarr +} + +//ID generation based on timestamp +function generateId(){ + return Date.now() +} + +function getCurrEditingMode(){ + if(document.getElementById('butRect').checked){ return editingMode.rect} + else if (document.getElementById('butLine').checked){return editingMode.line} + else if (document.getElementById('butCircle').checked){return editingMode.circle} + else if (document.getElementById('butPoly').checked){return editingMode.polygon} +} +function getCurrLineWidth(){ return document.getElementById('spinnerWidth').value; } + +function getCurrSides(){ return document.getElementById('polySides').value; } + +function getCurrBackgroundColor(){ return document.getElementById('backgroundColor').value; } + +function getCurrLineStyle(thickness){ + let dashStyle = document.getElementById('lineStyle').value; + if (dashStyle == 'solid'){ return applyTickness(lineDashStyles.solid,thickness)} + else if (dashStyle == 'dashed') {return this.lineStyle = applyTickness(lineDashStyles.dashed,thickness)} + else if (dashStyle == 'dotted') {return this.lineStyle = applyTickness(lineDashStyles.dotted,thickness)} + else if (dashStyle == 'dashdot') {return this.lineStyle = applyTickness(lineDashStyles.dashdot,thickness)} +} function Pencil(ctx, drawing, canvas) { - this.currEditingMode = editingMode.rect; - this.currLineWidth = 5; + this.currEditingMode = getCurrEditingMode(); + this.currLineWidth = getCurrLineWidth(); this.currColour = document.getElementById('colour').value; this.currentShape = 0; this.context = ctx; - this.currSides = 3; + this.currSides = getCurrSides(); + this.lineStyle = getCurrLineStyle(this.currLineWidth); + drawing.backgroundColor = getCurrBackgroundColor() // Liez ici les widgets à la classe pour modifier les attributs présents ci-dessus. document.getElementById('butRect').onclick = ()=>{this.currEditingMode = editingMode.rect} document.getElementById('butLine').onclick = ()=>{this.currEditingMode = editingMode.line} document.getElementById('butCircle').onclick = ()=>{this.currEditingMode = editingMode.circle} document.getElementById('butPoly').onclick = ()=>{this.currEditingMode = editingMode.polygon} + document.getElementById('polySides').onchange = (e)=>{this.currSides = e.target.value} + document.getElementById('backgroundColor').onchange = (e)=>{drawing.backgroundColor = e.target.value; drawing.paint(ctx)} + + document.getElementById('lineStyle').onchange = (e)=> { + if (e.target.value == 'solid'){this.lineStyle = applyTickness(lineDashStyles.solid,this.currLineWidth)} + else if (e.target.value == 'dashed') {this.lineStyle = applyTickness(lineDashStyles.dashed,this.currLineWidth)} + else if (e.target.value == 'dotted') {this.lineStyle = applyTickness(lineDashStyles.dotted,this.currLineWidth)} + else if (e.target.value == 'dashdot') {this.lineStyle = applyTickness(lineDashStyles.dashdot,this.currLineWidth)} + } document.getElementById('spinnerWidth').onchange = (e)=>{this.currLineWidth = e.target.value} document.getElementById('colour').onchange = (e)=>{this.currColour = e.target.value} - document.getElementById('polySides').onchange = (e)=>{this.currSides = e.target.value} + + const list = document.getElementById('shapeList'); + document.getElementById('clearButton').onclick = ()=>{ if(confirm("Do you realy want to delete all your drawing ?")) drawing.clear(ctx,list); } + document.getElementById('undoButton').onclick = ()=>{ drawing.undo(ctx) } + document.getElementById('redoButton').onclick = ()=>{ drawing.redo(ctx) } new DnD(canvas, this); // Implémentez ici les 3 fonctions onInteractionStart, onInteractionUpdate et onInteractionEnd - this.onInteractionStart = function(dnd) { - + dnd.finx = dnd.basex; dnd.finy = dnd.basey; + this.onInteractionUpdate(dnd) }.bind(this) - this.onInteractionUpdate = function(dnd) { if(this.currEditingMode == editingMode.rect) { - this.currentShape = new Rectangle(dnd.basex,dnd.basey,dnd.finx - dnd.basex,dnd.finy - dnd.basey,this.currLineWidth,this.currColour); + this.currentShape = new Rectangle(dnd.basex,dnd.basey,dnd.finx - dnd.basex,dnd.finy - dnd.basey,this.currLineWidth,this.currColour, this.lineStyle); } if(this.currEditingMode == editingMode.line){ - this.currentShape = new Line(dnd.basex,dnd.basey,dnd.finx,dnd.finy,this.currLineWidth,this.currColour); + this.currentShape = new Line(dnd.basex,dnd.basey,dnd.finx,dnd.finy,this.currLineWidth,this.currColour,this.lineStyle); } if(this.currEditingMode == editingMode.circle){ - this.currentShape = new Circle(dnd.basex,dnd.basey,dnd.finx,dnd.finy,this.currLineWidth,this.currColour); + this.currentShape = new Circle(dnd.basex,dnd.basey,dnd.finx,dnd.finy,this.currLineWidth,this.currColour,this.lineStyle); } if(this.currEditingMode == editingMode.polygon){ - this.currentShape = new Polygon(dnd.basex,dnd.basey,dnd.finx,dnd.finy,this.currLineWidth,this.currColour,this.currSides); + this.currentShape = new Polygon(dnd.basex,dnd.basey,dnd.finx,dnd.finy,this.currLineWidth,this.currColour,this.lineStyle,this.currSides); } drawing.paint(ctx,canvas) this.currentShape.paint(ctx) }.bind(this) - - function generateId(){ - return Date.now() - } - this.onInteractionEnd = function(dnd) { var shapeId = generateId() drawing.formes.set(shapeId,this.currentShape) drawing.paint(ctx,canvas) updateShapeList(this.currentShape,shapeId) - document.getElementById(`burm${shapeId}`).onclick = (e) => removeShape(drawing,shapeId,ctx,canvas) //e.currentTarget.id.substring(4) + document.getElementById(`burm${shapeId}`).onclick = (e) => removeShape(drawing,shapeId,ctx,canvas) }.bind(this) }; function removeShape(drawing, id, ctx, canvas){ drawing.formes.delete(id) - console.log(drawing.formes) document.getElementById(`lirm${id}`).remove() drawing.paint(ctx,canvas) } diff --git a/echo b/echo new file mode 100644 index 0000000..d2a43b5 --- /dev/null +++ b/echo @@ -0,0 +1,21 @@ +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/assets/circle-svgrepo-com.svg +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/assets/line-tool-svgrepo-com.svg +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/assets/rectangle-wide-svgrepo-com.svg +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/assets/triangle-svgrepo-com.svg +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/bootstrap/css/bootstrap.min.css +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/bootstrap/fonts/glyphicons-halflings-regular.eot +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/bootstrap/fonts/glyphicons-halflings-regular.svg +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/bootstrap/fonts/glyphicons-halflings-regular.ttf +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/bootstrap/fonts/glyphicons-halflings-regular.woff +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/bootstrap/fonts/glyphicons-halflings-regular.woff2 +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/bootstrap/js/bootstrap.min.js +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/canvas.css +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/controller.js +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/index..html +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/interaction.js +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/jquery-2.1.3.min.js +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/main.js +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/model.js +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/old-index.html +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/README.md +/mnt/c/Users/Baba/Documents/code/ecole/we/tpWeb/view.js diff --git a/index..html b/index..html new file mode 100755 index 0000000..5d0736c --- /dev/null +++ b/index..html @@ -0,0 +1,87 @@ + + + + + A simple canvas + + + + + + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ +
+
+
+ +
+ + +
+
+
    + +
+
+
+
+ + + + + + + + + + diff --git a/model.js b/model.js index 2ae5a7e..3b948c6 100755 --- a/model.js +++ b/model.js @@ -2,20 +2,26 @@ class Drawing { constructor(){ this.formes = new Map(); + this.backgroundColor = "#f0f0f0"; } getForms(){ return this.formes } + + getBackgroundColor(){ + return this.backgroundColor + } } class Forme{ - constructor(startX, startY, epaisseur,couleur){ + constructor(startX, startY, epaisseur,couleur, lineStyle){ this.startX = startX; this.startY = startY; this.couleur = couleur; this.epaisseur = epaisseur; + this.lineStyle = lineStyle } Getters(){ @@ -23,15 +29,15 @@ class Forme{ initX : this.startX, initY : this.startY, color : this.couleur, - thickness : this.epaisseur + thickness : this.epaisseur, + lineStyle : this.lineStyle } } } class Rectangle extends Forme{ - // Forme.call(this,couleur,epaisseur); - constructor(startX,startY,largeur,hauteur,epaisseur,couleur){ - super(startX,startY,epaisseur,couleur); + constructor(startX,startY,largeur,hauteur,epaisseur,couleur,lineStyle){ + super(startX,startY,epaisseur,couleur,lineStyle); this.largeur = largeur; this.hauteur = hauteur; } @@ -44,14 +50,14 @@ class Rectangle extends Forme{ finalY : this.hauteur, color : this.couleur, thickness : this.epaisseur, + lineStyle : this.lineStyle } } } class Line extends Forme{ - //Forme.call(this,couleur,epaisseur); - constructor(startX,startY,endX,endY,epaisseur,couleur){ - super(startX,startY,epaisseur,couleur); + constructor(startX,startY,endX,endY,epaisseur,couleur,lineStyle){ + super(startX,startY,epaisseur,couleur,lineStyle); this.endX = endX; this.endY = endY; } @@ -64,13 +70,14 @@ class Line extends Forme{ finalY : this.endY, color : this.couleur, thickness : this.epaisseur, + lineStyle : this.lineStyle } } } class Circle extends Forme{ - constructor(startX,startY,endX,endY,epaisseur,couleur){ - super(startX,startY,epaisseur,couleur); + constructor(startX,startY,endX,endY,epaisseur,couleur,lineStyle){ + super(startX,startY,epaisseur,couleur,lineStyle); this.endX = endX; this.endY = endY; } @@ -83,13 +90,14 @@ class Circle extends Forme{ finalY : this.endY, color : this.couleur, thickness : this.epaisseur, + lineStyle : this.lineStyle } } } class Polygon extends Forme{ - constructor(startX,startY,endX,endY,epaisseur,couleur, sides){ - super(startX,startY,epaisseur,couleur); + constructor(startX,startY,endX,endY,epaisseur,couleur, lineStyle, sides){ + super(startX,startY,epaisseur,couleur,lineStyle); this.endX = endX; this.endY = endY; this.sides = sides @@ -103,6 +111,7 @@ class Polygon extends Forme{ finalY : this.endY, color : this.couleur, thickness : this.epaisseur, + lineStyle : this.lineStyle, sides : this.sides } } diff --git a/old-index.html b/old-index.html new file mode 100755 index 0000000..47a36a2 --- /dev/null +++ b/old-index.html @@ -0,0 +1,62 @@ + + + + + A simple canvas + + + + + + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + + + +
+ +
+ +
+
+ +
+ +
+
    +
+
+
+ +
+ + + + + + + + + + diff --git a/view.js b/view.js index d9c8578..d73c913 100755 --- a/view.js +++ b/view.js @@ -4,11 +4,11 @@ function updateShapeList(forme, id){ function htmlForme(forme, id){ let htmlContent = `
  • ` - if(forme.constructor === Rectangle){ htmlContent += `□ Rect ` } - else if(forme.constructor === Line){ htmlContent += `/ Line ` } - else if(forme.constructor === Circle){ htmlContent += `◯ Circle ` } - else if(forme.constructor === Polygon) { htmlContent += `► Polygon ` } - htmlContent += `` + if(forme.constructor === Rectangle){ htmlContent += `rectangle iconRect` } + else if(forme.constructor === Line){ htmlContent += `line iconLine` } + else if(forme.constructor === Circle){ htmlContent += `circle iconCircle` } + else if(forme.constructor === Polygon) { htmlContent += `polygon iconPolygon (${forme.sides})` } + htmlContent += `` htmlContent += '
    • ' return htmlContent } @@ -18,8 +18,9 @@ Rectangle.prototype.paint = function(ctx) { var getRect = this.Getters() ctx.strokeStyle = getRect.color; ctx.lineWidth = getRect.thickness; + ctx.setLineDash(getRect.lineStyle); ctx.beginPath(); - ctx.rect(getRect.initX, getRect.initY, getRect.finalX, getRect.finalY); // Si jamais, faut inverser ici + ctx.rect(getRect.initX, getRect.initY, getRect.finalX, getRect.finalY); ctx.stroke(); }; @@ -27,6 +28,7 @@ Line.prototype.paint = function(ctx) { var getLine = this.Getters() ctx.strokeStyle = getLine.color; ctx.lineWidth = getLine.thickness; + ctx.setLineDash(getLine.lineStyle); ctx.beginPath(); ctx.moveTo(getLine.initX, getLine.initY); ctx.lineTo(getLine.finalX, getLine.finalY); @@ -37,20 +39,19 @@ Circle.prototype.paint = function(ctx) { var getCircle = this.Getters(); ctx.strokeStyle = getCircle.color; ctx.lineWidth = getCircle.thickness; + ctx.setLineDash(getCircle.lineStyle); ctx.beginPath(); ctx.arc(getCircle.initX, getCircle.initY, Math.sqrt(Math.pow(getCircle.finalX-getCircle.initX,2)+Math.pow(getCircle.finalY-getCircle.initY,2)), 0, 2 * Math.PI) ctx.stroke(); }; -//Faire attention à la forme de mesure de l'angle. -//Les x et y d'origine du point par la distance seront ajouter dans paintPoly. Ici on calcul les coordonnées de manière absolue. + function calcCoord(centerDist,sides,corner,angle){ return {x:(centerDist*(Math.cos(angle+((Math.PI*2)/sides)*corner))),y:(centerDist*(Math.sin(angle+((Math.PI*2)/sides)*corner)))}; } +//Paint polygons with multiple lines function paintPoly(ctx,getPoly){ - //Là je dois faire autant de linestroke que de sides, en passant par chaques coins. - //Calculer l'angle du point de départ aux point d'arrive et la distance ctx.beginPath() for(let i=0; i