L’element SVG permet crear un canvas on cada un dels elements és identificable i té els seus propis atributs. Aquest fet permet que es pugui controlar tota la imatge de la pantalla com a objectes independents.
El control d’esdeveniments és clau per generar una aplicació, permetrà la correcta execució del codi i la comunicació amb l’usuari.
La integració al DOM (document object model) ens permet tenir accessibles tots els elements de l’aplicació.
En aquesta unitat ens centrarem en:
- Conèixer i implementar els tipus de formes al SVG.
- Controlar els atributs dels elements de l’SVG.
- Integrar elements al DOM de forma dinàmica.
- Afegir controls d’esdeveniment amb addEventListener.
SVG:
ELEMENTS SVG (Scalable Vector Graphics).
Els elements SVG funcionen de la mateixa forma que un canvas, la diferència és que cada element svg és independent. Podeu veure la teoria explicada en aquest link. teoria i pràctica de l’svg.
Primer mostram a crear els objectes, després com es pot accedir a ells i després mostram com es poden manipular.
Crear SVG i afegir un objecte.
Un element SVG es crea sobre una pàgina html amb l’instrucció de marca:
<svg width=x height=y><element1><element2>...<elementN></svg>Per exemple un rectagle a la posició (10,30) amb amplada 180 i alçada 140 usaria la marca.
...<rect x=10 y=30 width=180 height=140 stroke="green" stroke-width=2 fill="lime"/>...El següent codi és un exemple de la implementació d’un rectangle sobre un svg:
See the Pen svg-0 by PereAntoni (@pereantoni) on CodePen.
Cada element que es dibuixa sobre l’element svg és independent dels altres elements i pot ser identificat i classificat. Així es poden manipular les seves propietats, ho podem fer desde javascript o CSS.
Amb el Javascript es pot manipular el contingut d’un SVG, s’han d’integrar els elements dins el DOM.
Tipus d’elements dins SVG.
Pots mirar tots els tipus d’elements al següent codi.
See the Pen svg-1 by Pere Antoni Melisucre (@pere-antoni-melisucre) on CodePen.
Dins un nou document “svg.html” has de fer tots els exercicis de svg.
Exercici 1
Amb les formes disponibles a SVG dibuixa un paissatge tipus infantil (casa, muntanya, camí, sol, …).
DOM:
INTEGRAR DINÀMICAMENT ELEMENTS AL DOM
Un dels objectius bàsics d’aquestes unitats és la d’aprendre a crear HTML que creixin de manera dinàmica i, a demès, es puguin controlar cada un dels objectes que formen l’estructura.
Per aconseguir aquests objectius hem de treballar amb l’inserció dinàmica al Document de Model d’Objectes (DOM). Són instruccions que des de Javascript ens permeten generar elements HTML identificats i classificats en el moment de la seva creació.
Per integrar un nou element ho feim seguint les passes:
- Saber a quin identificador hem de penjar la nova creació. (També es podria possar directament al l’arrel del document però no és el nostre cas). Per exemple a:
<div id="svg54583"></div> - Per crear el nou element ho feim amb l’instrucció createElementNS() que ens crea un SVG amb interacció. La pregunta és, quina diferència hi ha entre createElement i createElementNS? aquí la resposta, la conclusió és que si volem manipular atributs dinàmicament hem de usar createElementNS. Documentació de createElementNS.
var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - Per afegir un element seguim les passes: crear element, definir atributs i afegir a l’element svg.
var cir1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");cir1.setAttribute("id","node"+i);cir1.setAttribute("cx", Math.floor(Math.random() * 700));cir1.setAttribute("cy", Math.floor(Math.random() * 350));cir1.setAttribute("r", "30");cir1.setAttribute("fill", "blue");svg1.appendChild(cir1); - Afegir control d’esdeveniments de control:
document.getElementById("node"+i).addEventListener("click",function(){simple2(this)});
Observa la instrucció que s’usa per afegir un esdeveniment de control:
- agafam (node + i) l’element per id
- addEventListener(“click”,…), és com afegir un onclick dins el tag HTML.
- function(){simple2(this)}—->declaram la funció que volem que s’executi.
Donar this per paràmetre serveix per enviar el propi element que el crida. Així una mateixa funció pot ser executada per varis elements “iguals”.
explicació a w3schools
Un exemple de integració dinàmica “cada vegada que pitjem sobre un element ens crea una bolla”, els programa utilitza les següents funcions:
- main(): És la funció principal, la crida l’esdeveniment (event) onload del body. Crida dues funcions:
- creaEscenari(): És la funció encarregada de muntar tot l’escenari. Usa les intruccions d’integració amb javascript.
- afegirNode(): És una funció encarregada de crear un node a una posició no aleatòria de l’element svg. L’element l’identifica com a “patata”. També li agefeix un esdeveniment amb la crida a la funció simple2().
- creaNodeAleatori(): (cridada per un esdeveniment)
- Genera un node amb id node+i (on ‘i’ es va sumant a cada creació de node) a una posició aletòria.
- Afegeix un control d’esdeveniment que crida la funció simple2(this).
- simple2():
- mira dins la informació de paràmetre (li passam amb this) les dades id i posició.
- posa la informació sobre l’element identificat com a “info”
Observa l’implementació i execució al codi:
See the Pen SVG-Integrar Elements a DOM by Pere Antoni Melisucre (@pere-antoni-melisucre) on CodePen.
Exercici 2
Per fer aquest exercici has de fer un fork del codi anterior on hi has d’afagir els següents punts:
- Fes que quan s’executi l’aplicació es generin dos nodes aleatoris.
- Afegir informació que ha de sortir per pantalla, per exemple sobre un nou <p>.
De cada vegada que es crei una nova bolla. - Fes una funcio colorAleatori() que retorni un string de color aleatori. https://www.w3schools.com/css/css_colors.asp
- Si feim dos clicks sobre un element ha de desaparèixer.
- S’ha de controlar que sols es pitji una vegada sobre el botó “Crea Node cada tres segons”. https://www.w3schools.com/js/js_timing.asp
- Crea un input https://www.w3schools.com/tags/tag_input.asp que ens permeti triar el radi de creació dels següents elements.
- Crea un input type color que ens permeti triar el color dels següents elements.
Exercici 3
Dibuixa i fes el plantejament dels següents punts:
- Crear i mostrar un llistat de elements que aparèixen i què desaparèixen. Actualitzada. Explica com ho faràs i implementa desprès.
- Calcula la distància entre dos punts. click i click. Ha de sortir com a info.
- Fes una línia entre dos elements. dobleclick i dobleclick (explica)
EVENTS:
MANIPULAR DINÀMICAMENT ELS ATRIBUTS D’ELEMENTS INTEGRATS AL DOM
Els elements que s’insereixen dins un SVG poden controlar esdeveniments. En aquest cas mostram un exemple amb l’esdeveniment click sobre l’element, per implementar afegim dos conceptes al codi:
- Afegim control esdeveniment i enviam this com a paràmetre, és el propi element que crida l’acció de l’esdeveniment. Oberva la següent línia. Crida a una funció de manera semblant a com ho hem fet durant el curs. Fixa’t amb que estam enviant el propi objecte THIS!! mitjançant paràmetre.
<circle id="external-2"
onclick="baixa(this)"
cx=10 cy=50 r=10
stroke="green" stroke-width=1 fill="yellow">;Implementam la funció requerida per l’acció. Per SVG hem d’usar l’instrucció .setAttributeNS
function baixa(t){
var svg = document.getElementById($(t).attr("id"));
svg.setAttributeNS(null, "cy", parseInt($(t).attr("cy"))+1);
}
El següent exemple implementa un programa que detecta cada vegada que feim click sobre un dels objectes i els canvia de posició.
See the Pen SVG- Moviment, atributs dels objectes svg by Pere Antoni Melisucre (@pere-antoni-melisucre) on CodePen.
Exercici 4
Reimplementa el codi anterior, fes que cada vegada que es faci click sobre un element canvii la seva mida a +5px. I quan es faci doble click (cerca als esdeveniments) canvii -5px.
Exercici 5
Fes un diagrama de selecció d’un cercle. Ha de tenir la forma de selecció del gif insertat a l’unitat actual. Dibuixa sobre paper per calcular els 9 punts i relaciona els punts del diagrama respecte als del cercle.
