Projet

Général

Profil

Révision 235b072f

Ajouté par Jocelyn Dealande il y a environ 10 ans

Marc patch to handle touch events

Voir les différences:

js/pano.js
22 22
var border_width = 2;
23 23
var imageObj = new Array();
24 24

  
25

  
26
var fingr = 0;  // mémorisation de lécart entre doigts;
25 27
var last  = {x:0,y:0};
26 28
var shift = {x:0,y:0};
27 29
var mouse = {x:0,y:0};
......
342 344

  
343 345
function onImageClick(e) {
344 346
    hide_contextmenu();
345
    shift.x = last.x;
346
    shift.y = last.y;
347
    speed.x = 0;
348
    speed.y = 0;
349
    mouse.x = e.pageX;
350
    mouse.y = e.pageY;
347
    var index = {};
348
    if (e.touches && e.touches.length == 2) {
349
	e.preventDefault();
350
	fingr = Math.sqrt((e.touches[0].clientX - e.touches[1].clientX)^2 +
351
			  (e.touches[0].clientY - e.touches[1].clientY)^2);
352
    } else {
353
	if (e.touches) {
354
	    e.preventDefault();
355
	    index.x = e.changedTouches[0].clientX;
356
	    index.y = e.changedTouches[0].clientY;
357
	} else {
358
	    index.x = e.pageX;
359
	    index.y = e.pageY;
360
	}
361

  
362
	shift.x = last.x;
363
	shift.y = last.y;
364
	speed.x = 0;
365
	speed.y = 0;
366
	mouse.x = index.x;
367
	mouse.y = index.y;
368
    }
351 369
    clearTimeout(tmt);  //arrêt de l'éffet eventuel d'amorti en cours.
352 370
    canvas.addEventListener('mousemove', stickImage, false);
371
    canvas.addEventListener('touchmove', stickImage, false);
353 372
    canvas.addEventListener('mouseup', launchImage, false);
373
    canvas.addEventListener('touchend', launchImage, false);
354 374
    //canvas.addEventListener('mouseout', launchImage, false);
355 375
    canvas.style.cursor='move';
356 376
    //document.onmousemove = stickImage;
357
    document.onmouseup = launchImage;
377
    //document.onmouseup = launchImage;
358 378
    hide_links();
359 379
}
360 380

  
361 381

  
362 382
function stickImage(e) {
363
    var xs = mouse.x - e.pageX + shift.x;
364
    var ys = mouse.y - e.pageY + shift.y;
383
    var index = {};
384
    if (e.changedTouches && e.changedTouches.length == 2) {
385
	e.preventDefault();
386
	// cas du zoom à 2 doigts
387
	var nfingr = Math.sqrt((e.changedTouches[0].clientX - e.changedTouches[1].clientX)^2 +
388
			       (e.changedTouches[0].clientY - e.changedTouches[1].clientY)^2);
389
	var evt = {}
390
	evt.pageX = (e.changedTouches[0].clientX + e.changedTouches[1].clientX)/2;
391
	evt.pageY = (e.changedTouches[0].clientY + e.changedTouches[1].clientY)/2;
392
	if (fingr > nfingr*2 || fingr < nfingr/2) {
393
	    evt.wheelDelta = fingr - nfingr;
394
	    fingr = nfingr;
395
	    return wheel_zoom(evt);
396
	} else {
397
	    return;
398
	}
399
    }
400
    if (e.touches) {
401
	e.preventDefault();
402
	index.x = e.changedTouches[0].clientX;
403
	index.y = e.changedTouches[0].clientY;
404
    } else {
405
	index.x = e.pageX;
406
	index.y = e.pageY;
407
    }
408

  
409
    var xs = mouse.x - index.x + shift.x;
410
    var ys = mouse.y - index.y + shift.y;
365 411
    speed.x = xs - last.x;  //mémorisation des vitesses horizontales
366 412
    speed.y = ys - last.y;  //et verticales lors de ce déplacement
367 413
    putImage(xs, ys);
368 414
}
369 415

  
370 416
function launchImage(e) {
417
    var index = {};
418
    if (e.touches) {
419
	e.preventDefault();
420
	index.x = e.changedTouches[0].clientX;
421
	index.y = e.changedTouches[0].clientY;
422
    } else {
423
	index.x = e.pageX;
424
	index.y = e.pageY;
425
    }
371 426
    distort_canvas(0);
372 427
    canvas.removeEventListener('mousemove', stickImage, false);
428
    canvas.removeEventListener('touchmove', stickImage, false);
373 429
    //document.onmousemove = null;
374
    shift.x = e.pageX - mouse.x + shift.x;
375
    shift.y = e.pageY - mouse.y + shift.y;
430
    shift.x = index.x - mouse.x + shift.x;
431
    shift.y = index.y - mouse.y + shift.y;
376 432
    tmt = setTimeout(inertialImage, 100);
377 433
}
378 434

  
......
620 676
	zshift.x = event.pageX-canvas.width/2-canvas_pos.x;
621 677
	zshift.y = event.pageY-canvas.height/2-canvas_pos.y;
622 678
    }
623
    event.preventDefault();
679
    //event.preventDefault();
624 680
    if (event.wheelDelta < 0 && zoom_control.value < zoom_control.max) {
625 681
	zoom_control.value++;
626 682
	change_zoom(zshift.x, zshift.y);
......
691 747
}
692 748

  
693 749
function display_links(e) {
750
    var index = {};
751
    if (e.touches) {
752
	e.preventDefault();
753
	index.x = e.changedTouches[0].clientX;
754
	index.y = e.changedTouches[0].clientY;
755
    } else {
756
	index.x = e.pageX;
757
	index.y = e.pageY;
758
    }
694 759
    var info = document.getElementById('info');
695
    var mouse_x = e.pageX-canvas_pos.x;
696
    var mouse_y = e.pageY-canvas_pos.y;
760
    var mouse_x = index.x-canvas_pos.x;
761
    var mouse_y = index.y-canvas_pos.y;
697 762
    var pos_x = nmodulo(last.x + mouse_x - canvas.width/2, zm.im.width);
698 763
    var pos_y = last.y + mouse_y - canvas.height/2;
699 764
    //var cap = ((pos_x/zm.im.width)*360).toFixed(2);
700 765
    var res = zm.get_cap_ele(pos_x, zm.im.height/2 - pos_y);
701 766
    //var ele = ((zm.im.height/2 - pos_y)/zm.im.width)*360;
702 767
    info.innerHTML = 'élévation : '+res.ele.toFixed(2)+'<br/>cap : '+res.cap.toFixed(2);
703
    info.style.top = e.pageY+'px';
704
    info.style.left = e.pageX+'px';
768
    info.style.top = index.y+'px';
769
    info.style.left = index.x+'px';
705 770
    info.style.backgroundColor = '#FFC';
706 771
    info.style.display = 'block';
707 772
    canvas.style.cursor='crosshair';
......
722 787

  
723 788
function hide_links() {
724 789
    canvas.removeEventListener( "mousemove", display_links, false);
790
    canvas.removeEventListener( "touchmove", display_links, false);
725 791
    var info = document.getElementById('info');
726 792
    info.style.display = 'none';
727 793
}
728 794

  
729 795
function show_links() {
730 796
    canvas.addEventListener( "mousemove", display_links, false);
797
    canvas.addEventListener( "touchmove", display_links, false);
731 798
//    var info = document.getElementById('info');
732 799
//    info.style.display = 'block';
733 800
}
......
833 900

  
834 901
function clean_canvas_events(e) {
835 902
    canvas.removeEventListener('mousemove', stickImage, false);
903
    canvas.removeEventListener('touchmove', stickImage, false);
836 904
    document.getElementById('info').style.display = 'none';
837 905
    speed.x = 0;
838 906
    speed.y = 0;
......
928 996
	localisation.addEventListener('mouseout',paramOut,false);
929 997
    }
930 998
    canvas.addEventListener('mousedown', onImageClick, false);
999
    canvas.addEventListener('touchstart', onImageClick, false);
931 1000
    document.addEventListener('keydown', keys, false);
932 1001
    canvas.addEventListener('mousewheel', wheel_zoom, false);
933 1002
    window.onresize = canvas_resize;

Formats disponibles : Unified diff