Question

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

这是我的示例代码：

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

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

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 + '")';

希望这有帮助！

Answer 3

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

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/

使用Trianglify设置div背景

3 个答案:

使用Trianglify设置di​​v背景

3 个答案:

使用Trianglify设置div背景