Maus-events auf touch-Fall für ipad Kompatibilität

habe ich diese Kinder malen app, die Maus-events verwendet, um Farbe auf ein Bild. Allerdings muss ich konvertieren Maus-Ereignisse zu berühren, so dass es könnte die Arbeit an einem ipad. Bitte kann jemand mir erklären, wie dies zu tun. Meine app-code ist ganz ähnlich wie dieses Beispiel-code http://cool-php-tutorials.blogspot.co.uk/2011/05/simple-html5-drawing-app-with-saving.html.

P. S meine Kenntnisse über javascript ist nicht auf ein advanced level also bitte, wenn Sie mir zeigen, arbeiten oder code-Beispiele werden eine große Hilfe

Mein code, funktioniert die Maus-event sind wie folgt. Bitte können verdeckte diese Funktionalität von Maus zu berühren.. bitte, ich bin stecken geblieben auf diese seit 2 Tagen jetzt.. 😐

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();

//binding events to the canvas
$('#drawingCanvas').mousedown(function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;

  paint = true; //start painting
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);

  //always call redraw
  redraw();
});

$('#drawingCanvas').mousemove(function(e){
  if(paint){
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    redraw();
  }
});

//when mouse is released, stop painting, clear the arrays with dots
$('#drawingCanvas').mouseup(function(e){
  paint = false;

  clickX = new Array();
  clickY = new Array();
  clickDrag = new Array();
});

//stop painting when dragged out of the canvas
$('#drawARobot').mouseleave(function(e){
  paint = false;
});


//The function pushes to the three dot arrays
function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}



//this is where actual drawing happens
//we add dots to the canvas


function redraw(){

  for(var i=0; i < clickX.length; i++)
  {  
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
     }
     context.lineTo(clickX[i], clickY[i]);
     context.closePath();
     context.stroke();
  }
}

Bitte siehe stackoverflow.com/questions/1517924/...

InformationsquelleAutor Ash | 2013-07-12

Können Sie anzeigen wie diese:

$('#drawingCanvas').bind("mousedown touchstart", function(e){

$('#drawingCanvas').bind("mousemove touchmove", function(e){

$('#drawingCanvas').bind("mouseup touchend", function(e){

Und als Feinabstimmung der code, wenn nötig.

danke...ich habe endlich arbeiten

InformationsquelleAutor Niels

Versuchen, diese :

HINWEIS : Sie müssen die jquery-Bibliothek .

touchmouse.js

(function() {

    /* == GLOBAL DECLERATIONS == */
    TouchMouseEvent = {
        DOWN: "touchmousedown",
        UP: "touchmouseup",
        MOVE: "touchmousemove"
    }

    /* == EVENT LISTENERS == */
    var onMouseEvent = function(event) {
        var type;

        switch (event.type) {
            case "mousedown": type = TouchMouseEvent.DOWN; break;
            case "mouseup":   type = TouchMouseEvent.UP;   break;
            case "mousemove": type = TouchMouseEvent.MOVE; break;
            default: 
                return;
        }

        var touchMouseEvent = normalizeEvent(type, event, event.pageX, event.pageY);      
        $(event.target).trigger(touchMouseEvent); 
    }

    var onTouchEvent = function(event) {
        var type;

        switch (event.type) {
            case "touchstart": type = TouchMouseEvent.DOWN; break;
            case "touchend":   type = TouchMouseEvent.UP;   break;
            case "touchmove":  type = TouchMouseEvent.MOVE; break;
            default: 
                return;
        }

        var touch = event.originalEvent.touches[0];
        var touchMouseEvent;

        if (type == TouchMouseEvent.UP) 
            touchMouseEvent = normalizeEvent(type, event, null, null);
        else 
            touchMouseEvent = normalizeEvent(type, event, touch.pageX, touch.pageY);

        $(event.target).trigger(touchMouseEvent); 
    }

    /* == NORMALIZE == */
    var normalizeEvent = function(type, original, x, y) {
        return $.Event(type, {
            pageX: x,
            pageY: y,
            originalEvent: original
        });
    }

    /* == LISTEN TO ORIGINAL EVENT == */
    var jQueryDocument = $(document);

    if ("ontouchstart" in window) {
        jQueryDocument.on("touchstart", onTouchEvent);
        jQueryDocument.on("touchmove", onTouchEvent);
        jQueryDocument.on("touchend", onTouchEvent); 
    } else {
        jQueryDocument.on("mousedown", onMouseEvent);
        jQueryDocument.on("mouseup", onMouseEvent);
        jQueryDocument.on("mousemove", onMouseEvent);
    }

})();

html-Seite (index.html)

<!DOCTYPE html>
<html>
    <head>
        <title>touch</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf8" />
        <meta name="author" content="AUTHOR" />
        <meta name="keyword" content="KEYWORD" />
        <meta name="description" content="DESCRIPTION" />
        <script type="text/javascript" src="jquery.min.js"></script><!-- Please Download the jquery library -->
        <script type="text/javascript" src="touchmouse.js"></script>
        <script type="text/javascript">
        $(function(){
                var startdrag= false;
             $("#a").on(TouchMouseEvent.DOWN, function(){
                startdrag= true;
                move();

             });
             function move(){

                 $("#a").on(TouchMouseEvent.MOVE, function(e){
                    if(startdrag){
                    $(this).css('left',(e.pageX-50)) ;
                    $(this).css('top',(e.pageY-50));
                 }
                 });

            }
             $("#a").on(TouchMouseEvent.UP, function(e){
                startdrag= false;

             });

        });
        </script>

    </head>
    <body>
        <div id ="a" style="display:block;position:absolute;width:100px;height:100px;background:red;" ></div>
    </body>
</html>

Dies ist für mich arbeiten auf android-Handys.

Hat bei mir auf einem iPad gut, danke für den Hinweis!

InformationsquelleAutor Lekhnath

1

Das problem mit Maus-und touch-Ereignissen ist, dass Sie nicht über die gleiche api,

so u müssen zu normalisieren, die api zu haben, sowohl Maus-und touch-Eingaben.

Gibt es einige Lösungen gibt, wie:
- http://eightmedia.github.io/hammer.js/
Hammer und code ist sehr einfach zu verwenden:
```
var hamme = $("#myCanvas").hammer();

hammer.on("touch", function(e){     
   e.gesture.center.pageX;
    //..
});

hammer.on("drag", function(e){
    e.gesture.center.pageX
   //..
})
```
InformationsquelleAutor winthers
0

Können Sie auch versuchen - jQuery UI Touch Punch

Klicken Sie Hier

InformationsquelleAutor Ishan Jain

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.