Question

我真的很擅长编码。我正在尝试制作适用于桌面和移动设备的绘图应用程序。我使用JavaScript在桌面上运行良好，但是为了让它在移动设备上工作，似乎JQuery mobile是推荐的方法。我正在将它转换为JQuery并让maint与.mousedown，.mouseup等一起工作但是当我改为.vmousedown，.vmouseup等等让它与触摸一起工作时我得到一个错误，我不能似乎解决了。

未捕获的TypeError：对象[object Object]没有方法'vmousedown'

我见过其他有类似问题的人，但我很难让它适合我。

JSFiddle - http://jsfiddle.net/mquickel/dehAD/79/

HTML代码段

<html>
<head>
    <link rel="stylesheet" type="text/css" href="colorCSS2.css">


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>
<body data-role="page">
<div id="container">
    <div id="sketch" data-role="content">
        <canvas id="paint" style="z-index: 0; position:absolute;" height="600px" width="600px"></canvas> 
        <canvas id="layer2" style="z-index: 1; position:absolute;" height="600px" width="600px"></canvas> 
    </div>

JS片段

    document.getElementById( "container" ).onmousedown = function(event){
    event.preventDefault();
    }

    var layer2 = document.getElementById("layer2");
    var ctx2 = layer2.getContext("2d");
    var imageObj = new Image();
    /* Loading the Image*/
    imageObj.onload = function() {
        ctx2.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'https://lh5.googleusercontent.com/-P5ucC3TjCLU/UjHE0rENTaI/AAAAAAAAAts/mH2A_OORkQY/s800/color.png';


(function() {
    var canvas = document.getElementById('paint');
    var ctx = canvas.getContext('2d');
    var imageObj = new Image();

    var cont = document.getElementById('container');
    var mouse = {x: 0, y: 0};
    var last_mouse = {x: 0, y: 0};

    /* Mouse Capturing Work */

    $(cont).mousemove (function(e) {
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;

     mouse.x = e.pageX - this.offsetLeft;
     mouse.y = e.pageY - this.offsetTop;
    });


    /* Drawing on Paint App */
    ctx.lineWidth = 20;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.strokeStyle = brushColor; 


    $(cont).vmousedown(function(e) {
    console.log("hi");
    $(cont).vmousemove (onPaint);
    });


     $(cont).vmouseup (function() {
     console.log("up");
     $(cont).unbind ('vmousemove', onPaint);
     });

    var onPaint = function() {
        ctx.beginPath();
        ctx.moveTo(last_mouse.x, last_mouse.y);
        ctx.lineTo(mouse.x, mouse.y);
        ctx.closePath();
        ctx.stroke();
    };

}());

Paint App，JQuery mobile - 对象没有方法

0 个答案: