trianglify

trianglify

trianglify 介绍

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

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

获取 Trianglify

你可以用你喜欢的包管理器来获取 Trianglify。

npm install trianglify

bower install trianglify

通过 CDNjs 将它引入到你的 html 中：

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

或者 clone 该库：

git clone https://github.com/qrohlf/trianglify.git

快速开始

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

<script>

var pattern = Trianglify({

width: window.innerWidth,

height: window.innerHeight

});

document.body.appendChild(pattern.canvas())

</script>

查看 https://qrohlf.com/trianglify 获取交互的例子，以及常用的 Trianglify 选项 。

如果你不是一个程序员，也可以通过可视化界面 来操作。

API

Trianglify 只暴露了一个方法到全局命令空间中，叫 Trianglify ，它接受一个单一的选项对象作为参数，然后返回一个模式对象。

var Trianglify = require('trianglify'); // 仅仅在 node.js 中需要

var pattern = Trianglify({width: 200,height: 200})

该模式对象包含有关生成图案的选项和几何数据，以及渲染的实现。

pattern.opts

包含用于生成图案的选项的对象

pattern.polys

组成图案的多边形的颜色和定点，按照下面的格式：

[

['color',[vertex,vertex,vertex]],

['color',

...

]

pattern.svg()

SVG 的渲染函数。返回一个 SVG 元素的 DOM 节点。

pattern.canvas([htmlCanvasElement])

canvas 的渲染函数。不传递参数则返回一个 htmlCanvasElement 的 DOM 节点。如果传入了一个已经存在的 canvas 元素作为参数，则将图案渲染到该 canvas 里面。

要在 node.js 中使用，需要安装可选的依赖 node-canvas

pattern.png()

PNG 的渲染函数。返回一个 base64 编码的 PNG 数据的 URI 。查看演示如何将其解码成一个文件 examples/save-as-png.js

选项

Trianglify 通过一个传入的选项对象作为唯一的参数来配置，支持下面的选项：

width

Integer,默认值 600。指定生成图案的宽度，单位为 px。

height

Integer,默认值 400。指定生成图案的高度，单位为 px。

cell_size

Integer,默认值 75。指定用于生成三角形的网格的尺寸大小。值越大，则越粗糙，越小，则越细腻。需要注意的是，很小的值将会明显增加 Trianglify 的运行时间。

variance

介于 0 到 1（包括1） 的小数，默认为 0.75。指定生成三角形的随机数量。

seed

Number 或者 string，默认值 null。创建重复图片的随机数生成器的种子。

x_colors

css 格式颜色的字符串或者数组,默认值是 'random'。指定 X 轴上使用的颜色渐变。有效的字符值为 'random' 或者 colorbrewer palette 上的一个颜色名（比如 'YlGnBu' 或 'RdBu'）。当设置成 'random' 时，将会从 colorbrewer 库随机选择一个渐变。有效的数组值应该以任意的 css 格式指定 color stops(比如 ['#000000','#4CAFE8','#FFFFFF'])。

y_colors

css 格式颜色的字符串或者数组，默认值是 'match_x'。当设置成 match_x 时，那么X 轴和 Y 轴将应用相同的渐变。 y_colors 接受和 x_colors 相同的参数值。

color_space

String，默认值 'lab'。设置用于生成渐变的颜色空间。支持的值有 rgb, hsv,hsl, hsi,lab 和 hcl。

color_function

指定一个自定义的函数来为三角形着色，默认为 null。接受你一个利用三角形中心为参数的 x，y 坐标来重写标准渐变色的函数。该函数返回一个 css格式的颜色字符串。这里有一个使用 HSL 颜色格式生成彩虹图案的例子：var colorFunc = function(x,y) {return 'hsl('+Math.floor(Math.abs(x*y)*360)+',80%,60%)';};var pattern = Trianglify({color_function: colorFunc})

stroke_width

Number，默认值 1.51。指定图案中三角形的边线宽度。默认值是一个在将图案渲染成 canvas 时消除锯齿的理想值。链接: http://www.fly63.com/nav/1528

网站地址:http://qrohlf.com/trianglify/

GitHub:https://github.com/qrohlf/trianglify

网站描述:一个生成好看的 SVG 背景图片的库

trianglify官方网站

官方网站：http://qrohlf.com/trianglify/

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。