多语言展示
当前在线:921今日阅读:27今日分享:41

可生成多彩三角形网格背景的js插件应用介绍

Trianglify是一款能够生成多彩的三角形网格背景的javascript库,该插件可以生成非常好看的SVG背景图像,你可以将生成的背景图像下载保存为SVG文件。Trianglify使用d3.js来生成多边形和SVG以及SVG过滤渲染效果。同时插件中还使用colorbrewer颜色调色板来使插件运行得更快。
工具/原料

Trianglify.js、d3.js

安装

建议通过Bower来安装Trianglify:bower install trianglify                 或者使用nodejsnpm install trianglify                 你也可以通过CDNJS来获取最新版本的Trianglify插件。

使用方法
1

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

2

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

3

例如,要为生成一个背景图像,并且通过内联CSS来应用它:

颜色模式

你可以通过查看所有可用的colorbrewer调试板,或使用自定义的颜色模式。

应用举例
1

基本用法及效果window.open(new Trianglify({    x_gradient: Trianglify.colorbrewer.PuOr[9],    noiseIntensity: 0,    cellsize: 90}).generate(700, 400).dataUri)

2

不同的x和y梯度的用法及效果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);

3

点距接近单元格一半的用法及效果window.open(new Trianglify({    cellpadding: 80,    cellsize: 200}).generate(700, 400).dataUri)

配置参数

Trianglify背景图像插件的构造函数有一些可选的配置参数,你可以修改它们:var t = new Trianglify({cellsize: 100, bleed: 150, ...});    下面是可用参数:

推荐信息