请问百万咖啡杯有demo么？ (any million coffee cups demo?)

[No54]

我使用如下代码进行测试，循环到1w就感觉非常卡顿了，请问是有哪里需要设置么？

看了文档，没有找到关于性能相关的内容，还请大佬不吝赐教！

另外，卡顿是在缩放时，而非创建数据时

I used the following code for testing, and it kale when loops reached 10000.

Is there any config that needs to be set?

I read the document, but I couldn't find any content related to performance.

Please give me some advice! Thanks!

Additionally, stuttering occurs during scaling, not about data creation.

`

`

[No54]

import { onMounted } from 'vue';
import { Leafer, Line } from 'leafer-ui';

onMounted(() => {
    const leafer = new Leafer({
        view: window,
        fill: '#000000',
        wheel: { zoomMode: true }, //鼠标滚轮缩放
    });
    let points = [];
    for (let i = 0; i < 10000; i++) {
        let p1 = genRandom(0, 800);
        let p2 = genRandom(0, 800);
        points.push(p1);
        points.push(p2);
    }
    const lines = new Line({
        points: points,
        strokeWidth: 3,
        stroke: '#FF7200',
    });
    leafer.add(lines);
});

function genRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

[leaferjs]

单根线这么多的点是会容易卡（你分成1万根单独的线试试），咖啡的案例是做了场景优化，交互的性能优化还没做完： https://leaferjs.com/ui/sponsor/#%E6%8E%A8%E8%BF%9B%E6%80%A7%E8%83%BD%E5%8A%A0%E9%80%9F%E8%AE%A1%E5%88%92

[No54]

单根线这么多的点是会容易卡（你分成1万根单独的线试试），咖啡的案例是做了场景优化，交互的性能优化还没做完： https://leaferjs.com/ui/sponsor/#%E6%8E%A8%E8%BF%9B%E6%80%A7%E8%83%BD%E5%8A%A0%E9%80%9F%E8%AE%A1%E5%88%92

按您说的改了一下，生成确实快了，一下子就出来了

但是滚轮放大缩小，都还比较卡顿

期待交互优化

I made some changes as you said, and the generation is indeed faster, it came out in a flash.

But zooming in and out with the scroll wheel is still a bit laggy.

Looking forward to interaction optimization.

    const leafer = new Leafer({
        view: window,
        fill: '#000000',
        wheel: { zoomMode: true },
    });

    for (let i = 0; i < 10000; i++) {
        let p1x = genRandom(0, 800);
        let p1y = genRandom(0, 800);
        let p2x = genRandom(0, 800);
        let p2y = genRandom(0, 800);

        let r = getHexStr(genRandom(0, 255));
        let g = getHexStr(genRandom(0, 255));
        let b = getHexStr(genRandom(0, 255));

        let line = new Line({
            points: [p1x, p1y, p2x, p2y],
            strokeWidth: 3,
            stroke: '#' + r + g + b,
        });
        leafer.add(line);
    }

[No54]

单根线这么多的点是会容易卡（你分成1万根单独的线试试），咖啡的案例是做了场景优化，交互的性能优化还没做完： https://leaferjs.com/ui/sponsor/#%E6%8E%A8%E8%BF%9B%E6%80%A7%E8%83%BD%E5%8A%A0%E9%80%9F%E8%AE%A1%E5%88%92

按您说的改了一下，生成确实快了，一下子就出来了

但是滚轮放大缩小，都还比较卡顿

期待交互优化

I made some changes as you said, and the generation is indeed faster, it came out in a flash.

But zooming in and out with the scroll wheel is still a bit laggy.

Looking forward to interaction optimization.

    const leafer = new Leafer({
        view: window,
        fill: '#000000',
        wheel: { zoomMode: true },
    });

    for (let i = 0; i < 10000; i++) {
        let p1x = genRandom(0, 800);
        let p1y = genRandom(0, 800);
        let p2x = genRandom(0, 800);
        let p2y = genRandom(0, 800);

        let r = getHexStr(genRandom(0, 255));
        let g = getHexStr(genRandom(0, 255));
        let b = getHexStr(genRandom(0, 255));

        let line = new Line({
            points: [p1x, p1y, p2x, p2y],
            strokeWidth: 3,
            stroke: '#' + r + g + b,
        });
        leafer.add(line);
    }