鼠标滚轮CSS3缩放

时间:2016-09-30 06:58:55

标签: javascript css3

我使用此question中的示例。工作正常,但在这个答案minScale = 1。 我需要将minScale更改为> 0和< 1。但是在zoomOut上出了问题。 我怎么解决它?

我在

中更改了minScale
MouseZoom.prototype.zoom = function(){
// current scale
var previousScale = this.current.getScale();
// new scale
var newScale = previousScale + this.delta/10;
// scale limits
var maxscale = 20;
if(newScale<0.5){
    newScale = 0.5;
}
else if(newScale>maxscale){
    newScale = maxscale;
}
// current cursor position on image
var imageX = (this.mouseX - this.offsetLeft).toFixed(2);
var imageY = (this.mouseY - this.offsetTop).toFixed(2);
// previous cursor position on image
var prevOrigX = (this.current.getOriginX()*previousScale).toFixed(2);
var prevOrigY = (this.current.getOriginY()*previousScale).toFixed(2);
// previous zooming frame translate
var translateX = this.current.getTranslateX();
var translateY = this.current.getTranslateY();
// set origin to current cursor position
var newOrigX = imageX/previousScale;
var newOrigY = imageY/previousScale;

// move zooming frame to current cursor position
if ((Math.abs(imageX-prevOrigX)>1 || Math.abs(imageY-prevOrigY)>1) && previousScale < maxscale) {
    translateX = translateX + (imageX-prevOrigX)*(1-1/previousScale);
    translateY = translateY + (imageY-prevOrigY)*(1-1/previousScale);
}
// stabilize position by zooming on previous cursor position
else if(previousScale != 1 || imageX != prevOrigX && imageY != prevOrigY) {
    newOrigX = prevOrigX/previousScale;
    newOrigY = prevOrigY/previousScale;
        //frame limit
}
// on zoom-out limit frame shifts to original frame
    if(this.delta <= 0){
        var width = 500;
        var height = 350;
        if(translateX+newOrigX+(width - newOrigX)*newScale <= width){
            translateX = 0;
            newOrigX = width;
        }
        else if (translateX+newOrigX*(1-newScale) >= 0){
            translateX = 0;
            newOrigX = 0;        
        }
        if(translateY+newOrigY+(height - newOrigY)*newScale <= height){
            translateY = 0;
            newOrigY = height;
        }
        else if (translateY+newOrigY*(1-newScale) >= 0){
            translateY = 0;
            newOrigY = 0;
        }
    }

return new Transformations(newOrigX, newOrigY, translateX, translateY, newScale);
}

到0.5。缩小图像开始跳到中心和底部\右

0 个答案:

没有答案