可生成多彩三角形网格SVG背景的js插件

当前位置:主页 > Html5库 > SVG > 可生成多彩三角形网格SVG背景的js插件
可生成多彩三角形网格SVG背景的js插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-02-15
    阅读:
简要教程

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