Closed No54 closed 2 months ago
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;
}
单根线这么多的点是会容易卡(你分成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
单根线这么多的点是会容易卡(你分成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);
}
单根线这么多的点是会容易卡(你分成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);
}
我使用如下代码进行测试,循环到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.
`
`