画布元素过多情况下拖拽或缩放画布会卡顿 #4833

建议：是否可以参考fabric或者其他库的做法，先将画布内容转存为为图片，然后隐藏元素，对图片进行缩放和平移，等结束之后再将元素在对应位置显示，移出图片

这个有类似的优化的，比如 drag-canvas，zoom-canvas 的 enableOptimize 配置 https://g6.antv.antgroup.com/manual/middle/states/default-behavior#drag-canvas

另外性能优化可以参考：https://g6.antv.antgroup.com/manual/faq/performance-opt

``> > 建议：是否可以参考fabric或者其他库的做法，先将画布内容转存为为图片，然后隐藏元素，对图片进行缩放和平移，等结束之后再将元素在对应位置显示，移出图片

这个有类似的优化的，比如 drag-canvas，zoom-canvas 的 enableOptimize 配置 https://g6.antv.antgroup.com/manual/middle/states/default-behavior#drag-canvas

这个方案之前已经尝试过了，隐藏了非keyShape的元素和边，确实可以使平移和缩放更平滑一点，但考虑用户体验的话，用户可能并不会接受这种方式，目前在尝试自定义拖拽和缩放的交互，就是元素多的时候生成图片会比较慢，不知有没有好的建议

简单的写了一下实现： ` import G6, { Graph } from "@antv/g6";

let isMouseDown = false; let point = { x: 0, y: 0 }; let canvasBBox: any = null; let image: any = null; let countIndex: number = 0;

G6.registerBehavior("drag-group-canvas", { getEvents() { return { "mousedown": "onMouseDown", "mousemove": "onMouseMove", "mouseup": "onMouseUp", }; }, onMouseDown(e) { if (e.item) { return; }

    if (!countIndex) {
        countIndex++;
        point.x = e.canvasX;
        point.y = e.canvasY;
        isMouseDown = true;

        const graph = this.graph as Graph;
        const group = graph.getGroup();
        const canvas = graph.getContainer().firstChild as HTMLCanvasElement;
        const context = canvas.getContext("2d");
        const { x, y, width, height } = group.getCanvasBBox();
        canvasBBox = { x, y, width, height };

        let satrt = performance.now()
        graph.toFullDataURL(res => {
            group.hide();
            image = new Image();
            image.src = res;
            image.onload = () => {
                image && context?.drawImage(image, x, y, width, height);
                console.log(`${performance.now() - satrt}ms`)
            }
        }, 'image/jpeg', {
            padding: 0,
            backgroundColor: "#fff"
        })
    }
},
onMouseMove(e) {
    var self = this;
    const graph = self.graph as Graph;
    const canvas = graph.getContainer().firstChild as HTMLCanvasElement;
    const context = canvas.getContext("2d");

    if (isMouseDown && image) {
        // 移动group
        const dx = e.canvasX - point.x;
        const dy = e.canvasY - point.y;
        canvasBBox.x = canvasBBox.x + dx;
        canvasBBox.y = canvasBBox.y + dy;
        context?.clearRect(0, 0, canvas.width, canvas.height);
        context?.drawImage(image, canvasBBox.x, canvasBBox.y, canvasBBox.width, canvasBBox.height);
        point.x = e.canvasX;
        point.y = e.canvasY;
    }
},
onMouseUp(e) {
    isMouseDown = false;
    countIndex = 0;
    if (!image || !canvasBBox) return;
    var self = this;
    const graph = self.graph as Graph;
    const canvas = graph.getContainer().firstChild as HTMLCanvasElement;
    const context = canvas.getContext("2d");
    context?.clearRect(0, 0, canvas.width, canvas.height);

    const group = graph.getGroup();
    group.show();
    const { x, y } = group.getCanvasBBox();

    group.translate(canvasBBox.x - x, canvasBBox.y - y);

    image = null;
    canvasBBox = null;
}

}) `

生成图片慢，而且如果画布内容范围很大的话，生成图片还有可能崩溃

现在有多少点边，也许可以考虑 5.0 的 webgl 渲染。但目前 5.0 还在 beta 阶段 https://g6-next.antv.antgroup.com/zh/examples/performance/perf/#evaWebGL

生成图片慢，而且如果画布内容范围很大的话，生成图片还有可能崩溃

这个确实会有这个问题，暂时还是使用的 https://g6.antv.antgroup.com/manual/middle/states/default-behavior#drag-canvas 这个方案

现在有多少点边，也许可以考虑 5.0 的 webgl 渲染。但目前 5.0 还在 beta 阶段 https://g6-next.antv.antgroup.com/zh/examples/performance/perf/#evaWebGL

好的，我尝试一下

This issue has been closed because it has been outdate for a long time. Please open a new issue if you still need help.

这个 issue 已经被关闭，因为 它已经过期很久了。 如果你仍然需要帮助，请创建一个新的 issue。