Randonneur pt-br Explainer

Explicação de Passeio de bike

Objetivo do desafio: Usar um laço for…of para criar múltiplas formas SVG.

Passo a passo da solução: Neste desafio, você importará uma array de objetos de código adicional e depois usará as propriedades desses objetos para criar múltiplas formas SVG.

A declaração de importação na parte superior do código importa a array wheelSet, que contém 2 objetos com as propriedades cx e cy.

O círculo criado com svg.append('circle') será sempre sólido, o que ficará um pouco estranho em nossa bicicleta. Para contornar isso, vamos criar um 2º círculo que tem exatamente o mesmo tom de azul do fundo do console de código. É por isso que backgroundBlue também é importado. Este círculo azul ficará na parte superior do círculo cáqui e terá um raio um pouco menor. Juntos, esses 2 círculos farão a roda parecer uma roda.

O laço for…of fará a iteração pela array importada e usará as propriedades cx e cy dos objetos da array para definir exatamente onde as rodas devem ser colocadas.

Solução do código de exemplo:

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 executado antes do código do desafio):

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'