在拖动滚动条向下滚动的时候会出现canvas 居中的情况（在滚动过程中没有更新canvas的x坐标）

[GuoJikun]

let scrollBarInstance = new ScrollBar(leaferInstance as any, {
        theme: 'light',
        minSize: 24,
    });

const renderPage = async () => {
    if (!pdfDoc) return
    if (!leaferInstance) return

    const width = leaferInstance.tree.width ?? 0

    let offsetY = 0

    for (let pageNum = 1; pageNum <= pager.value.total; pageNum++) {
        const page = await pdfDoc.getPage(pageNum)

        const viewport = page.getViewport({
            scale: pager.value.scale,
            rotation: pager.value.rotation,
        })

        const x = (width - viewport.width) / 2
        console.log(width, viewport.width, x)
        const canvasNode = new Canvas({
            x: x,
            y: offsetY,
            width: viewport.width,
            height: viewport.height,
            scale: pager.value.scale,
        })

        await page.render({
            canvasContext: canvasNode.context as unknown as CanvasRenderingContext2D,
            canvas: null,
            viewport,
        }).promise

        canvasNode.paint()
        leaferInstance.tree.add(canvasNode, pageNum)
        offsetY += viewport.height + 16

        page.cleanup()
    }

    // 渲染完成后使画布居中并更新滚动条
    nextTick(() => {
        // leaferInstance?.zoom('fit', 0, 'x')
        scrollBarInstance?.update()
    })
}

上面就是主要的代码，具体的可以点击查看

正常应该这样显示：

拖拽过程中就会出现：

[leaferjs]

最好是有一个playground的复现示例，会比较容易排查出原因

[GuoJikun]

最好是有一个playground的复现示例，会比较容易排查出原因

import { App, Canvas, PropertyEvent } from 'leafer-ui'
import '@leafer-in/view' // 导入视口插件
import '@leafer-in/viewport' // 导入视口插件
import '@leafer-in/animate' // 导入画布插件
import '@leafer-in/resize' // 导入画布插件
import { ScrollBar } from '@leafer-in/scroll' // 导入滚动条插件  //


let leaferInstance: InstanceType<typeof App> | null = null
let scrollBarInstance: InstanceType<typeof ScrollBar> | null = null
const pager: { current: number; total: number; scale: number; rotation: number } = {
    current: 1,
    total: 400,
    scale: 1,
    rotation: 0,
}
let pageNum = 1;

const renderPage = async () => {
    if (!leaferInstance) return

    const width = leaferInstance.tree.width ?? 0

    let offsetY = 0

    for (let pageNum = 1; pageNum <= pager.total; pageNum++) {

        const viewport = {
            width: 400,
            height: 400,
            scale: pager.scale,
            rotation: pager.rotation,
        }

        const x = (width - viewport.width) / 2
        console.log(width, viewport.width, x)
        const canvasNode = new Canvas({
            x: x,
            y: offsetY,
            width: viewport.width,
            height: viewport.height,
            scale: pager.scale,
        })

        const { context } = canvasNode

        context.fillStyle = '#FF4B4B'
        context.beginPath()
        context.roundRect(0, 0, 100, 100, 30)
        context.arc(50, 50, 25, 0, Math.PI * 2)
        context.fill('evenodd')

        context.fillStyle = '#FEB027'
        context.beginPath()
        context.arc(50, 50, 20, 0, Math.PI * 2)
        context.fill()


        canvasNode.paint()
        leaferInstance.tree.add(canvasNode, pageNum)
        offsetY += viewport.height + 16

    }

    scrollBarInstance?.update()
    
}

const initLeafer = () => {
    if (leaferInstance) return
    leaferInstance = new App({
        view: window,
        tree: { type: 'document' }, // 给 tree 层添加视口
        sky: {},
        fill: '#efefef',
        zoom: {
            min: 1,
            max: 5,
        },
    })
    scrollBarInstance = new ScrollBar(leaferInstance as any, {
        theme: 'light',
        minSize: 24,
    })

    leaferInstance.tree.on(PropertyEvent.LEAFER_CHANGE, (ev: PropertyEvent) => {
        const { attrName, newValue } = ev
        console.log('LEAFER_CHANGE', attrName, newValue)
        if (attrName === 'y') {
            const y = Math.abs(newValue as number)
            const children = (ev.target as any)?.children || []
            for (let i = 1; i <= children.length; i++) {
                const prevY = children[i - 1]?.y ?? 0
                const currentY = children[i]?.y ?? 0
                if (y > prevY && y < currentY) {
                    pager.current = i
                    pageNum = i
                    break
                }
            }
        }
    })
}

initLeafer()
renderPage()

把这段代码放到官方的 playground 里面就可以复现（没找到如何分享）

[leaferjs]

收到，争取下个版本修复一下

[GuoJikun]

收到，争取下个版本修复一下

官方的playground如果能增加分享就更好了