diff --git a/scripttypo.js b/scripttypo.js index 2e23a91..cdcfc05 100644 --- a/scripttypo.js +++ b/scripttypo.js @@ -227,22 +227,22 @@ function drawHeaderText() { // } // Choisir le contour de sortie : celui qui termine le plus à droite -function getExitPoint(contours) { - console.log('getExitPoint', contours); - let exitPt = null; - console.log('Infinity', Infinity); - let maxX = -Infinity; - contours.forEach(contour => { - console.log('contour', contour); - if (!contour.points || contour.points.length === 0) return; - const lastPt = contour.points[contour.points.length - 1]; - if (lastPt.x > maxX) { - maxX = lastPt.x; - exitPt = new Point(lastPt.x, -lastPt.y); - } - }); - return exitPt; -} +// function getExitPoint(contours) { +// console.log('getExitPoint', contours); +// let exitPt = null; +// console.log('Infinity', Infinity); +// let maxX = -Infinity; +// contours.forEach(contour => { +// console.log('contour', contour); +// if (!contour.points || contour.points.length === 0) return; +// const lastPt = contour.points[contour.points.length - 1]; +// if (lastPt.x > maxX) { +// maxX = lastPt.x; +// exitPt = new Point(lastPt.x, -lastPt.y); +// } +// }); +// return exitPt; +// } // Dessine la lettre et retourne les points d'entrée et de sortie optimisés function drawGlyph(data) { @@ -306,7 +306,7 @@ function drawGlyph(data) { repere_entree.strokeColor = 'red'; group.addChild(repere_entree); - var repere_sortie = new Path.Circle(new Point(pt.x*scale, pt.y*scale), 5); + var repere_sortie = new Path.Circle(new Point(pt.x*scale, pt.y*scale), 7); repere_sortie.strokeColor = 'green'; group.addChild(repere_sortie); } @@ -325,10 +325,104 @@ function drawGlyph(data) { // return { x: newX, y: newY }; // } +function getDist(p1, p2){ + const dx = p2.x - p1.x; + const dy = p2.y - p1.y; + return Math.hypot(dx, dy); +} + +function getAngle(p1, p2){ + const dx = p2.x - p1.x; + const dy = p2.y - p1.y; + return Math.atan2(dy, dx); +} + + function drawLetters(draw) { console.log("drawLetters: draw", draw); if (!imagesReady) return; + const path = draw.path; + const sequence = draw.sequence; + console.log("path:",path,"sequence:",sequence); + + let letterIndex = 0; + // let path_drew_len = 0; + let path_index = 0; + let previousLastPoint; + + let n = 0; + let addLetters = true; + + // while(path_drew_len < path.length){ + // while(path_index < path.length){ + while(addLetters){ + // while(n < 4){ + // n++; + + let p1 = previousLastPoint ? previousLastPoint : path[0]; + pos = new Point(p1); + + if (letterIndex >= sequence.length) { + letterIndex = 0; + } + const letter = sequence[letterIndex]; + console.log('sequence.length', sequence.length, 'letterIndex: ', letterIndex, "letter: ", letter); + + if (letter === " ") { + // TODO "draw" a space + }else{ + let { group, lastPt } = drawGlyph(lettersData[letter]); + + group.position = pos; + + // get the distance btwn first and last point of the letter + let letterDist = getDist(new Point(0,0), lastPt); + + // get the path point with closest point distance with first path point + for (let i = path_index+1; i < path.length; i++) { + let pathDist = getDist(pos, path[i]); + if (pathDist > letterDist) { + + p2 = path[i]; + + if(debug){ + let repere_target_point = new Path.Circle(new Point(p2), 5); + repere_target_point.strokeColor = 'pink'; + } + + + // angle + let pathAngle = getAngle(p1, p2); + let letterPointsAngle = getAngle(new Point(0,0), lastPt); + let angle = pathAngle-letterPointsAngle; + // ctx.rotate(angle); + group.rotate(angle * (180/Math.PI)); + + previousLastPoint = pos.add(lastPt.rotate(angle * (180/Math.PI))); + + path_index = i < path.length -1 ? i-1 : path.length ; + addLetters = i < path.length -1; + break; + }else{ + addLetters = false; + } + } + + } + // path_index++; + letterIndex++; + // path_drew_len++; + } + + +} + + +function drawLetters_old(draw) { + console.log("drawLetters: draw", draw); + if (!imagesReady) return; + const path = draw.path; const sequence = draw.sequence; @@ -337,7 +431,7 @@ function drawLetters(draw) { let previousRightPt; for (let i = 0; i < path.length - 1; i++) { - + // const p1 = path[i]; const p2 = path[i + 1]; @@ -414,6 +508,15 @@ function drawLetters(draw) { } } +function drawPath(draw){ + const path = draw.path; + for (let i = 0; i < path.length - 1; i++) { + let repere_path = new Path.Circle(new Point(path[i]), 2); + repere_path.strokeColor = 'blue'; + } + +} + // l'ensenble/rendu global apres maj function redrawAll() { @@ -422,6 +525,11 @@ function redrawAll() { paper.project.clear(); drawings.forEach(draw => { + + if (debug) { + drawPath(draw); + } + drawLetters(draw); }); @@ -440,6 +548,8 @@ function redrawAll() { ctx.stroke(); } + + drawHeaderText(); }