First Version Completed
This commit is contained in:
Annie Rheaume committed
1 parent
cba4cbc26e
commit
cb95954b42
2 files changed
+267
No files matched your search
+100
@@ -0,0 +1,100 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Dessin d'enfants</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
<script src="main.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-two-thirds">
|
||||
<figure class="image" style="text-align: center;">
|
||||
<svg style="height: 500px; width: 500px; border: solid; border-color: pink;" id="canvas"></svg>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-two-thirds">
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="field">
|
||||
<label class="label">Centre X du Cercle</label>
|
||||
<div class="control">
|
||||
<input class="input"
|
||||
id="cx"
|
||||
type="number"
|
||||
min="1"
|
||||
max="500"
|
||||
placeholder="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="field">
|
||||
<label class="label">Centre Y du Cercle</label>
|
||||
<div class="control">
|
||||
<input class="input"
|
||||
id="cy"
|
||||
type="number"
|
||||
min="1"
|
||||
max="500"
|
||||
placeholder="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="field">
|
||||
<label class="label">Rayon du Cercle</label>
|
||||
<div class="control">
|
||||
<input class="input"
|
||||
type="number"
|
||||
id="cr"
|
||||
min="1"
|
||||
max="500"
|
||||
placeholder="100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<br>
|
||||
<button id="draw-circle" class="button mt-2">Ajouter Cercle</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-two-thirds">
|
||||
<table class="table table is-fullwidth">
|
||||
<thead>
|
||||
<tr><th>Id</th><th>Centre</th><th>Rayon</th><th>Actions</th></tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-two-thirds">
|
||||
<button id="clear-drawing" class="button mt-2">Tout Effacer</button>
|
||||
<button id="inverse-drawing" class="button mt-2">Inverser l'ordre</button>
|
||||
<button id="draw-simple-circle" class="button mt-2">Cercle Simple</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+167
@@ -0,0 +1,167 @@
|
||||
/*
|
||||
TP1 - Dessins d'Enfants
|
||||
Version 1 (complète)
|
||||
Date: 16/12/2023
|
||||
*/
|
||||
|
||||
import {
|
||||
drawCircles,
|
||||
populateTable,
|
||||
randomColor,
|
||||
Circle,
|
||||
Point } from " https://cdn.jsdelivr.net/gh/didiercrunch/cours-420-301-ah@tp1.1/modules-examples/mod.js";
|
||||
|
||||
// VARIABLES PORTÉE GLOBALE
|
||||
const svg = document.getElementById("canvas");
|
||||
const table = document.getElementById("table-body");
|
||||
const STEP = 10;
|
||||
let circles = [];
|
||||
|
||||
// FONCTIONS LOGIQUE APPLICATION
|
||||
|
||||
function emptyCircles(){
|
||||
circles.splice(0, circles.length);
|
||||
}
|
||||
|
||||
function addCircle(x, y, r){
|
||||
const c = new Circle(new Point(x,y), r, Date.now());
|
||||
circles.push(c);
|
||||
return c;
|
||||
}
|
||||
|
||||
function render(){
|
||||
populateTable(table,circles,
|
||||
pointToString,
|
||||
onClickUp,
|
||||
onClickDown,
|
||||
onClickLeft,
|
||||
onClickRight,
|
||||
onClickPaint);
|
||||
drawCircles(svg,circles);
|
||||
}
|
||||
|
||||
function retrieveCircleId(event){
|
||||
return Number(event.target.
|
||||
parentElement.
|
||||
parentElement.
|
||||
firstElementChild.textContent);
|
||||
}
|
||||
|
||||
function getCircleById(circleId){
|
||||
console.log(circleId)
|
||||
for (const circle of circles){
|
||||
console.log(circle.getId())
|
||||
if(circle.getId() === circleId){
|
||||
return circle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function moveCircle(event, step){
|
||||
|
||||
const d = retrieveArrowDirection(event);
|
||||
const c = getCircleById(retrieveCircleId(event));
|
||||
|
||||
if (d === 'up' || d === 'down'){
|
||||
c.setCenter(new Point( c.getCenter().getX(),
|
||||
c.getCenter().getY() + step));
|
||||
}
|
||||
if( d === 'left' || d === 'right'){
|
||||
c.setCenter(new Point( c.getCenter().getX() + step,
|
||||
c.getCenter().getY()));
|
||||
}
|
||||
}
|
||||
|
||||
function retrieveArrowDirection(event){
|
||||
const directions = ['up', 'down', 'left', 'right'];
|
||||
const arrowSpec = event.target.className;
|
||||
|
||||
for (const direction of directions){
|
||||
if(arrowSpec.includes(direction)){
|
||||
return direction;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function changeCircleColor(event){
|
||||
|
||||
const c = getCircleById(retrieveCircleId(event));
|
||||
// Sélection au hasard d'un entier entre 0 et 255
|
||||
c.setColor(randomColor(Math.floor(Math.random()*256)));
|
||||
}
|
||||
|
||||
// GESTIONNAIRES D'ÉVÉNEMENTS CRÉÉS dans main.js
|
||||
|
||||
document.getElementById("draw-simple-circle").addEventListener("click", simpleCercleBtn);
|
||||
|
||||
function simpleCercleBtn(){
|
||||
emptyCircles();
|
||||
addCircle(250,250,50);
|
||||
render();
|
||||
}
|
||||
|
||||
document.getElementById("draw-circle").addEventListener("click", addBtn);
|
||||
|
||||
function addBtn(){
|
||||
const x = Number(document.getElementById("cx").value);
|
||||
const y = Number(document.getElementById("cy").value);
|
||||
const r = Number(document.getElementById("cr").value);
|
||||
addCircle(x,y,r);
|
||||
render();
|
||||
}
|
||||
|
||||
document.getElementById("clear-drawing").addEventListener("click", clearBtn);
|
||||
|
||||
function clearBtn(){
|
||||
emptyCircles();
|
||||
render();
|
||||
}
|
||||
|
||||
document.getElementById("inverse-drawing").addEventListener("click", reverseOrderBtn);
|
||||
|
||||
function reverseOrderBtn(){
|
||||
// Modifie le tableau 'en place'
|
||||
circles.reverse();
|
||||
render();
|
||||
}
|
||||
|
||||
// GESTIONNAIRES D'ÉVÉNEMENTS CRÉÉS PAR LA FONCTION IMPORTÉE populateTable()
|
||||
|
||||
// Dans populateTable: lors de la création du td : pointToString(circle.getCenter())
|
||||
// La méthode getCenter() est donc appelée pour chaque cercle de circles lors du rendu
|
||||
// et c'est ce qui donne sa valeur au paramètre center
|
||||
function pointToString(center){
|
||||
console.log('Dans pointToString');
|
||||
console.log(center);
|
||||
return `(${center.getX()}, ${center.getY()})`;
|
||||
}
|
||||
|
||||
function onClickUp(){
|
||||
const up = (- STEP);
|
||||
moveCircle(event, up);
|
||||
render();
|
||||
}
|
||||
|
||||
function onClickDown(){
|
||||
const down = (+ STEP);
|
||||
moveCircle(event, down);
|
||||
render();
|
||||
}
|
||||
|
||||
function onClickLeft(){
|
||||
const left = (- STEP);
|
||||
moveCircle(event, left);
|
||||
render();
|
||||
}
|
||||
|
||||
function onClickRight(){
|
||||
const right = (+ STEP);
|
||||
moveCircle(event, right)
|
||||
render();
|
||||
}
|
||||
|
||||
function onClickPaint(){
|
||||
changeCircleColor(event);
|
||||
render();
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user