React-pdf: ضع نقطة أسفل الماوس عند التكبير

تم إنشاؤها على ٢٨ نوفمبر ٢٠١٩  ·  3تعليقات  ·  مصدر: wojtekmaj/react-pdf

أحاول استنساخ وظيفة التكبير viewer.js التصغير في Firefox

نتيجة متوقعة:
أثناء التكبير ، يجب أن تظل النقطة الموجودة في ملف PDF التي تم تحريك الماوس فوقها أسفل الماوس بعد التكبير.
متوقع

نتيجة فعلية:
يتم تمرير الصفحة بطريقة غريبة نوعًا ما.
نتيجة
كلما قمت بالتمرير لأسفل في المستند ، كلما فشل في التعويض.

أنا فقط أستخدم خاصية scale للصفحات.

أنا أستخدم نفس الكود الذي يستخدمه Firefox لزيادة / تقليل التكبير ، وكذلك لحساب تعويض التمرير ، ولكن يبدو أنه لا يعمل.

هذا ما لدي

لأداء تعويض التمرير الفعلي:

    componentDidUpdate(prevProps, prevState, snapshot)
    {
        if (prevState.zoom !== this.state.zoom)
        {
            const viewer              = this.content.current
            let scaleCorrectionFactor = this.state.zoom / prevState.zoom - 1
            let rect                  = viewer.getBoundingClientRect()
            let dx                    = this.mouseX - rect.left  // mouseX/Y are mouse coordinates on screen
            let dy                    = this.mouseY - rect.top

            viewer.scrollLeft += dx * scaleCorrectionFactor
            viewer.scrollTop += dy * scaleCorrectionFactor
        }
    }

وللتحكم في التكبير (التصغير هو نفسه ، فقط لعكس ذلك):

    zoomIn(ticks)
    {
        this.setState(prevState => {
            let newZoom = prevState.zoom

            do
            {
                newZoom = (newZoom * DEFAULT_SCALE_DELTA).toFixed(2)
                newZoom = Math.ceil(newZoom * 10) / 10
                newZoom = Math.min(MAX_SCALE, newZoom)
            } while (--ticks > 0 && newZoom < MAX_SCALE)

            return {
                zoom: newZoom
            }
        })
    }

لقد كنت في هذا لفترة من الوقت وكل ما يمكنني التفكير فيه هو أن له علاقة بـ DPI أو ما شابه ، على ما أتخيل.
الإجابة الواضحة هي أن scaleCorrectionFactor غير صحيح وفشل في حساب شيء ما.

question

التعليق الأكثر فائدة

يبدو أنني قمت بحلها ، فإليك الحل لأي شخص يحاول شيئًا مشابهًا.

getSnapshotBeforeUpdate(prevProps, prevState)
{
    return {x: this.content.current.scrollLeft, y: this.content.current.scrollTop}
}

componentDidUpdate(prevProps, prevState, snapshot)
{
    if (prevState.zoom !== this.state.zoom)
    {
        const viewer              = this.content.current
        let scaleCorrectionFactor = (this.state.zoom / prevState.zoom) - 1
        let rect                  = viewer.getBoundingClientRect()
        let dx                    = this.mouseX - rect.left
        let dy                    = this.mouseY - rect.top

        viewer.scrollLeft = snapshot.x * (this.state.zoom / prevState.zoom) + (dx * scaleCorrectionFactor)
        viewer.scrollTop = snapshot.y * (this.state.zoom / prevState.zoom) + (dy * scaleCorrectionFactor)
    }
}

سأترك هذا مفتوحًا في حال نسيت شيئًا ما وهذا لا يغطي كل حالة.

ال 3 كومينتر

يبدو أنني قمت بحلها ، فإليك الحل لأي شخص يحاول شيئًا مشابهًا.

getSnapshotBeforeUpdate(prevProps, prevState)
{
    return {x: this.content.current.scrollLeft, y: this.content.current.scrollTop}
}

componentDidUpdate(prevProps, prevState, snapshot)
{
    if (prevState.zoom !== this.state.zoom)
    {
        const viewer              = this.content.current
        let scaleCorrectionFactor = (this.state.zoom / prevState.zoom) - 1
        let rect                  = viewer.getBoundingClientRect()
        let dx                    = this.mouseX - rect.left
        let dy                    = this.mouseY - rect.top

        viewer.scrollLeft = snapshot.x * (this.state.zoom / prevState.zoom) + (dx * scaleCorrectionFactor)
        viewer.scrollTop = snapshot.y * (this.state.zoom / prevState.zoom) + (dy * scaleCorrectionFactor)
    }
}

سأترك هذا مفتوحًا في حال نسيت شيئًا ما وهذا لا يغطي كل حالة.

تضمين التغريدة
مهلا! أتساءل فقط إلى أي مدى وصلت إلى استنساخ برنامج viewer.js من Mozilla؟
شكرا

تضمين التغريدة
لقد أحرزت قدرًا كبيرًا من التقدم ، لكنه للأسف ليس معياريًا جدًا في الوقت الحالي. لقد تم إنشاؤه لعرض تجريبي وليس لدي الحق في توزيع الكود ، وإلا فإنني سأحب مشاركته.
ومع ذلك ، إذا كانت وظيفة التكبير / التصغير هي التي تبحث عنها ، فقد أجريت بعض التغييرات على إجابتي أعلاه إذا كنت بحاجة إلى ذلك.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات