Entrada destacada

Como usar enums en Android, kotlin

el
0

Crear una aplicación de dibujo con JavaScript (parte 1)

el
Código para hacer una sencilla aplicación de dibujo 2D utilizando <canvas> de HTML5 y JavaScript. 


Este puede considerarse un ejemplo avanzado de la introducción al dibujo de las entradas anteriores que se han publicado en Curioseando En Programación acerca de CANVAS los cuales puedes encontrar haciendo clic en el siguiente enlace html-5-canvas.

 En este tutorial se explican sólo las partes importantes para crear la aplicación, si te es muy complicado entender lo que se explica en este tutorial te recomiendo revisar antes las entradas en html-5-canvas.

Lo que aprenderás en esta entrada


Ya que él código necesario para la creación de está aplicación es extenso, se ha dividido en varias partes en está entrada se explica como está compuesta la estructura html, cómo agregar bootstrap para ordenar las secciones del documento html y un poco de CSS para personalizar colores, margenes, tamaños entre otras propiedades.

Estructura base


Para tener todos los archivos del proyecto ordenados creamos distintos directorios, el directorio AppDibujo es el contenedor principal del proyecto, en assets meteremos todas la librerías auxiliares, tales como bootstrap para que nos sea más fácil diseñar la página, los iconos de font-aweson para mejorar la presentación, jquery para agilizar el desarrollo en javascript y modernizr para validar el soporte de canvas en el navegador. Dentro del directorio css irán todos los archivos .css de los estilos que nosotros crearemos y en el directorio js pondremos el código fuente que hará que nuestra aplicación funcione.

Enlaces para descargar las librerías mencionadas.

Bootstrap - https://getbootstrap.com/docs/3.3/
JQuery - https://code.jquery.com/jquery-3.3.1.min.js
Modernizr - https://modernizr.com/download?canvas-setclasses: pulsar BUILD y descargar el primer archivo.

Agregar lo siguiente al archivo Index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>App de Dibujo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="container">
    <header class="row well well-inverse text-center">
        <h1 class="titulo"> App de Dibujo </h1>
    </header>
    <section class="row">
        <section class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-body">
                    <canvas id="canvas" width="640" height="480"></canvas>
                </div>
            </div>
        </section>
        <aside class="col-md-4">
            <section class="controles panel panel-primary">
                <div class="panel-heading text-center">
                    <h2 class="panel-title">Controles de dibujo</h2>
                </div>
                <div class="panel-body">
                </div>
            </section>
            <section class="panel panel-primary">
                <div class="panel-heading text-center">
                    <h2 class="panel-title">Controles de forma</h2>
                </div>
                <div class="area-controles panel-body">
                </div>
                <div class="panel-footer">
                    <p class="text-right">
                        <button class="btn btn-warning" id="btnDibujar">
                            <i class="icono glyphicon glyphicon-picture"></i> Dibujar
                        </button>
                    </p>
                </div>
            </section>
        </aside>
    </section>
</section>
<script src="assets/js/modernizr-custom.js"></script>
<script src="assets/jquery/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Dentro del cuerpo del documento tendremos 3 secciones importantes; el titulo (líneas 13 a 15), el área de dibujo (líneas 17 a 23) y la sección de los controles de dibujo la cual también estará compuesta por dos subareas; en la primera podremos elegir que figura deseamos utilizar para dibujar y la segunda mostrará las configuraciones de la figura seleccionada.

Hasta este punto la vista se ve de la siguiente forma.

Todo el contenido que se desea maquetar con Bootstrap debe estar contenido en un elemento con clase .container y poder usar el sistema de rejilla, la clase .row es usada para definir filas y a su vez .col para definir columnas, cada fila está compuesta por 12 columnas, .col-md-8 crea una columna con 8 columnas agrupadas. Usamos un well para resaltar la sección del encabezado y para las demás secciones crearemos paneles mediante las clases .panel, .panel-heading, .panel-body, .panel-title y .panel-footer las cuales definen cada una de las partes de un panel.

Agreguemos estilos css personalizados para darle forma a la vista principal.

Agrega el siguiente código al archivo style.css (css/style.css).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.well-inverse{
    background: #5599ee;
    padding: 0 10px 16px 10px;
    border: 1px solid #2a2deb;
}
.titulo{
    color: #ffc66d;
    font-family: Pacifico, Serif;
    font-size: 3em;
    text-shadow: 1px 1px 10px #e2462d;
}
.panel-primary{
    background: #5599ee;
}
.container{
    margin-top: 1em;
}
.icono{
    margin: 0 5% 0 5%;
}
.control-label{
    padding-top: 2%;
}
.panel-footer{
    padding: 6px 10px 1px 1px;
    background: #337ab7;
}
.color{
    padding: 4px;
}
.row{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
section .row {
    border: 1px dotted #2a2deb; 
    padding-top: 20px; 
    border-radius: 4px;
}
legend{
    border-bottom: 1px solid #ffc66d;
}
body{
    background: #accbff;
}
canvas{
    border: 1px solid black;
}

Finalmente la página se verá de la siguiente forma.

No es necesario que se comprenda del todo lo que se presento en esta parte del tutorial, sólo asegúrate que al final de copiar todo el código en cada uno de los archivos se muestre un resultado parecido al de la figura anterior.

En la siguiente sección comenzaremos a programar los controles de dibujo. 

Comentarios

Publicar un comentario