73 lines
3.0 KiB
Plaintext
73 lines
3.0 KiB
Plaintext
paper.install(window);
|
|
|
|
window.onload = function() {
|
|
var canvas = document.getElementById('myCanvas');
|
|
paper.setup(canvas);
|
|
|
|
var firstPoint = new Point(20, 40);
|
|
var secondPoint = new Point(200,300);
|
|
console.log(secondPoint); // { x: 20, y: 40 }
|
|
|
|
secondPoint.y = 20;
|
|
console.log(secondPoint); // { x: 20, y: 20 }
|
|
|
|
console.log(firstPoint); // { x: 20, y: 40 }
|
|
// console.log("Line from", firstPoint, "to", secondPoint);
|
|
var path = new Path.Line(firstPoint, secondPoint);
|
|
path.strokeColor = 'black';
|
|
console.log(Path.Line);
|
|
|
|
paper.view.draw();
|
|
};
|
|
|
|
// comme 0 = haut gauche de ma page en js, et que le 0 de ma lettre est diff je dois rajouter au x de ma lettre la diff
|
|
// qu'il y a par rapport à l'endroit ou je veux que ma lettre soit et faire la même chose avec y (mais soustraire)
|
|
|
|
const letterAnchors = {
|
|
A: { begin: new Point(0, 228), end: new Point(142, 0) },
|
|
B: { begin: new Point(0, 228), end: new Point(122, 0) },
|
|
C: { begin: new Point(0, 225), end: new Point(149, 0) },
|
|
D: { begin: new Point(0, 151), end: new Point(183, 0) },
|
|
E: { begin: new Point(0, 155), end: new Point(156, 0) },
|
|
F: { begin: new Point(0, 161), end: new Point(117, 0) },
|
|
G: { begin: new Point(0, 232), end: new Point(204, 0) },
|
|
H: { begin: new Point(0, 228), end: new Point(136, 0) },
|
|
I: { begin: new Point(0, 156), end: new Point(105, 0) },
|
|
J: { begin: new Point(0, 152), end: new Point(100, 0) },
|
|
K: { begin: new Point(0, 229), end: new Point(146, 0) },
|
|
L: { begin: new Point(0, 172), end: new Point(151, 0) },
|
|
M: { begin: new Point(0, 155), end: new Point(118, 0) },
|
|
N: { begin: new Point(0, 82), end: new Point(142, 0) },
|
|
O: { begin: new Point(0, 129), end: new Point(173, 0) },
|
|
P: { begin: new Point(0, 122), end: new Point(207, 0) },
|
|
Q: { begin: new Point(0, 184), end: new Point(146, 0) },
|
|
R: { begin: new Point(0, 157), end: new Point(151, 0) },
|
|
S: { begin: new Point(0, 65), end: new Point(118, 0) },
|
|
T: { begin: new Point(0, 82), end: new Point(142, 0) },
|
|
U: { begin: new Point(0, 129), end: new Point(173, 0) },
|
|
V: { begin: new Point(0, 122), end: new Point(207, 0) },
|
|
W: { begin: new Point(0, 184), end: new Point(146, 0) },
|
|
X: { begin: new Point(0, 157), end: new Point(151, 0) },
|
|
Y: { begin: new Point(0, 65), end: new Point(118, 0) },
|
|
Z: { begin: new Point(0, 82), end: new Point(142, 0) },
|
|
};
|
|
|
|
sequence = scheme.split("").map(s => lettersMap[s]);
|
|
|
|
currentPoint = startingPoint; // début du tracé
|
|
|
|
sequence.forEach(letter => {
|
|
let anchors = letterAnchors[letter];
|
|
let img = new Raster(letterImages[letter]);
|
|
|
|
// translation pour rattachement
|
|
offset = currentPoint.subtract(anchors.begin);
|
|
img.position = img.position.add(offset);
|
|
|
|
// rotation si nécessaire
|
|
angle = Math.atan2(anchors.end.y - anchors.begin.y, anchors.end.x - anchors.begin.x) * 180/Math.PI;
|
|
img.rotate(angle);
|
|
|
|
// mettre à jour le point pour la lettre suivante
|
|
currentPoint = currentPoint.add(anchors.end.subtract(anchors.begin));
|
|
}); |