1

我正在使用 kineticjs 并希望在单击图层时放大图层。缩放应该以点击点为中心。
我的代码有效，但前提是我将每次后续点击的点击点都保留在同一个位置。
当我改变点时，图层会向某个方向平移。

image_part.on('click', function(evt){
    zoom += 0.1;
    var offset = layer.getOffset();
    layer.setOffset(evt.pageX, evt.pageY);
    layer.setScale(zoom);
    layer.setX(evt.pageX);
    layer.setY(evt.pageY);
    layer.draw();
});

有谁知道有效的解决方案？

4

1 回答 1

3

我这样做。我正在缩放整个图层，但它适用于任何图像或形状。只需让 setPosition 完成所有工作并针对新的比例因子进行调整。注意1：如果画布不在页面的上角，您还需要获取画布位置并将其从页面X，Y位置移除。这就是函数 getPos() 的作用。我直接从另一个 stackoverflow 主题中提取了它。注意2：使用zP点控制缩放发生的位置（即在鼠标点击位置，或中心而不是缩放等）

动力学JS部分...

    layer.on("dblclick",function(ev){
        var d=document.getElementById('photoCnvs');         
        var cnvsPos=getPos(d);

        var R={  //(canvas space)
            x: ev.pageX,
            y: ev.pageY
        };

        var off0=this.getPosition();
        var scl0=this.getScale().x;
        var w=stageM.getWidth();
        var h=stageM.getHeight();

        //desired zoom point (e.g. mouse position, canvas center)
        var zP={
            //use these first two lines to center the image on the clicked point while zooming
            //x: w/2,
            //y: h/2
            //use these next two lines to zoom the image around the clicked point
            x: R.x-cnvsPos.x,
            y: R.y-cnvsPos.y                
        }

    //actual pixel value clicked (image space)
        var xA={
            x:(R.x-off0.x-cnvsPos.x)/scl0,
            y:(R.y-off0.y-cnvsPos.y)/scl0
        }

    //rescale image
        var sclf=scl0*1.10;
        this.setScale(sclf);

    //move clicked pixel to the desired zoom point
        var newR={
            x: zP.x-sclf*xA.x,
            y: zP.y-sclf*xA.y
        }

        this.setPosition(newR.x, newR.y)

        this.draw();

    })

然后画布位置部分

function getPos(el) {
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}
于 2012-10-25T20:45:29.073 回答