Explicação de Botão clicado
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 buttons, com objetos que contêm as propriedades cx e cy.
O laço for…of fará a iteração pela array de objetos e criar um novo círculo para cada objeto, usando as propriedades cx e cy do objeto para definir a posição do círculo na tela.
Definir o atributo 'cx' para button.cx e o atributo 'cy' para button.cy.
Solução do código de exemplo:
import { buttons } from 'grasshopper.tailor';
for (let button of buttons) {
svg.append('circle').attr('r', 2).attr('fill', 'white').attr('cx', button.cx).attr('cy', button.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 shirt = svg.append('g');
let shirtFront = shirt.append('rect').attr('width', 80).attr('height', 120).attr('x', midX - 40).attr('y', midY - 60).attr('fill', 'lightBlue');
let collar = shirt.append('path').attr('d', `M ${midX - 20} ${midY - 75} l 40 0 l 10 20 l -10 20 l -20 -23 l -20 23 l -10 -20 l 10 -20`).attr('stroke', 'black').attr('stroke-width', 2).attr('fill', 'lightBlue');
let line = shirt.append('line').attr('x1', midX).attr('y1', midY - 55).attr('x2', midX).attr('y2', midY + 60).attr('stroke-width', 1).attr('stroke', 'black');
let sleeves = shirt.append('path').attr('d', `M ${midX + 40} ${midY - 59.5} l 10 0 l 20 60 l -10 60 l -15 -10 l 5 -50 l -15 -50 M ${midX - 40} ${midY - 59.5} l -10 0 l -20 60 l 10 60 l 15 -10 l -5 -50 l 15 -50`).attr('stroke', 'lightBlue').attr('stroke-width', 1).attr('fill', 'lightBlue');
let neck = shirt.append('path').attr('d', `M ${midX -20} ${midY - 75} c 10 20 30 20 40 0`).attr('stroke-width', 1).attr('stroke', 'black').attr('fill', 'transparent');
let buttons = [{
cx: midX + 3,
cy: midY - 40
},
{
cx: midX + 3,
cy: midY - 25
},
{
cx: midX + 3,
cy: midY - 10
},
{
cx: midX + 3,
cy: midY + 5
},
{
cx: midX + 3,
cy: midY + 20
},
{
cx: midX + 3,
cy: midY + 35
},
{
cx: midX + 3,
cy: midY + 50
}];