Javascript 使用jQuery在移动设备上使用手势收缩缩放HTML5画布

我想知道是否有人能帮我解决我手机应用程序中的缩放问题

基本上，我使用的是HTML5画布（因为我希望以后能够在画布上绘制），并且希望能够使用收缩手势放大画布的特定区域。还可以在画布图像周围平移

目前，我正在使用Hammer.js

下面的代码可以正常工作，但图像会跳转，对缩放动作非常敏感。因为变焦与手势不成比例。

$(document).ready(function(e) {
    var canvas = document.getElementById('geomap');
    var context = canvas.getContext('2d');
    var imageObj = new Image();
    var mc = new Hammer.Manager(canvas);
    var pinch = new Hammer.Pinch();
    mc.add([pinch]);    // add to the Manager

    imageObj.src = './images/MapCanvas.png';

    var canvasHammer = {
        scale : 1,      // Scale of the image
        xLast : 0,      // Last location X on screen
        yLast : 0,      // Last location Y on screen
        xImage : 0,     // Last location X on image
        yImage : 0      // Last location Y on image
    };

    imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
        context.scale(canvasHammer.scale, canvasHammer.scale);
    };

    // ============ GESTURE PINCH =================             
    mc.on("pinch", function(ev) {
        var zoomScale = ev.scale;

        var posX = ev.center.x;
        var posY = ev.center.y;

        // Find current location on screen
        var xScreen = posX;
        var yScreen = posY;

        canvasHammer.xImage = canvasHammer.xImage + ((xScreen - canvasHammer.xLast) / canvasHammer.scale);
        canvasHammer.yImage = canvasHammer.yImage + ((yScreen - canvasHammer.yLast) / canvasHammer.scale);

        canvasHammer.scale = zoomScale;

        // Determine the new location of the image
        var xNew = (xScreen - canvasHammer.xImage) / canvasHammer.scale;
        var yNew = (yScreen - canvasHammer.yImage) / canvasHammer.scale;

        canvasHammer.xLast = xScreen;
        canvasHammer.yLast = yScreen;

        context.clearRect(0, 0, canvas.width, canvas.height);   // Clear the contents of the canvas.
        //context.save();
        context.drawImage(imageObj,xNew,yNew);      
        context.scale(zoomScale,zoomScale);
        //context.restore();
        $('.stuff').html("<p> Pinch : " + zoomScale + "<br>xNew : " + xNew + "<br>yNew : " + yNew + "</p>"); // For diagnostics!

    });


    $('#syncbutton').click(function() {
        if(hasInternetConnection())
        {
            alert('Nothing to sync. All maps currently up-to-date.');
        }
        else
        {
            alert('You need an internet connection to sync.');  
        }

    });

});

$（文档）.ready（函数（e）{
var canvas=document.getElementById（'geomap'）；
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
var mc=新的Hammer.Manager（画布）；
var pinch=新锤子。pinch（）；
mc.add（[pinch]）；//添加到管理器
imageObj.src='./images/MapCanvas.png'；
var画布锤={
比例：1，//图像的比例
xLast:0，//屏幕上的最后一个位置X
yLast:0，//屏幕上的最后一个位置Y
xImage:0，//图像上的最后一个位置X
yImage:0//图像上的最后一个位置Y
};
imageObj.onload=函数（）{
drawImage（imageObj，0,0）；
上下文.比例（canvasHammer.scale，canvasHammer.scale）；
};
//==================================================================
mc.on（“夹点”，功能（ev）{
var zoomScale=ev.scale；
var posX=ev.center.x；
var posY=电动汽车中心y；
//在屏幕上查找当前位置
var xsscreen=posX；
var-ysscreen=posY；
canvasHammer.xImage=canvasHammer.xImage+（（xScreen-canvasHammer.xLast）/canvasHammer.scale）；
canvasHammer.yImage=canvasHammer.yImage+（（ysscreen-canvasHammer.yLast）/canvasHammer.scale）；
canvasHammer.scale=缩放比例；
//确定图像的新位置
var xNew=（xScreen-canvasHammer.xImage）/canvasHammer.scale；
var yNew=（ysscreen-canvasHammer.yImage）/canvasHammer.scale；
canvasHammer.xLast=xScreen；
canvasHammer.yLast=ysscreen；
context.clearRect（0，0，canvas.width，canvas.height）；//清除画布的内容。
//context.save（）；
context.drawImage（imageObj、xNew、yNew）；
context.scale（zoomScale，zoomScale）；
//restore（）；
$（'.stuff'）.html（“Pinch:+zoomScale+”
xNew:+xNew+”
yNew:+yNew+”
”；//用于诊断！
});
$（“#同步按钮”）。单击（函数（）{
如果（hasInternetConnection（））
{
警报（'无需同步。所有地图当前都是最新的'）；
}
其他的
{
警报（'您需要internet连接才能同步'）；
}
});
});

HTML:

地图编辑器

谢谢

<div data-role="page" id="map_editor" data-theme="b">
            <div data-role="header">
                <h1>Map Editor</h1>
            </div>
            <div data-role="content" class="pwdcontent">    
                <div class="mapcontainer">
                    <canvas id="geomap" class="mapCanvas"></canvas>
                    <div class="stuff"></div>   

                </div>


            </div>
        </div>