Question

我有一个简单的画布，其中使用Rough.js库绘制矩形。我遇到的问题是Rough js将绘制模式随机化，因此每次调用矩形方法时，它似乎在requestAnimationFrame中抖动/抖动。我对图书馆不太熟悉，我想知道这里的任何人是否有任何经验来设置一些常数以强制以完全相同的方式绘制矩形或完全禁用随机化。

<html>
    <head>
        <script type='text/javascript' src="https://unpkg.com/roughjs@4.3.1/bundled/rough.js"></script>
    </head>
    <body>

        <canvas id="canvas" width="480" height="640"></canvas>

    </body>
    <script>
        window.addEventListener('DOMContentLoaded',event=>{
            let canvas = document.getElementById("canvas");
            let ctx = canvas.getContext('2d');
            let r = rough.canvas(canvas);
            function draw(tick){
                requestAnimationFrame(draw);
                ctx.clearRect(0,0,480,640);
                r.rectangle(50, 50, 80, 80, {
                    fill: 'rgba(255,0,200,0.2)',
                    fillStyle: 'solid' // solid fill
                });
            }
            requestAnimationFrame(draw);

        });
    </script>
</html>

运行摘要时，您会看到抖动/抖动。那就是我希望禁用的功能，希望有人可以帮助我解决这个问题。

Answer 1

您将要使用RoughGenerator创建一次矩形指令并重复使用：

let r = rough.canvas(canvas);

// First we set up a rectangle
let rect = r.generator.rectangle(50, 50, 80, 80, {
    fill: 'rgba(255,0,200,0.2)',
    fillStyle: 'solid' // solid fill
});

function draw(tick){
    requestAnimationFrame(draw);
    ctx.clearRect(0,0,480,640);

    // Then we draw it as many times as we want
    r.draw(rect);
}

Rough.js与requestAnimationFrame抖动/抖动

1 个答案: