使用Trianglify设置div背景

Question

使用Trianglify设置div背景

8

我有一些使用Trianglify插件的问题。我想将其用于设置div的背景。我该如何做？我找不到一个合适的例子。

这是我的示例代码：

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

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

- Marek

3个回答

5

我回答有点晚，但是我认为这仍然是有价值的：

如果你不满意使用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 + '")';

希望这能有所帮助！

- James Taylor

4

在我的情况下，我需要使用一个类来使用多个相同的背景图像实例：

var obj = {
    'trianglifiedlightblue': ['#a5cade', '#b7d5e5', '#d5e6f0', '#006ab4', '#e8f2f7', '#cee2ed'],
        'trianglifiedbleu': ['#004e83', '#005f9f', '#004879', '#006ab4', '#004777', '#005f9f'],
        'trianglifiedviolet': ['#680036', '#830447', '#e62f8e', '#c76c9b'],
        'trianglifiedrouge': ['#5f0308', '#851117', '#cf363f', '#e86d74']
};

function addTriangle(classname) {
    targets = document.getElementsByClassName(classname);
    for (i = 0; i < targets.length; i++) {
        target = targets[i];
        if (target != null) {
            var dimensions = target.getClientRects()[0];
            var pattern = Trianglify({
                width: dimensions.width,
                height: dimensions.height,
                x_colors: obj[classname],
                cell_size: 100 + Math.random() * 200
            });
            target.style['background-image'] = 'url(' + pattern.png() + ')';
        }
    }
}
addTriangle('trianglifiedlightblue');
addTriangle('trianglifiedbleu');
addTriangle('trianglifiedviolet');
addTriangle('trianglifiedrouge');

div {
    height: 100px;
    width: 500px;
    margin:10px;
    float:left;
    background:#efefef;
}

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



<div class="trianglifiedlightblue"></div>
<div class="trianglifiedbleu"></div>
<div class="trianglifiedviolet"></div>
<div class="trianglifiedrouge"></div>

如果您想保留ID，可以尝试以下方法：

http://jsfiddle.net/thecpg/Lecdhce6/10/

- CPG

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cymen · Accepted Answer

一个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());

工作示例 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-imageCSS属性：

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/