Con el fin de mejorar la eficiencia del desarrollo de front-end , el autor ha escrito cientos de herramientas de front-end, algunas son para uso interno de la empresa y otras simplemente porque son demasiado " perezosos " para escribir código, por lo que se ven " obligados " a hacerlo. Una herramienta del generador de triángulos css también se debe a que antes quería liberar la productividad del diseñador, y era demasiado vago para cortar imágenes o escribir csscódigo, así que después de pensarlo, debería hacer una herramienta que pueda generar automáticamente código css triangular .
A continuación, lo llevaré a presentar el propósito y la implementación de esta herramienta, para que pueda expandir más " herramientas perezosas " en el futuro .
Vista previa del generador de triángulos CSS en línea
De la animación de vista previa, podemos ver que a través de herramientas en línea podemos configurar fácilmente todo tipo de triángulos que queramos, y podemos ver el csscódigo en tiempo real . Después de desarrollar esta herramienta, ya no tengo que preocuparme por escribir códigos triangulares. Es posible, de hecho, muchas veces simplemente no quiero escribir código y quiero tener dinero) Al final del artículo, el autor adjuntará cssla dirección online de la herramienta A continuación, echemos un vistazo al proceso de implementación específico.
Implementar el generador de triángulos CSS
Debido a que la demanda de esta herramienta vino desde el frente, debe estar encendida cssy jstener alguna programación básica, como css3 transform, transitiondiseño, modelo de caja, bordercaracterísticas de contorno.
Como cualquier herramienta de código abierto que el autor haya escrito anteriormente, debes aclarar los requisitos y objetivos antes de desarrollar el proyecto. Aquí, el autor organiza brevemente los requisitos:
Genera triángulos de cualquier tamaño (tamaño)
Genera triángulos en diferentes posiciones (dirección)
Generar triángulos con diferentes ángulos (rotar)
Genere triángulos con diferentes colores de fondo (color, de hecho, no importa si esto está realmente implementado, principalmente porque el autor es perezoso para escribir este código)
Después de comprender los requisitos, podemos dibujar aproximadamente un diagrama prototipo simple para representar nuestra cssinterfaz de generador, de la siguiente manera:
Con el diagrama de prototipo, podemos obtener el siguiente diagrama de desglose de tareas:
El punto que quiero mencionar aquí es que el proceso anterior es realmente aplicable a cualquier proyecto, incluidos los problemas insolubles que encuentre. Puede aclarar las ideas paso a paso y desarmar los grandes objetivos en pequeños objetivos, y luego uno por uno. Rómpelo y el gran problema se resolverá.
A continuación, analicemos cssel principio de usar triángulos.
1. El principio del triángulo de dibujo css
De hecho, antes de que el autor del artículo también comparta con tres o más cssprogramas de uso para lograr triángulo, donde el autor describe un método general, que se utiliza borderpara lograr triángulo, veamos la siguiente ilustración:
Estos son los espectáculos cuando los elementos de la caja son widthmás pequeños que su borderapariencia cuando el ancho de la caja y cuando el ancho de la caja border-widthno es el camino a cero a través de un análisis gráfico no es muy fácil pensar si solo quiero un lado del color, el otro transparente ¿Puede la cara convertirse en un triángulo?
De hecho, se logra de esta manera. Después de conocer este principio, continuaremos implementando el "triángulo" WYSIWYG.
2. Implementación del editor
La implementación del editor también es un tema antiguo de charla front-end. El autor escribió un editor muy complicado en el proyecto H5-Dooring , pero aquí solo necesitamos un editor estático y simple. La interfaz es la siguiente:
Podemos usar cualquier marco y biblioteca de componentes para darnos cuenta de que somos buenos en, como * vue3+ element plus, react + antd4.0el autor aquí adopta reactprogramas para lograr, utilizando las comunidades de selector de color más famosas react-color.
El autor no presentará el código de la interfaz del editor uno por uno, creo que todos pueden darse cuenta, hablemos de la lógica de intercambio de datos de estilo:
Queremos asegurarnos de que el área de vista previa y el área de vista previa del código CSS puedan cambiar en tiempo real con el cambio del valor del formulario. Aquí, los datos del formulario deben ser compartidos. Podemos usar el reactcomponente stateo vueel vuex(aunque los datos se pueden actualizar sin vuex) para compartir el estado.
3. Realización del área de vista previa
El área de vista previa se implementa en realidad con el análisis anterior. Solo necesita usar los formdatos compartidos para enlazar con el estilo del elemento triángulo. El autor también cssimplementa el fondo del lienzo aquí , como se muestra a continuación:
Puedes cv si estás interesado, el código es el siguiente:
.previewArea {
display: inline-block;
width: 360px;
height: 360px;
background: #eee;
background-image: linear-gradient(45deg,rgba(0,0,0,.2) 25%, transparent 0, transparent 75%, rgba(0,0,0,.2) 0),
linear-gradient(45deg,rgba(0,0,0,.2) 25%, transparent 0, transparent 75%, rgba(0,0,0,.2) 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}
Otro punto clave es cómo cambiar la dirección del triángulo. Todos sabemos que varios atributos de dirección cambiarán después de que se cambie cssla dirección border. Por ejemplo, cuando la dirección del triángulo es hacia arriba, la nuestra es la csssiguiente:
{
border-width: 0 60px 60px 100px;
border-color: transparent transparent #06c transparent;
}
Cuando la dirección del triángulo es hacia abajo, la nuestra es la csssiguiente:
{
border-width: 100px 60px 0 60px;
border-color: #06c transparent transparent transparent;
}
La misma izquierda y derecha también son similares, por lo que necesitamos mantener 4 estilos. Si queremos agregar arriba a la izquierda, arriba a la derecha, abajo a la izquierda y abajo a la derecha más adelante, el código será muy difícil de mantener (no if elseeso switch, para ser honesto, solo es switchadecuado para juicios de 8 condiciones) Entonces, el autor aquí usa el método del objeto para resolverlo y lo encapsula en una función:
const getBorderWidthAndColor = (direction:string, w:number, h:number, color:string) => {
const borderWidthAndColor:any = {
'1': {
borderWidth: `0 ${w/2}px ${h}px ${w/2}px`,
borderColor:`transparent transparent ${color} transparent`
},
'2': {
borderWidth: `${h}px ${w/2}px 0 ${w/2}px`,
borderColor:`${color} transparent transparent transparent`
},
'3': {
borderWidth: `${h/2}px ${w}px ${h/2}px 0`,
borderColor:`transparent ${color} transparent transparent`
},
'4': {
borderWidth: `${h/2}px 0 ${h/2}px ${w}px`,
borderColor:`transparent transparent transparent ${color}`
}
}
return borderWidthAndColor[direction]
}
De hecho, las vistas previas de atributos como ancho, alto, color de fondo son fáciles de manejar, no las presentaré una por una aquí. La vista previa es la siguiente:
4. Visualización de código en tiempo real
En cuanto a la visualización en tiempo real del código en el cuadro de texto, esto también es muy fácil de implementar, solo necesitamos mostrar los datos obtenidos en el cuadro de texto en tiempo real. Debido a que el autor adopta el módulo CSS y el método de reacción para lograrlo, necesitamos agregar CSS Procesamiento, como convertir el formato del objeto al formato de especificación css, por lo que es necesario agregar los siguientes pasos:
JSON.stringify(triangleCss, null, 4).replaceAll(/"/g, '').replaceAll(/,/g, ';')
De esta manera, un generador de triángulos CSS está listo, y puede continuar expandiéndose sobre esta base, como polígonos de soporte, hexágonos, pentágonos, etc., y está completamente bien.
Dirección de experiencia en línea: generador de triángulos CSS en línea
Recientemente, el editor H5 H5-Dooring también ha realizado muchas actualizaciones y optimizaciones, y aquellos que estén interesados también pueden aprender e investigar.
Momento de relax
¿Lo encuentra útil? Recógelo si te gusta, por cierto, te gusta, ¡tu apoyo es mi mayor aliento! Wechat busca " Interesting Front-end " para encontrar conocimiento de front-end más interesante y combate real, como juegos H5, webpack, node, gulp, css3, javascript, nodeJS, visualización de datos de lienzo.