使用Trianglify设置di​​v背景

Question

我在使用Trianglify插件时遇到了一些问题.我想用它来设置一个背景div.我怎样才能做到这一点？我找不到合适的例子.

这是我的示例代码:

<script>
    var pattern = Trianglify({
    width: window.innerWidth, 
    height: window.innerHeight
});
document.body.appendChild(pattern.canvas())
</script>

另外,我可以div使用来自Trianglify的不同背景吗？

Answer 1

一个DIV

以下是将DIV背景设置为Trianglify模式的示例.它有点作弊并将DIV子节点设置为模式,但它应该适合你.

var something = document.getElementById('something');
var dimensions = something.getClientRects()[0];
var pattern = Trianglify({
    width: dimensions.width, 
    height: dimensions.height
});
something.appendChild(pattern.canvas());

DIV具有id,something并且在div的高度和宽度上设置CSS样式.

工作示例JSFiddle:http://jsfiddle.net/u55cn0fh/

多个DIV

我们可以轻松地为多个DIV扩展它,如下所示:

function addTriangleTo(target) {
    var dimensions = target.getClientRects()[0];
    var pattern = Trianglify({
        width: dimensions.width, 
        height: dimensions.height
    });
    target.appendChild(pattern.canvas());
}

JSFiddle:http://jsfiddle.net/u55cn0fh/1/

多个DIV作为真正的背景图像

以上只是将模式作为子节点附加到DIV,而不是将其设置为背景.好消息是我们确实可以background-image像这样使用CSS属性:

function addTriangleTo(target) {
    var dimensions = target.getClientRects()[0];
    var pattern = Trianglify({
        width: dimensions.width, 
        height: dimensions.height
    });
    target.style['background-image'] = 'url(' + pattern.png() + ')';
}

JSFiddle:http://jsfiddle.net/abL2kc2q/

Answer 2

我对这个答案已经很晚了，但我认为它仍然很有价值：

如果您对pattern.png()用于生成 PNG 版本不满意（就像我不满意一样），那么您还可以使用pattern.svg()更多的工作来设置 SVG 背景。

我总是倾向于使用 SVG 背景，因为它们通常更清晰。在我运行的一个测试用例中，使用 SVG 版本也节省了一些位（尽管它是相对的，因为发送 Trianglify 背景开始时有点负担）。

base64 SVG 编码中的字符：137284

base64 PNG 编码中的字符：195288

将SVG转换为base64编码然后设置为背景图片可以实现如下：

// Create the Trianglify pattern
var pattern = Trianglify({
    cell_size: 30,
    variance: 0.75,
    x_colors: 'random',
    y_colors: 'match_x',
    palette: Trianglify.colorbrewer,
    stroke_width: 1.51,
});

// Serialize the SVG object to a String
var m = new XMLSerializer().serializeToString(pattern.svg());

// Perform the base64 encoding of the String
var k = window.btoa(m);

// Query the element to set the background image property
var element = document.getElementsByTagName('header')[0];

// Set the background image property, including the encoding type header
element.style.backgroundImage = 'url("data:image/svg+xml;base64,' + k + '")';

希望这可以帮助！