Question

我正在使用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();
});

有没有人知道有效的解决方案？

Answer 1

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

kineticJS部分......

    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};
}

使用kineticjs在点击点放大图层

1 个答案: