fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

trianglify
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://qrohlf.com/trianglify/
GitHub:https://github.com/qrohlf/trianglify
网站描述:一个生成好看的 SVG 背景图片的库

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

链接: https://fly63.com/nav/1528

more>>
相关栏目
SVG.js
包括各种形状、线条、文本、路径等元素
官网GitHub
d3.js
基于HTML 和 SVG 的 JavaScript 可视化库
官网GitHub
incubator-echarts
百度团队开发的一款商业级数据图表
官网GitHub
g2
一套基于可视化编码的图形语法
官网GitHub
Chartist.js
JavaScript响应式图表库
官网GitHub
MetricsGraphics.js
一个基于 D3 的简洁的数据图表优化
官网GitHub
plotly.js
基于d3.js 和stack.gl开源的 JavaScript 图表库
官网GitHub
js-sequence-diagrams
一款基于 Javascript 的Web绘制时序图的工具
官网GitHub
C3.js
基于D3.js开发的JavaScript库
官网GitHub
crossfilter
一个数据计算模型,能够很好地结合DC.JS进行数据解析绘图
官网GitHub
Processing.js
擅长创建2D和3D图象,可视化数据套件,音频,视频等
官网GitHub
flowchart.js
基于SVG的流程图插件
官网GitHub
Velocity.js
一个简单易用、高性能、功能丰富的轻量级JS动画库
官网GitHub
popmotion.js
一款小巧,灵活的 JavaScript 运动引擎
官网GitHub
js2flowchart.js
将任何 JavaScript 转换成漂亮的 SVG 流程图的可视化的图表库
点击进入GitHub
jsplumb
一个开源的流程图或拓扑图绘制工具库(绘制页面链接线)
官网GitHub

手机预览