Randonneur es-419 Explainer

Explicador de Randonnée

Objetivo de este acertijo: Usar un for…of loop para crear varias formas SVG.
Tutorial de la solución: En este acertijo, importarás un arreglo de objects de código adicional y luego, usarás las propiedades de estos objects para crear varias formas SVG.

La declaración de importación en la parte superior del código importa el arreglo wheelSet, que contiene 2 objects con las propiedades cx y cy.

Un círculo creado con svg.append('circle') siempre será sólido, lo que se verá un poco extraño en nuestra bicicleta. Para solucionar esto, crearemos un segundo círculo que tiene exactamente el mismo tono de azul que el fondo de la consola de código. Esto se debe a que backgroundBlue también se importa. Este círculo azul estará en la parte superior del círculo caqui. En conjunto, estos 2 círculos hará que la rueda se vea como una rueda.

El for…of loop iterará por el arreglo importado y usará las propiedades cx y cy de los objects en el arreglo para definir exactamente dónde se deben colocar las ruedas.

Solución del código de ejemplo:

import { wheelSet, backgroundBlue } from 'grasshopper.bikeShop';

for (let wheel of wheelSet) {
    svg.append('circle').attr('fill', 'khaki').attr('r', 35).attr('cx', wheel.cx).attr('cy', wheel.cy);
    svg.append('circle').attr('fill', backgroundBlue).attr('r', 31).attr('cx', wheel.cx).attr('cy', wheel.cy);
}

Código adicional (código oculto que se ejecuta antes del código del acertijo):

let midX = window.innerWidth / 2;
let midY = window.innerHeight / 2;
let svg = _svg.append('g');
let bike = _svg.append('g');
let topBar = bike.append('line').attr('x1', midX - 50).attr('y1', midY - 30).attr('x2', midX + 50).attr('y2', midY - 35).attr('stroke-width', 5).attr('stroke', 'red').attr('stroke-linecap', 'round');
let seatPost = bike.append('line').attr('x1', midX - 55).attr('y1', midY - 50).attr('x2', midX - 30).attr('y2', midY + 30).attr('stroke-width', 5).attr('stroke', 'red').attr('stroke-linecap', 'round');
let seatStay = bike.append('line').attr('x1', midX - 50).attr('y1', midY - 30).attr('x2', midX - 80).attr('y2', midY + 25).attr('stroke-width', 5).attr('stroke', 'red').attr('stroke-linecap', 'round');
let chainStay = bike.append('line').attr('x1', midX - 80).attr('y1', midY + 25).attr('x2', midX - 30).attr('y2', midY + 30).attr('stroke-width', 5).attr('stroke', 'red').attr('stroke-linecap', 'round');
let downTube = bike.append('line').attr('x1', midX - 30).attr('y1', midY + 30).attr('x2', midX + 52).attr('y2', midY - 20).attr('stroke-width', 5).attr('stroke', 'red').attr('stroke-linecap', 'round');
let fork = bike.append('path').attr('d', `M ${midX + 47} ${midY - 50} L ${midX + 60} ${midY} C ${midX + 63} ${midY + 8} ${midX + 65} ${midY + 20} ${midX + 75} ${midY + 25}`).attr('stroke-width', 5).attr('stroke', 'red').attr('stroke-linecap', 'round').attr('fill', 'transparent');
let handleBars = bike.append('path').attr('d', `M ${midX + 46} ${midY - 50} L ${midX + 60} ${midY - 50} C ${midX + 75} ${midY - 50} ${midX + 70} ${midY - 30} ${midX + 45} ${midY - 35}`).attr('stroke-width', 5).attr('stroke', 'khaki').attr('stroke-linecap', 'round').attr('fill', 'transparent');
let seat = bike.append('path').attr('d', `M ${midX - 65} ${midY - 58} c 2 0.5 3 1 4 1 l 8 1.2 l 10 1.2 c 2 1 2 3 0 4 l -14 -1 c -1 0 -5 0 -6 1 c -4 -2 -8 -8 -2.5 -8`).attr('stroke-width', 1).attr('stroke', 'black').attr('stroke-linecap', 'round').attr('fill', 'khaki').attr('stroke', 'khaki');
let wheelSet = [
       {
cx: midX - 80,
cy: midY + 25
        },
        {
cx: midX + 75,
cy: midY + 25
        }
];

let backgroundBlue = '#003248'

1 Like