RavishaHesh / PDFJsAnnotations

Wrapper for PDF JS to add annotations
MIT License
322 stars 98 forks source link

can you suggest or add a zoomIn and zoomOut on pdf viewed #48

Open sahil-binekar opened 2 years ago

sahil-binekar commented 2 years ago

it would be really great if this project have a zoomIn and zoomOut feature because pdf.js already have that functionality. I tried to implement by increasing and decreasing scale value, but i just don't know how to receive the value in var PDFannotation >> option. Rest the project is amazing

bzxgcs commented 2 years ago

Yes, I hope the toolbar of pdf.js could be retained, too.

jesesqui commented 2 years ago

// add in index.html

<input id="test" min=".5" max="2" value='1' step=".5" onchange="showVal(this.value)" type="range" />
<div id="pdf-container" class="scroll"></div>

//add in script.js

function setZoom(zoom,el) {

      transformOrigin = [0,0];
       el = el || instance.getContainer();
        var p = ["webkit", "moz", "ms", "o"],
            s = "scale(" + zoom + ")",
            oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";

        for (var i = 0; i < p.length; i++) {
            el.style[p[i] + "Transform"] = s;
            el.style[p[i] + "TransformOrigin"] = oString;
        }

        el.style["transform"] = s;
       el.style["transformOrigin"] = oString;

}

function showVal(a){
   var zoomScale = Number(a);
   setZoom(zoomScale,document.getElementsByClassName("scroll")[0])
}

//add in style.css

.scroll {
    width: 98%;
    height: 1200px;
    background-color: #ccc;
    overflow-y: scroll;
    margin-left: auto;
    margin-right: auto;
}
nuriakman commented 1 year ago

setZoom

Where is setZoom function source code?