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：キャンバスがページの上隅にない場合は、キャンバスの位置を取得して、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};
}
于 2012-10-25T20:45:29.073 に答える