js 图片查看器

/* ImageViewer 图片查看器

parameter:
    option: Object;

attribute:
    image: CanvasImage;
    scale: Number; //小于1缩小, 大于1放大

method:
    center(): this; //图片在视口居中
    setViewportScale: this; //将图片按比例缩放至视口大小
    setScale(v): this; //设置.scale
    setImage(image): this; //设置.image
    drawImage(): this; //更新图像 (之后需要.redraw()更新画布)

demo:
    const imageViewer = new ImageViewer({
        width: this.width, 
        height: this.width, 
        className: 'shadow-convex',
    });

    imageViewer.domElement.style = `
        background-color: rgb(127,127,127);
        border-radius: 4px;
        z-index: 99999;
        position: absolute;
    `;

    imageViewer.pos(100, 100).setImage(image)
    .setViewportScale().center()
    .drawImage().render();

*/
class ImageViewer extends CanvasAnimateRender{

    //允许图片的最大宽高 (min 不能小于1)
    #min = 1;
    #max = 4096; 

    constructor(option){
        super(option);

        this.eventDispatcher = new CanvasAnimateEvent(this);
        this.target = this.add(new CanvasAnimateCustom()).size(this.box.w, this.box.h);

        this.image = null;
        this.scale = 1;
        
        this._rangeMin = 0;
        this._rangeMax = 0;
        this._box = new Box();

        //拖拽事件
        var tzX = 0, tzY = 0;
        const onMove = event => {
            this._box.pos(event.pageX - this.domElementRect.x - tzX, event.pageY - this.domElementRect.y - tzY);
            this.drawImage().redraw();

        },

        onUp = () => {
            document.body.removeEventListener("pointerup", onUp);
            document.body.removeEventListener("pointermove", onMove);

            this.eventDispatcher.remove(this.target, 'up', onUp);
            this.eventDispatcher.remove(this.target, 'move', onMove);
            
        }

        this.eventDispatcher.add(this.target, "down", event =>{
            onUp();

            if(this.image === null) return;

            tzX = event.offsetX - this._box.x;
            tzY = event.offsetY - this._box.y;
            
            this.eventDispatcher.add(this.target, 'up', onUp);
            this.eventDispatcher.add(this.target, 'move', onMove);
            
            document.body.addEventListener("pointerup", onUp);
            document.body.addEventListener("pointermove", onMove);

        });

        //缩放事件 (以鼠标为中心点缩放)
        this.eventDispatcher.add(this.target, "wheel", event =>{

            const oldWidth = this._box.w;
            this.setScale(event.wheelDelta === 120 ? this.scale - this.scale * 0.5 : this.scale + this.scale * 0.5);

            const ratio = this._box.w / oldWidth,
            nx = event.offsetX - ((event.offsetX - this._box.x) * ratio + this._box.x) + this._box.x,
            ny = event.offsetY - ((event.offsetY - this._box.y) * ratio + this._box.y) + this._box.y;
            
            this._box.pos(nx, ny);
            this.drawImage().redraw();

        });

        //旋转事件


        this._onUp = onUp;

    }

    exit(){
        this._onUp();
        if(this.domElement.parentElement) this.domElement.parentElement.removeChild(this.domElement);

    }
    
    size(w, h, setElem){
        super.size(w, h, setElem);
        this.target.size(this.box.w, this.box.h);

        return this;
    }
    
    center(){
        this._box.pos((this.box.w - this._box.w)/2, (this.box.h - this._box.h)/2);

        return this;
        
    }

    setViewportScale(){
        if(this.image === null) return this;
        const width = this.image.width, ratio = width / this.image.height;
        
        return this.setScale(ratio < 1 ? ratio * this.box.w / width : this.box.w / width);
    }

    setScale(v){
        if(v === Infinity || isNaN(v) === true || typeof v !== "number") return this;
        this.scale = v < this._rangeMin ? this._rangeMin : v > this._rangeMax ? this._rangeMax : v;
        if(this.image !== null) this._box.size(this.image.width * this.scale, this.image.height * this.scale);
        return this;
    }

    setImage(image){

        if(this.isCanvasImage(image) === true){
            
            if(image.width > image.height){
                this._rangeMin = this.#min / image.width;
                this._rangeMax = this.#max / image.width;

            }

            else{
                this._rangeMin = this.#min / image.height;
                this._rangeMax = this.#max / image.height;

            }

            this.image = image;

        }

        else if(this.image !== null){

            this.image = null;
            this.target.clear();
            this.redraw();

        }

        return this;
    }

    drawImage(){

        if(this.image !== null) this.target.clear().context.drawImage(this.image, this._box.x, this._box.y, this._box.w, this._box.h);

        return this;
    }

}

 

parameter:

    option: Object; //继承父的参数

attribute:

    image: CanvasImage; //

 

    scale: Number; //小于1缩小, 大于1放大

method:

    center(): this; //图片在视口居中

 

    setViewportScale: this; //将图片按比例缩放至视口大小

 

    setScale(v): this; //设置.scale

 

    setImage(image): this; //设置.image

 

    drawImage(): this; //更新图像 (注意: 之后需要.redraw()更新画布)

demo:

 

 支持 图片缩放, 图片拖拽

　　　　　　　　document.body.style = `
                margin: 0;
                width: ${window.innerWidth}px;
                height: ${window.innerHeight}px;
                background-color: #000;
            `;

            //图片查看器
            const image = new CanvasAnimateCustom().size(100, 100).rect().fill('#54facf').image,

            imageViewer = new ImageViewer({
                width: 300, 
                height: 300,
            });

            imageViewer.domElement.style.background = '#fff';

            imageViewer.pos(100, 100).setImage(image)
            .setViewportScale().center()
            .drawImage().render();

提取地址: https://pan.baidu.com/s/1TV1j5BeZ7ZhidCq7aQXePA

提取码: 1111