可移动图像与捏缩放移动web应用程序

时间:2015-05-28 16:27:38

标签: javascript easeljs hammer.js

我正在开展一个项目,我正在尝试在移动网络应用中的画布内制作具有缩放缩放功能的可拖动图像。我正在使用EaselJS使其可拖动,而HammerJS则使用缩放缩放功能。但它不能平滑地工作,当缩放图像时,它有时会跳转到不同的位置。

我用于Hammer JS的代码捏缩放。

    hammerTime.get('pinch').set({ enable: true });
    hammerTime.on('pinchstart', function() {
        last_scale = scale;
    });
    hammerTime.on('pinchin pinchout', function(evt) {
        scale = last_scale * evt.scale;
        bitmap.scaleX = bitmap.scaleY = scale;

        shouldUpdateCanvas = true;
    });

使其可拖动的EaselJS代码。

     bitmap = new createjs.Bitmap(originalImage);

    // Bind the image events (draggable).
    bitmap.addEventListener('mousedown', function(evt) {
        var currentTarget = evt.currentTarget;
        var localPoint = currentTarget.globalToLocal(evt.stageX, evt.stageY);
        var newX = currentTarget.regX - localPoint.x;
        var newY = currentTarget.regY - localPoint.y;

        //set the new regX/Y and then adjust the real-position, otherwise the new regX/Y would cause a jump.
        currentTarget.regX = localPoint.x;
        currentTarget.x -= newX;
        currentTarget.regY = localPoint.y;
        currentTarget.y -= newY;
    });


    bitmap.addEventListener('pressmove', function(evt) {
        evt.currentTarget.x = evt.stageX;
        evt.currentTarget.y = evt.stageY;

        shouldUpdateCanvas = true;
    });

我也无法找到关于HammerJS的好文档。我想知道pinchstart究竟在代码中做了什么。我希望用HammerJS做一些改变可以帮助我避免在缩放过程中跳跃图像。任何帮助将不胜感激。

0 个答案:

没有答案