Mobile crosshair

[grubbychicken]

Hi Wayne, thanks for helping me implement the crosshair last week. I am trying to get this to work on mobile too. A few problems I am running in to:

-the crosshair is only placed on the image when the user taps the screen. I'd really like the user to be able to run their finger across their screen and the crosshair follow their finger. When the user removes their finger from the screen my #c1 div should be set with the coordinates (as in my onClick event below. Do you think this is possible with hammer.js? Is this a 'touchmove' event?

-my crosshairs don't follow the view as the page is scrolled.

I'd really appreciate your help with this. Thanks!

function initializeApp() {
    var $img = $("#mobile-image").imgViewer({
        zoomable: true,
        draggable: true,
        zoomMax: 4,
        onClick: function( e ) {
            var pos = this.cursorToImg( e.pageX, e.pageY);
            var imgpos = this.relposToImage(pos);
            $("#c1").html("Selected: X: " + imgpos.x + " Y: " + imgpos.y);
        }
    });
    var $widg = $img.data().wgmImgViewer;
    $view = $widg.view;
    $zimg = $widg.zimg;
    $view.append('<div class="hair" id="crosshair-v"></div>');
    $view.append('<div class="hair" id="crosshair-h"></div>');
    var cH = $('#crosshair-h');
    var cV = $('#crosshair-v');
    $view.on('mousemove',function( e ){
        var elem = e.target;
        cH.css({
            top: e.pageY,
            left: $view.offset().left,
            width:elem.width
        });
        cV.css({
            top: $view.offset().top,
            left: e.pageX,
            height: elem.height
        });
    });
};

[waynegm]

The hammer event to bind to is panmove - $zimg.on("panmove", function...). However, something to consider with touch is how will you distinguish between when the crosshair should be tracking the finger and when the image should be panned/dragged? You can disable dragging with the widget dragable option.

[grubbychicken]

Great, thanks. I'll give it a go!