可生成多彩三角形网格SVG背景的js插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

Trianglify是一款能够生成多彩的三角形网格背景的javascript库，该插件可以生成非常好看的SVG背景图像，你可以将生成的背景图像下载保存为SVG文件。

SVG背景图像

Trianglify使用d3.js来生成多边形和SVG以及SVG过滤渲染效果。同时插件中还使用colorbrewer颜色调色板来使插件运行得更快。

安装

建议通过Bower来安装Trianglify：

bower install trianglify

或者使用nodejs

npm install trianglify

你也可以通过CDNJS来获取最新版本的Trianglify插件。

使用方法

Trianglify背景图像插件依赖于d3.js，要使用该背景图像插件首先要在页面中引入d3.js和trianglify.js。

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="trianglify.js"></script>

然后你可以创建一个新的Trianglify实例对象，并用它来生成各种背景图像模式：

var t = new Trianglify();
var pattern = t.generate(800, 600); // svg width, height
pattern.svg         // SVG DOM Node object
pattern.svgString   // String representation of the svg element
pattern.base64      // Base64 representation of the svg element
pattern.dataUri     // data-uri string
pattern.dataUrl     // data-uri string wrapped in url() for use in css
pattern.append()    // append pattern to . Useful for testing.

例如，要为<body>生成一个背景图像，并且通过内联CSS来应用它：

var t = new Trianglify();
var pattern = t.generate(document.body.clientWidth, document.body.clientHeight);
document.body.setAttribute('style', 'background-image: '+pattern.dataUrl);

颜色模式

你可以点击这里查看所有可用的colorbrewer调试板，或使用自定义的颜色模式。

应用举例

Basic Usage

window.open(new Trianglify({
    x_gradient: Trianglify.colorbrewer.PuOr[9],
    noiseIntensity: 0,
    cellsize: 90}).generate(700, 400).dataUri)

SVG背景图像

Differing x and y gradients

window.open(new Trianglify({
    x_gradient: Trianglify.colorbrewer.YlGnBu[9],
    y_gradient: Trianglify.colorbrewer.RdPu[9],
    noiseIntensity: 0.1,
    cellpadding: 10,
    cellsize: 100}).generate(700, 400).dataUri);

SVG背景图像-2

Cellpadding Close to cellsize/2

window.open(new Trianglify({
    cellpadding: 80,
    cellsize: 200}).generate(700, 400).dataUri)

SVG背景图像-3

配置参数

Trianglify背景图像插件的构造函数有一些可选的配置参数，你可以修改它们：

var t = new Trianglify({cellsize: 100, bleed: 150, ...});

下面是可用参数：

参数名称	描述	参数范围	默认值
cellsize	设置生成的背景图像单元格有多大	integers > 0	150
bleed	设置SVG可见区域外多远的范围会被渲染	integers > 0	cellsize
cellpadding	设置两个点之间的最小距离	integers > 0 and < cellsize/2	cellsize*0.1
noiseIntensity	设置noise过滤器的透明度。该参数绘制SVG渲染时有显著的影响，设置为0关闭它。	0 to 1	0
x_gradient	用于生成X轴渐变的颜色数组	array of colors in hexadecimal string format (i.e. ["#961E00", "#FF0000", "#EEEEEE"])	random selection from colorbrewer palettes
y_gradient	用于生成Y轴渐变的颜色数组	array of colors in hexadecimal string format (i.e. ["#961E00", "#FF0000", "#EEEEEE"])	x_gradient, brightened by a factor of 0.5
fillOpacity	设置单元格内部的透明度	0 to 1	1
strokeOpacity	设置单元格外边框的透明度	0 to 1	1