益吾库源码下载多彩多边形背景生成工具Trianglify.js

多彩多边形背景生成工具Trianglify.js

多彩多边形背景生成工具Trianglify.js
2022年10月13日 12:22:38益点益滴源码下载349

资源介绍

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

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

f8b0af46-d090-11e4-8d4c-6c7ef5bd9d37.png

先直接看一个最基本的示例吧

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Examples</title>
</head>
<body>
<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>
</body>
</html>


再来看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', [vertex, vertex, vertex]],
 ...
]

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 时消除锯齿的理想值。

const defaultOptions = {
 width: 600,
 height: 400,
 cellSize: 75,
 variance: 0.75,
 seed: null,
 xColors: 'random',
 yColors: 'match',
 fill: true,
 palette: trianglify.colorbrewer,
 colorSpace: 'lab',
 colorFunction: trianglify.colorFunctions.interpolateLinear(0.5),
 strokeWidth: 0,
 points: null}

width

整数,默认为600. 指定要生成的图案的宽度(以像素为单位)。

height

整数,默认为400. 指定要生成的图案的高度(以像素为单位)。

cellSize

整数,默认为75. 指定用于生成三角形的网格的像素大小。值越大,图案越粗,值越小,图案越精细。请注意,非常小的值可能会显着增加 Trianglify 的运行时间。

variance

0 到 1(含)之间的十进制值,默认为0.75. 指定生成三角形时使用的随机量。您可以将其设置为高于 1,但这样做可能会导致在边缘包含“间隙”的模式。

seed

字符串,默认为null. 播种随机数生成器以创建可重复的模式。当设置为 null 时,RNG 将使用来自环境的随机值作为种子。一个示例用法是将博客文章标题作为种子传递,以便为博客网站上的每篇文章生成独特但一致的三角化模式。

xColors

False、字符串或 CSS 格式颜色的数组,默认为'random'. 指定在 x 轴上使用的颜色渐变。

有效的字符串值是'random',或colorbrewer 调色板的名称(即'YlGnBu' 或'RdBu')。当设置为“随机”时,将从 colorbrewer 库中随机选择一个渐变。

有效的数组值应以任何 CSS 格式(即['#000000', '#4CAFE8', '#FFFFFF'])指定色标。

yColors

False,字符串或 CSS 格式颜色的数组,默认为'match'. 当设置为“匹配”时,将在两个轴上使用 x 轴颜色渐变。否则,接受与 xColors 相同的选项。

palette

random用于 xColors 或 yColors时要选择的颜色组合数组。请参阅src/utils/colorbrewer.js此数据的格式。

colorSpace

字符串,默认为'lab'. 设置用于生成渐变的色彩空间。支持的值为 rgb、hsv、hsl、hsi、lab 和 hcl。有关为什么这很重要的一些背景信息,请参阅此博客文章。

colorFunction

指定为三角形着色的自定义函数,默认为null. 接受一个覆盖标准渐变着色的函数,该函数传递了关于图案和每个多边形的各种数据,并且必须返回一个 Chroma.js 颜色对象。

有关内置颜色函数以及如何编写自定义颜色函数的更多信息,请参阅examples/color-function-example.html和。src/utils/colorFunctions.js

fill

布尔值,默认为true. 指定是否应填充 Trianglify 生成的多边形。

strokeWidth

数字,默认为 0。指定用于勾勒多边形轮廓的笔划宽度。这可以与 结合使用fill: false以生成类似网络的模式。

points

要进行三角剖分的点数组 ([x, y]),默认为 null。如果未指定,则会生成一个数组随机点来填充空间。点必须在 和 定义的坐标空间width内height。

超赞,真给力!嗯,必须鼓励~

打赏1

欢迎点评!或反馈疑问...

支持Ctrl+Enter提交
暂无留言,快抢沙发!
账号:mxy310@163.com[复制]
账号:77940140[复制]