Question

jsfiddle here：http://jsfiddle.net/yw0w18m3/2/

我使用paper.js制作一个看起来像这样的背景图片：

enter image description here

基本上，我在一个循环上创建了几千个三角形，并在每次迭代时旋转它们。

function Tri(x, y, rotate) {
    var tri = new Path([
        new Point((x - 42), (y - 48)),
        new Point((x - 42), y),
        new Point(x, (y - 24)), 
        new Point((x - 42), (y - 48)) 
    ]);

    tri.fillColor = {
        hue: Math.random() * 360,
        saturation: 0,
        brightness: ( (( Math.random() ) * .95) + .3 )
    };

    if(rotate) { tri.rotate(180); } 
}

for (var i = 0; i < 2000; i++) {
    rotate = false;

    if( i % 2 ) {
        rotate = true;
    }

    new Tri(x, y, rotate);

    x = x + 42;

    if( x > (winWidth + 42) ) {
        x = 0   ;
        y = y + 24;
    }
}

虽然正在绘制形状，但似乎有短暂的1-2秒暂停/冻结。是否有更有效的方法来首先绘制所有形状（或推送到数组），然后一次性将添加到画布中？

我的代码基于此示例：http://paperjs.org/examples/candy-crash/（点击＆＃34;来源＆＃34;在右上角）。

非常感谢任何帮助。

谢谢！

Answer 1

我最终会创建两个三角形，一个旋转，因此不必每次都从新点构建它们。然后根据旋转变量选择正确的三角形并克隆它，而不是每次从头开始创建点和三角形。最后，只需更改克隆三角形的位置即可。

最后，我会更正maxTri，因此它不会超出需要。 paren应该遵循48而不是24.你做的三角形数量超过了所需的三角形。

以下是我根据您的代码创建的sketch.paperjs.org解决方案的链接。我发现草图比jsfiddle更容易使用纸张示例。

proto1 = new Path([
    new Point(0, -24),
    new Point(0, 24),
    new Point(42, 0)
    ]);
proto1.closed = true;

proto2 = proto1.clone();
proto2.rotate(180);


function putTriangle(pos, rotate) {
    var tri = (rotate ? proto2 : proto1).clone();
    tri.position = pos;
    tri.position = tri.position.subtract([21, 0])
    tri.fillColor = {
        hue: Math.random() * 360,
        saturation: 0,
        brightness: Math.random() * 0.5 + 0.5
    }
}
var tris = [],
    x = 42,
    y = 24,
    rotate,
    winWidth = paper.view.size.width,
    winHeight = paper.view.size.height,
    rows = (winHeight + 48) / 24,
    cols = (winWidth + 42) / 42,
    numTri = rows * cols,
    numTriOrig = (winWidth + 42) / 42 * (winHeight + 48 / 24);

//console.log(numTri, numTriOrig);

x = 0;
y = 0;

for (var row = 0; row < rows; row++) {
    rowrotate = row % 2;
    for (var col = 0; col <= cols; col++) {
        rotate = rowrotate ^ col % 2;
        putTriangle([x,y], rotate);
        x += 42;
    }
    x = 0;
    y = y + 24;
}

Answer 2

两个想法：

我看到你使用旋转将三角形转换为位置。这是一项昂贵的操作。您可以使用较少的几何和更换来替换旋转。三角形方向的更多算术计算。

另外，我看到填充颜色随着每个三角形而改变，并且状态变化（如填充）非常昂贵。您可以将所有类似颜色的三角形分组并一次性绘制它们。

Paper.js：在循环上绘制许多迭代形状的最快方法

2 个答案: