Impostazione div sfondo utilizzando Trianglify

Question

Ho alcuni problemi con il plug-in Trianglify. Mi piacerebbe usarlo per impostare lo sfondo di un div. Come posso fare questo? Non sono riuscito a trovare un esempio corretto.

Ecco il mio codice di esempio:

<script> 
    var pattern = Trianglify({ 
    width: window.innerWidth, 
    height: window.innerHeight 
}); 
document.body.appendChild(pattern.canvas()) 
</script> 

Inoltre, posso avere div s con background differenti che provengono da Trianglify?

Answer 1

Un DIV

Ecco un esempio di impostazione uno sfondo DIV ad un modello Trianglify. Truffa un po 'e imposta il nodo figlio DIV sul pattern, ma dovrebbe funzionare per voi.

var something = document.getElementById('something'); 
var dimensions = something.getClientRects()[0]; 
var pattern = Trianglify({ 
    width: dimensions.width, 
    height: dimensions.height 
}); 
something.appendChild(pattern.canvas()); 

Il DIV ha un ID di something e gli stili CSS sono impostati sul div per altezza e larghezza.

lavoro esempio JSFiddle: http://jsfiddle.net/u55cn0fh/

più DIV

Possiamo facilmente espandere questa per più DIV in questo modo:

function addTriangleTo(target) { 
    var dimensions = target.getClientRects()[0]; 
    var pattern = Trianglify({ 
     width: dimensions.width, 
     height: dimensions.height 
    }); 
    target.appendChild(pattern.canvas()); 
} 

JSFiddle: http://jsfiddle.net/u55cn0fh/1/

div multipli come una vera immagine di sfondo

Quanto sopra semplicemente aggiunge il modello al DIV come nodo figlio anziché impostarlo come sfondo. La buona notizia è che possiamo davvero usare la proprietà background-image CSS in questo modo:

function addTriangleTo(target) { 
    var dimensions = target.getClientRects()[0]; 
    var pattern = Trianglify({ 
     width: dimensions.width, 
     height: dimensions.height 
    }); 
    target.style['background-image'] = 'url(' + pattern.png() + ')'; 
} 

JSFiddle: http://jsfiddle.net/abL2kc2q/

Answer 2

Nel mio caso ho dovuto usare una classe di usare più istanze della stessa immagine di sfondo:

var obj = { 
 
    'trianglifiedlightblue': ['#a5cade', '#b7d5e5', '#d5e6f0', '#006ab4', '#e8f2f7', '#cee2ed'], 
 
     'trianglifiedbleu': ['#004e83', '#005f9f', '#004879', '#006ab4', '#004777', '#005f9f'], 
 
     'trianglifiedviolet': ['#680036', '#830447', '#e62f8e', '#c76c9b'], 
 
     'trianglifiedrouge': ['#5f0308', '#851117', '#cf363f', '#e86d74'] 
 
}; 
 

 
function addTriangle(classname) { 
 
    targets = document.getElementsByClassName(classname); 
 
    for (i = 0; i < targets.length; i++) { 
 
     target = targets[i]; 
 
     if (target != null) { 
 
      var dimensions = target.getClientRects()[0]; 
 
      var pattern = Trianglify({ 
 
       width: dimensions.width, 
 
       height: dimensions.height, 
 
       x_colors: obj[classname], 
 
       cell_size: 100 + Math.random() * 200 
 
      }); 
 
      target.style['background-image'] = 'url(' + pattern.png() + ')'; 
 
     } 
 
    } 
 
} 
 
addTriangle('trianglifiedlightblue'); 
 
addTriangle('trianglifiedbleu'); 
 
addTriangle('trianglifiedviolet'); 
 
addTriangle('trianglifiedrouge');

div { 
 
    height: 100px; 
 
    width: 500px; 
 
    margin:10px; 
 
    float:left; 
 
    background:#efefef; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.2.1/trianglify.min.js"></script> 
 

 

 

 
<div class="trianglifiedlightblue"></div> 
 
<div class="trianglifiedbleu"></div> 
 
<div class="trianglifiedviolet"></div> 
 
<div class="trianglifiedrouge"></div>

o se si preferisce mantenere un ID si può provare questo:

http://jsfiddle.net/thecpg/Lecdhce6/10/

Answer 3

sono abbastanza tardi per questa risposta, ma credo che sia ancora valido:

Se non siete soddisfatto con l'utilizzo di pattern.png() per generare una versione PNG (come non ero' t), quindi puoi anche usare pattern.svg() per impostare uno sfondo SVG con un po 'più di lavoro.

Io tendo sempre ad orientarmi verso l'utilizzo di sfondi SVG come in genere sono più nitidi. In un caso di test che ho eseguito, utilizzando la versione SVG anche i bit salvati (anche se è relativo perché l'invio di uno sfondo Trianglify è un po 'un peso per cominciare).

personaggi nella codifica Base64 SVG: 137284

caratteri nella codifica Base64 PNG: 195288

Conversione del SVG ad una codifica Base64 poi impostarla come immagine di sfondo possono essere raggiunti come segue:

// Create the Trianglify pattern 
var pattern = Trianglify({ 
    cell_size: 30, 
    variance: 0.75, 
    x_colors: 'random', 
    y_colors: 'match_x', 
    palette: Trianglify.colorbrewer, 
    stroke_width: 1.51, 
}); 

// Serialize the SVG object to a String 
var m = new XMLSerializer().serializeToString(pattern.svg()); 

// Perform the base64 encoding of the String 
var k = window.btoa(m); 

// Query the element to set the background image property 
var element = document.getElementsByTagName('header')[0]; 

// Set the background image property, including the encoding type header 
element.style.backgroundImage = 'url("data:image/svg+xml;base64,' + k + '")'; 

Spero che questo aiuti!