Button Down es-419 Explainer

Explicador de Botón abajo

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 buttons, que contiene objects que contienen las propiedades cx y cy.

El for…of loop iterará por el arreglo de objects y creará un nuevo círculo para cada object, usando las propiedades cx y cy del object para definir la posición del círculo en la pantalla.

Define el atributo 'cx' en button.cx, y el atributo 'cy' en button.cy.

Solución del código de ejemplo:

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 que se ejecuta antes del código del acertijo):

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
        }];
1 Like